一、伪类选择器
1.1查找单个元素
根据元素的结构关系查找元素
查找第一个元素:标签名:first-child
查找最后一个元素:标签名:last-child
查找第n个元素:标签名:nth-child(n)
1.2查找多个元素
:nth-child(公式)
偶数:2n
奇数:2n+1;2n-1
5的倍数:5n
5以后的标签:n+5
5以前的标签:-n+5
二、伪元素选择器
创建虚拟元素,用来摆放装饰性的内容
标签名:before:在标签选中的元素最前面添加一个元素
标签名:after:在标签选中的元素最后面添加一个元素
必须设置content属性,否则不生效
三、盒子模型
组成部分
内容区域:width&height
内边距:padding(内容与盒子的边距)会撑大盒子
边框线:border 会撑大盒子
外边距:margin(出现在盒子外面)
3.1边框线
border(bd)
属性值(不区分先后顺序):边框线粗细 线条样式 颜色
常用线条样式
实线:solid
虚线:dashed
点线:dottted
3.2盒子模型-尺寸计算
盒子尺寸:内容尺寸+bored尺寸+内边距
内边距和边框线会撑大盒子
解决办法
手动做减法:减掉border/padding的尺寸
内减模式:box-sizing:border-box
3.3外边距
拉开两个盒子的距离
属性名:margin
与padding属性值写法、含义相同
3.4版心居中
margin:0 auto
四、清楚默认样式
*{
margin:0;
padding:0;
}
4.1去掉列表的项目符号
list-style:none
五、盒子模型-元素溢出
控制溢出元素的显示方式
属性名:overflow
属性值
hidden:溢出隐藏
scroll:溢出滚动(没溢出也有滚动条)
auto:溢出滚动(溢出时才有滚动条)
六、外边距问题
6.1合并现象
垂直排列的兄弟元素,margin会合并
现象:取两个margin较大的值生效
6.2塌陷问题
父子级的标签,子级添加上外边距,会产生塌陷问题
现象:导致父级一起向下移动
解决方法:
取消自己的margin,父级设置padding
父级设置overflow:hidden
父级设置:border-top
七、行内元素-内外边距问题
行内元素添加margin和padding,无法改变元素垂直位置
解决方法:
给行内元素添加行高可以改变垂直位置
八、盒子模型-圆角
设置元素的外边框为圆角
属性名:border-radius
属性值:数字+px/百分比
从左上顺时针取值,没有取值的角与对角相等
8.1正圆状态
给正方形设置属性值为宽高的一半/50%
最大值为50%,超过无效
8.2胶囊形状
给长方形盒子设置属性值为高度的一半
九、盒子模型-阴影
给元素设置阴影效果
属性名:box-shadow
属性值:X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意:
X轴偏移量和Y轴偏移量必须书写
默认是外阴影,内阴影需要添加inset
十、css书写顺序
1.盒子模型属性
2.文字样式
3.圆角、阴影等属性
十一、小图标技巧
设置为背景图,不平铺 ,垂直居中,不想覆盖在文字上就是用边距拉开