CSS day5

结构伪类选择器：根据元素的结构关系查找元素。
E：first-child：查找第一个E元素
E：last-child：查找最后一个E元素
E：nth-child(N):查找第N个元素（第一个元素N只为1）
nth-child公式：
偶数标签：2n
奇数标签：2n+1，2n-1
找到5的倍数的标签：5n
找到第5个以后的标签：n+5
找到第5个以前的标签：-n+5

伪元素选择器：创建虚拟元素（伪元素），用来摆放装饰性的内容
E::before：在E元素里面最前面添加一个伪元素
E::after:在E元素里面最后面添加一个伪元素
1.必须设置content：""属性，用来设置伪元素的内容，如果没有内容，则引号留空即可。
2.伪元素默认是行内显示模式。
3.权重和标签选择器相同。

PxCook（像素大厨）：设计工具软件，支持PSD文件的文字，颜色，距离自动智能识别。
1.开发面板（自动智能识别）。
2.设计面板（手动测量尺寸和颜色）。

盒子模型：布局网页，摆放盒子和内容
1.内容区域-width和height
2.内边距：padding（出现在内容和盒子边缘之间）内容与盒子边缘之间
3.边框线：border（bd）
4.外边距：margin（出现在盒子外面）出现在盒子外面，拉开两个盒子之间的距离

图片为200px*200px的盒子，padding为20px，尺寸为220px*220px

、图片为200px*200px的盒子通过border（bd）添加边框线

图片为200px*200px的盒子，padding为20px，margin为20px,尺寸为220px*220px，外边框使盒子与网页隔开20px的间距

盒子模型-边框线：border（bd）
属性值：边框线粗细 线条样式 颜色（不区分顺序）
solid：实线
dashed：虚线
dotted：点线
设置单方向边框线:
属性名：border-方位名词（bd+方位名词首字母）
上：bdt（top），下bdb（bottom），左bdl（left），右bdr（right）

盒子模型-内边距：设置内容与盒子边缘之间的距离。
属性名：padding/padding-方位名词
盒子模型-内边距-多值写法：padding多值写法
四个值：上右下左
三个值：上    左右     下
两个值：上下     左右

盒子模型-尺寸计算：
默认情况：盒子尺寸=内容尺寸+border尺寸+内边距尺寸
给盒子加border/padding会撑大盒子
解决：
（1）手动减法，减掉border
（2）内减模式,box-sizing: border-box;
不需要手动减法，加padding和border不会撑大盒子。

盒子模型-外边距：拉开两个盒子之间的距离margin
外边距不会撑大盒子。
 
版心居中：使盒子水平页面居中，但是盒子要有宽度。
margin：0 auto；

清楚默认样式：清楚标签默认的样式，比如：默认的内外边距。
通配符选择器：
*{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
}
去掉列表的项目符号：
li {
            list-style: none;
        }

盒子模型-元素溢出：overflow
hidden：溢出隐藏
scroll：溢出滚动（无论是否溢出，都显示滚动条位置）
auto：溢出滚动（溢出才显示滚动条位置）

外边距问题-合并现象：垂直排列的兄弟元素，上下margin会合并，取两个margin中较大值生效。

外边距问题-塌陷问题：父子级的标签，子级的添加，上外边距，会产生塌陷问题，导致父级一起向下移动。
1.取消子级margin，父级设置padding
2.父级设置overflow：hidden（原理是溢出部分隐藏）
3.父级设置border-top（找到父级正确边缘，与2原理一样）

行内元素-内外边距问题：行内元素添加margin，padding，无法改变元素垂直位置，添加line-height改变垂直位置

盒子模型-圆角：设置元素的外边框为圆角，border-radius，数字+px/百分比（圆角半径）
4值：从左上角开始顺时针
3值：没值的跟对称一样
2值：左上右下一样，左下右上一样
最大值是50%，超过50%没效果

正圆：给正方形盒子设置圆角属性值为宽高一半/50%。
胶囊：给长方形盒子设置圆角属性值为盒子高度一半，一般是按钮常用。

盒子模型-阴影：给元素设置阴影效果，box-shadow
属性值：X轴偏移量 Y轴偏移量  模糊半径 扩散半径 颜色 内外阴影
注意：
1.X轴偏移量和Y轴偏移量必须书写
2.默认是外阴影，内阴影需要添加inset