HTML 学习笔记
2019-07-04 本文已影响0人
Faith_K
1 常用的属性
width 宽度
height 高度
color 设置文颜色
font-size 字体大小
border-bottom
background-color 背景颜色
display inline 让块级标签->行内元素 block 让行内元素->块级标签 inline-block行内块级标签
margin 外边距
padding 内边距 padding-left padding-right...
border-radius 圆角 border-top-left-radius border-top-right-radius...
float 浮动 left 左浮动 right右边浮动
text-align 文本对齐
position 是否开启位置改变 relative相对 absolute绝对 fixed 固定
line-height 设置行高
text-decoration none去除下划线 如果去除不掉 text-decoration: none !important
list-style 设置列表风控
cursor 鼠标移动需要显示的类型
background: url("../images/desktop.png") 设置背景图片 background-repeat no-repeat关闭平铺
background-size 背景大小
background-attachment 背景滚动 fixed
z-index 视图层级 1 2 3...
transform: scale(1.5) 图片放大一点五呗
transform-origin: bottom center 方向
box-sizing: border-box; 设置盒子伸缩 向内还是向外
vertical-align: middle 设置两个元素中间对齐
border: 1px solid #e0e0e0 设置边框宽度颜色
overflow: hidden clear: both /*解决高度塌陷问题*/ .clearfix:before .clearfix:after
2 序号选择器
不区分类型
:first-child
选中同级别中第一个标签
:last-child
选中同级别中最后一个标签
:nth-last-child(n)
选中同级别中倒数第n个标签
:nth-child(n)
选中同级别中第n个标签
:only-child
选中同级别中唯一子元素标签
区分类型
:first-of-type
选中同级别中同类型第一个标签
:last-of-type
选中同级别中同类型最后一个标签
:nth-of-type(n)
选中同级别中同类型第n个标签
:nth-last-of-type(n)
选中同级别中同类型倒数第n个标签
:only-of-type
选中同级别中唯一同类型子元素标签
奇偶选择
:nth-child(odd)
选中级别中所有奇数
:nth-child(even)
选中同级别中所有的偶数
:nth-child(xn+y)
x,y是用户自定义的 n为计数器,从0开始递增选择, 到元素的总个数停止