【原创】布局

网页布局原则

先水平再垂直

浮动

• 浮动的元素不占空间
• 清除浮动 clear:both，或者父元素overflow:hidden
• 任何元素一旦浮动，均可以设置宽高，并且不会独占一行（例如 span）

如果父类中的子元素都浮动，则父元素无宽高。

清除浮动的常用方式：

• 给父类设置宽高
• 父类设置：overflow:hidden
• 结尾处设置空 div 标签，并设置 clear:both，或者在下一个元素上添加 clear:both

定位属性

相对定位

以当前为参照物移动指定的距离。被定位的元素会占据原有物理位置。

绝对定位

不占用原有物理位置。

• 如果最外层元素是非 static 定位的元素，那么该非 static 定位的元素为这个元素的参考点。
• 如果元素的外层元素没有设置任何非 static 定位的值，那么该元素将寻找距离自己最近的其他设置过 position 的外层元素作为参照物
• 如果元素的外层元素没有任何元素采用 position 定位，那么此时参考元素为 body。

固定定位

z-index

设置显示顺序，z-index 属性只支持定位元素。

display 属性

根据 CSS 规范的规定，每个元素都有一个 display 属性，用于确定该元素的类型，例如 div 元素的 display 属性的值为 block，span 元素的 display 值为 inline。

常见属性值

• none 隐藏元素
• block
• inline
• inline-block：既有宽高属性，又不会独占一行
• table-cell
• flex
  

  display:none 和 visibility:hidden 都可以隐藏元素，区别是 display:none 完全隐藏，不占位，而 visibility:hidden 隐藏但占用原有位置。

盒子模型

实现块状元素居中

margin:0 auto

外边距合并

上下合并

上面元素：margin-bottom:50px;
下面元素：margin-top:10px;
他们之间距离会合并，间距还是取更大的值，50px。

包含合并

子 margin-top:20px;
父子会同时距离上边 20px
解决方式：给父元素加个 border

浮动元素的外边距不会合并。

外边距简写

• margin:value 四个方向距离相同
• margin:val1(上下) val2(左右)
• margin:val1(上下) val2(左右)
• margin:val1(上) val2(左右) val3(下)
• margin:val1(上) val2(左右) val3(下) val4(左)

内边距

padding 的宽高要记录在盒子模型的宽高之内，border 也一样，margin 不算在宽高之内。

border 默认与浏览器会有几个像素的边距，通常解决方式：

body,
img,
ul {
  padding: 0;
  margin: 0;
}

怪异盒模型

IE 的盒子模型也被称为怪异盒模型。
box-sizing 允许以 W3C 模型（content-box） 或 IE 盒模型（border-box）来定义元素。