01-盒模型：

padding： 内边距
1. padding会撑大盒子
2. padding没有颜色，背景色会覆盖到padding区域
3. padding是加给父元素，调整子元素和内容的位置
4. padding没有负数
单边的内边距
padding-方位词(top/right/bottom/right)
数值
百分比
padding的百分比是对照元素的宽度来设置
1-4边的内边距
padding:
一个值 四边
两个值 上下 左右
三个值 上 左右 下
四个值 上 右 下 左
如果想写一个总宽 200*300 padding 20px border 10px
width: 200 - 20 -10 -20 -10 = 140
height: 300 - 20 - 10 - 20 - 10 = 240

padding面试题
.son {
background-color: cyan;
/ 350 350 /
width: 50%;
/ 高度? /
/ padding-top padding-bottom 可以在垂直方向撑开盒子 === 盒子的总高度撑开 /
/ padding的百分比参考父元素的宽 */
padding-bottom: 50%;
}
写一个父元素宽度一半的正方形 —————
1、可以将子元素宽度设为0，padding四边设为25%
2、可将子元素宽度设为父元素一半，然后把下边框设为50%（父元素宽度的一半）

margin 外间距
1. margin不会撑大盒子
2. margin没有颜色
3. margin添加给元素自身调整元素自身的位置或元素和元素之间的位置
4. margin可以设置负数
单边的外间距
margin-方位词(top/right/bottom/left)
数值
百分比
auto
1-4边的外间距
margin:
一个值 四边
两个值 上下 左右
三个值 上 左右 下
四个值 上 右 下 左
去掉内外间距
* {
margin: 0;
padding: 0;
}
独占一行的元素水平居中
margin: 0 auto
auto: 平均分配空间
不独占一行的元素水平居中
给父元素添加text-align: center

margin的问题
1. 父元素里面的第一个子元素添加margin-top, 会把父元素带下来
原因: 父元素会和子元素共享margin-top
解决:
- 给父元素添加1px的padding-top 或者 1px的border-top
- 给父元素添加 overflow: hidden (触发BFC)
2. 相邻的上下两个元素, 上面的有margin-bottom, 下面的有margin-top, 间距会发生重叠, 数值以大的为准
解决:
- 间距写单一方向
3. 不独占一行的元素, 使用上下 margin/padding/border无效

盒模型
内容区 content
内边距 padding
边框 border
会撑大盒子
外间距 margin

02-css三大特性

继承
!继承的权重是0
子元素可以继承父元素的部分属性
文本属性可以继承
列表继承列表的属性
表格继承表格的属性
选择器不能跨级比较, class永远比标签大 id永远比class大
层叠
优先级
一个标签可以被多个选择器选中,相同的属性看权重, 不同的属性进行叠加