1. display
定义：规定元素应该生成的框的类型。
-
常用属性值：
值 描述 none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。 compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 table-row 此元素会作为一个表格行显示（类似 <tr>）。 table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 table-column 此元素会作为一个单元格列显示（类似 <col>） table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） table-caption 此元素会作为一个表格标题显示（类似 <caption>） inherit 规定应该从父元素继承 display 属性的值。 -
display属性值inline、block和inline-block的区别：
block元素会独占一行，默认情况下，block元素宽度自动填满父级元素的宽度；
block元素可以设置width和height属性，即使设置了宽度，仍然独占一行；
block元素可以设置margin和padding属性；
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里面，其宽度随元素的内容而变化；
inline元素设置margin和padding属性无效；
inline元素的margin和padding属性在水平方向上能产生编剧效果，垂直方向不会产生边距效果；
inline-block：简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
-
display:inline-block元素显示间隙
消除标签之间空格的办法：
使用margin-left或margin-right取负值；
对父元素设置font-size为0，然后对font-size初始化；
对父元素设置letter-spacing（字符间距）为负值，然后设置元素的letter-spacing为0；
对父元素设置word-spacing（单词间距）为负值，然后设置元素的word-spacing为0；
-
display:table和本身的table区别
区别在于，display：table的css声明能够让一个html元素和它的子节点像table元素一样，使用基于表格的css布局，是我们能够轻松定义一个单元格的边界，背景等样式，而不会产生因为使用了table那样的制表标签导致的语义化问题。
现在逐渐淘汰了table系表格元素，是因为用div+css编写出来的文件比用table边写出来的文件小，而且table必须在页面完全加载后才显示，div则是逐行显示，table的嵌套性太多，没有div简洁，非表格内容用table来装，不符合标签语义化要求，不利于SEO。
-
设置float属性会更改display的值
不论是inline、inline-block还是block，在设置了float属性后display的值都变成了block。
设置元素浮动后，该元素的display值是 block。
浮动元素是 float 的计算值非 none 的元素。
由于float意味着使用块布局，它在某些情况下修改display 值的计算值
2. 盒子模型
在CSS3中引入了box-sizing属性，默认是box-sizing:content-box
box-sizing:content-box; 表示标准的盒子模型，宽度即为内容的宽度
box-sizing:border-box; 表示的是IE盒子模型，IE盒子的宽度为：左右border+左右padding+width
box-sizing:padding-box,这个属性值的宽度包含了左右padding+width（？）
inherit：继承父元素的box-sizing
标准盒模型（W3C盒模型）：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
IE盒模型：一个块的总宽度=width+margin（左右）（既width已经包含了padding和border值）
使用场景：若设置子元素的margin或border时可能撑破父元素的尺寸，就需要使用box-sizing:border-box将border包含进元素的尺寸中。
初学者一枚，如有问题欢迎指正~
