CSS中的盒子模型

css盒子模型：

每个元素在页面中都会生成一个矩形的盒子用来显示该元素，每个盒子都是由一下几个部分组成

1、内容，content：可用css属性：width、height

2、填充(内边距)，padding：可用css属性：padding、paddinf-top、paddinf-right、paddinf-bottom、paddinf-left

3、边框，border：可用css属性：border、border-style、border-width、border-color

4、外边距，margin：可用css属性：margin、margin-top、margin-right、margin-bottom、margin-left

默认情况下元素的宽度(width) 和高度(height)计算方式如下

width(宽度) + padding(内边距) + border(边框) = 元素实际宽度
height(高度) + padding(内边距) + border(边框) = 元素实际高度

这个计算方式时可以由我们手动通过box-sizing属性指定，该属性可能的值

content-box，默认值，
border-box，边框和内边距的值是包含在width内的
    内容区的实际宽度是width减去(border + padding)的值
    内容区的实际高度是height减去(border + padding)的值
    大多数情况下，这使得我们更容易地设定一个元素的宽高

元素是html中的概念，而盒子是css中的概念

块级元素和行级元素的说法在html5中已经废除，因为一个元素在页面中如何显示应该由CSS来控制，该说法将html元素和css盒子概念混为一谈了

css中的display属性用于设置盒子类型，该属性属于css范畴，用来规定html元素的显示方式

每个html元素都有一个浏览器默认的盒子类型

一个盒子一旦设置了浮动(float)属性，该盒子会强制转换为块级盒子，且即使手动将display设置为inline也不会生效

绝对定位(position:absolute)和固定定位(position:fixe)也会将盒子强制转换为块级盒子

常见和盒子类型：

none：盒子不显示，从盒子树中移除，包括其所有后代元素

block：盒子将设为块级盒子，独占一行

flex：弹性布局的块级盒子

grid：网格布局的块级盒子

table：表格布局的块级盒子

inline：盒子将设为行级(内联)盒子，不会独占一行

width、height属性不生效
border、padding和margin属性对自身生效，但对外时对同一行的内容生效，对不同行的内容(当内容过多产生换行)不生效
就是说当内容过多产生换行时会产生比较混乱的显示效果

inline-block：对外表现成内联盒子(不换行)，对内表现成块级盒子(具备width、height、padding、border和margin正确解释的特性)

inline-flex：对外表现成内联盒子，对子元素表现成弹性盒子

inline-grid：对外表现成内联盒子，对子元素表现成网格盒子

inline-table：对外表现成内联盒子，对子元素表现成表格盒子

contents：只影响其内容的样式生效，比如：字体大小、文字颜色等；但是像背景色、边框是不会生效的

list-item：将盒子显示为列表，li标签默认display属性为该值