css伪类选择器、盒子模型等

一、伪类选择器

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.圆角、阴影等属性

十一、小图标技巧

设置为背景图，不平铺 ，垂直居中，不想覆盖在文字上就是用边距拉开