7. 网页布局方式 box-sizing

网页布局方式

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

  • 定位流

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

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

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

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

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

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

你可能感兴趣的:(7. 网页布局方式 box-sizing)