7. 网页布局方式 box-sizing

网页布局方式

• 网页布局方式其实是指浏览器是如何对网页中的元素进行排版的

• 定位流

• 标准流(文档流/普通流)排版方式(默认)

  • 在css中标签分为三类 块级 行内 行内块级
  • 在标准流中有2种排版方式: 垂直排版/ 水平排版
    • 垂直排版: 如果元素是块级元素 那么就会垂直排版
    • 水平排版 如果元素是行内元素/ 行内块级 那么就水平排版

• 浮动流排版方式

  1. 浮动流是一种半脱离标准流的排版方式
  2. 浮动流只是一种排版方式 float:left或float:right 没有居中设置
  3. 因此在浮动流中设置margin:0 auto;无效.
  • 特点:
    • 在浮动流中不区分块级元素/ 行内元素 / 行内块级
    • 无论是块级元素/ 行内元素/ 行内块级 都可以水平排版 并且可以设置宽高
    • 综上所述, 浮动流中的元素和标准流中的行内块级元素很像
  4. 浮动元素脱标
  • 什么是浮动元素脱标?
    • 脱标: 脱离标准流
    • 当某一元素浮动之后, 这个元素看上去就是从标准流中删除了一样, 这个就是浮动元素脱标
  • 浮动元素脱标后的影响?
    • 若前面的一个元素浮动了, 而后面的一个元素没有浮动, 那么前面的一个元素会盖住后面的元素
  5. 浮动元素的排序规则
  • 相同方向的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
  • 不同方向上的浮动元素, 左浮动靠左浮动, 右浮动靠右浮动
  • 浮动元素在标准流中的位置决定它在浮动流中的位置
  6. 浮动元素的贴靠现象
  • 如果父元素的宽度能够显示所有的浮动元素, 那么浮动的元素会并排显示
  • 如果父元素的宽度不能显示所有的浮动元素, 那么会从最后一个元素开始往前贴靠, 知道贴靠到父元素的左边或右边

box-sizing属性(CSS3新增属性)

• box-sizing：content-box(默认值) | border-box

   //标准模式下的盒模型是content-box
   Element 宽高 = 内容的宽高 (width | height)+ padding + border
   //怪异模式IE浏览器的盒模型是border-box
   Element 宽高 = 内容的宽高 (width | height+ padding + border)