内容区

• width和height这两个属性可以指定盒子内容区的高度和宽度。
• width和height这两个属性是针对内容区而言，并不包括padding部分。

深入border

“border: 0”和“border: none”的区别：

• ①性能性：
  “border: 0”表示把border定义为0px。虽然0px看不见，但是浏览器依然会对border进行
  渲染，渲染之后，实际上是一个像素为“0”的border。也就是说“border: 0”需要占用内存。
  “border: none”表示把border定义为“none（无）”，浏览器解析“border: none”时并不会作
  做出渲染。也就是说“border: none”不需要占用内存。
• ②兼容差异：
  “border: 0”不存在兼容性问题
  “border: none”在IE6和IE7中不支持，不过它们都被抛弃了。
  
  

外边距叠加

• ①叠加的3种情况：同级元素、父子元素和空元素。
• ②注意事项：
        1、水平外边距永远不会叠加（margin-left/right）。
        2、外边距叠加针对的是block以及inline-block，不包括inline元素。因为inline元
     素的margin-top和margin-bottom设置无效。

负margin技术

• ①当元素的margin-top或者margin-left为负数时，“当前元素”会被拉向制定方向。
• ②当元素的margin-bottom或者margin-right为负数时，“后续元素”会被拉向指定方向。

overflow

• ①属性：visible(默认值)、hidden、scroll(显示滚动条)、auto(溢出出现滚动✔优选)
• ②使用“overfloat: hidden”来清除浮动：
        在父元素里面添加“overfloat: hidden”可以清楚子元素的浮动。

行内元素特点

• 行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果。
• 无法定义height、width。
• 可以定义margin-left和margin-right，无法定义margin-top、margin-bottom。

   行内块元素（inline-block） 特点：

• 可定义width、height。
• 可以与其他行内元素位于同一行。
• img、input就是常见的行内块元素。

display: none

• “display: none”不推荐用来隐藏一些对SEO关键的部分，因为对于搜索引擎来说，它会直
  接忽略“display: none”的内容。
  
  

“display: none”和“visibility: hidden”的区别

• “display: none”的元素被隐藏之后，不占据原来的位置。彻底消失了，看不见摸不着。
• “visibility: hidden”的元素被隐藏之后，依然占据着原来的位置。看不见，但摸得着。

display: table-cell

• 用“display:table-cell”和“vertical-align:middle”来实现大小不固定的图片的垂直居中效果：
  
        语法：

---

       父元素
       ｛
         display: table-cell;
         vertical-align: middle;
        ｝
        子元素｛vertical-align: middle;｝

---

  display: table-cell实现等高布局

---

    父元素div｛display: table-row;｝
    左子元素div(放img)｛display: table-cell;vertical-align: middle;｝
    右子元素div(放文字)｛display: table=cell;｝

          在自适应的等高布局中，左右两栏都不定义高度，而是由内容撑起来。

  自动平分划分元素

---

        父元素(ul)｛ display: table; ｝
        子元素(li)｛ display: table-cell;｝

---

去除inline-block元素间距

---

        父元素(ul)｛ font-size: 0; ｝

---