CSS三种显示模式可以互相转化
CSS中元素分为
块元素（独占一行），行内元素（不独占一行），行内块元素（在一行内显示，可以设置宽高）。
三种元素之间可以互相转化
<!-- 通过display属性来互相转化 -->
<!-- 如下
通过给display 属性赋不同的值
inline-block 转为行内块
block 转为块元素
inline 转为行内元素
-->
<style>
选择器{
displya: inline-block
}
</style>
盒子模型的组成
盒子模型的组成
内容 内边距 边框 外边距组成
border设置盒子的边框属性 四个方向top right bottom left
style：solid（实线） dotted（点线） dshed（虚线） double（双实线）
属性连写：
border-方向:width style color
表示四个方向的统一设置：
border:width style color
padding内边距
padding指当前盒子内的内容到盒子边的距离：
分为四个方向
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
pdding连写
padding: 四个值 上右下左
padding:三个值 上 左右 下
padding:两个值 上下 左右
padding:一个值 上下左右
padding会把盒子撑大的问题
盒子的大小等于 盒子本身的宽高 + 内边距 + 边框
盒子最终的宽度=盒子自身设置的宽度+左右padding+左右border
盒子最终的高度=盒子自身设置的高度+上下padding+上下border
继承的宽度设置左右padding时的问题：
当小盒子没有设置宽度时会默认继承大盒子的宽度
当设置padding时 如果padding*2 < 继承获得的宽度 那么小盒子的宽度将会显示为继承的宽度，反之则会显示为padding设置的宽度
解决padding会撑大盒子的问题
盒子模型分为两种：谷歌盒子模型 以及 IE盒子模型
谷歌盒子模型：
盒子最终的宽高=盒子自身的宽高+padding+border
IE盒子模型：
盒子最终的宽高=盒子设置的宽高 padding和border系统自动减去
box-sizing:content-box(谷歌盒子模型)/border-box(IE盒子模型)
margin外边距
margin外边距分为四个方向
margin-left margin-right margin-top margin-bottom
margin连写
margin:四个值 上右下左
margin:三个值 上 左右 下
margin:两个值 上下 左右
margin:一个值 上下左右
margin的特殊值 auto 表示外间距自适应，把剩余空间分配给当前外边距空间，只针对横向外边距，上下外边距不生效。
margin:0 auto; 表示块级元素横向居中
margin合并边框
当边框重叠时 设置margin-方向: -px; 即可消除重复的边框
margin塌陷问题
当子元素设置 margin-top时会带着父元素一起下沉
解决方案：1.给父元素加上透明的上边框 transparent 表示透明色
2.块级格式化上下文（BFC）方式，清除异常效果。overflow:hidden
行内元素上下margin不生效
对行内元素设置margin时 设置top 和 bottom不生效