一.css盒模型是网页布局的基石，从里到外包括: content >>>> 鸡蛋 padding >>>> 泡沫 border >>>> 快递盒子 margin >>>> 盒子外部的距离
二.padding的用法 1.padding是长在鸡蛋和盒子之间的，在盒子内部 2.padding是为了调整子元素在父元素里面的位置关系 3.padding值会把盒子撑大 4.如果想要让盒子保持原来的大小，需要用宽高的减掉padding值 5.给单一方向设置padding值 padding-left/right/top/bottom 6.padding设置方法 有1个属性值: 四周 有2个属性值:上下 左右 有3个属性值:上 左右 下 有4个属性值:上 右 下 左 7.padding不能设置负值 8.padding不会对背景图造成影响 9.如果一个盒子没有固定的宽和高,是不需要减去padding值
三.margin 1. margin长在元素外面的 2. margin控制的是同级元素之间的位置关系 3. margin不会对盒子本身的宽高造成影响 4. 给单一方向添加margin值 margin-left/right/top/bottom:; 5. margin的设置方法 有1个属性值: 四周 有2个属性值:上下 左右 有3个属性值:上 左右 下 有4个属性值:上 右 下 左 6. margin可以设置负值 7. margin常出现的bug: a. 当父元素和子元素都没有加浮动的情况下,如果给第一个子元素加上margin-top 会错误的把margin-top加在父元素上面 b. 上下相邻两个元素之间的margin值,不会叠加,按照两个中的最大值设置 c. 左右相邻的会叠加 8. margin:0 auto; 让当前元素在父元素中左右居中
面试题: 计算盒子在网页中真正所占据的空间
占有的宽度: width+padding-left/right+border-left/right+margin-left/right
占有的高度:height+padding-top/bottom+border-top/bottom+margin-top/bottom
