CSS 进阶

一，CSS 盒子模型
1，content内容部分有CSS宽和高两个属性决定。


2，padding内边距
内边距由padding样式来设置。padding样式可以分成padding-left，padding-right，padding-top，padding-bottom和padding五个属性。
padding内边距：


padding值可以通过复合写法设置成一个两个和四个值。


2，border边框
不设置padding时，边框紧挨着content内容：


当设置padding时，边框挤奶padding内边距：


3，margin外边距
外边距是指盒子与盒子之间的距离。margin跟padding类似有五个属性，也支持复合写法。


4，margin叠加和传递
（1）margin叠加当两个盒子同时添加上下外边距时，会出现叠加问题。


左右排列：


（2）margin传递
margin传递的问题只会出现在嵌套的结构中，且只有margin-top才会有传递问题，其他三个方面时没有问题的。


当子标签添加margin-top值时，会将值传递给父标签，有时不想将值传递给父标签时可以用父标签设置padding-top来替代子标签的margin-top值。


二，块与内联
1，独占一行

2，支持所有样式
3，不设置宽时，等于父标签的宽度：


不写宽，只设置内边距时，等于父标签减去子标签的内边距：