网页布局方式
网页布局方式其实是指浏览器是如何对网页中的元素进行排版的
定位流
-
标准流(文档流/普通流)排版方式(默认)
- 在css中标签分为三类 块级 行内 行内块级
- 在标准流中有2种排版方式: 垂直排版/ 水平排版
- 垂直排版: 如果元素是块级元素 那么就会垂直排版
- 水平排版 如果元素是行内元素/ 行内块级 那么就水平排版
-
浮动流排版方式
- 浮动流是一种半脱离标准流的排版方式
- 浮动流只是一种排版方式
float:left或float:right没有居中设置 - 因此在浮动流中设置
margin:0 auto;无效.
- 特点:
- 在浮动流中不区分块级元素/ 行内元素 / 行内块级
- 无论是块级元素/ 行内元素/ 行内块级 都可以水平排版 并且可以设置宽高
- 综上所述, 浮动流中的元素和标准流中的行内块级元素很像
- 浮动元素脱标
- 什么是浮动元素脱标?
- 脱标: 脱离标准流
- 当某一元素浮动之后, 这个元素看上去就是从标准流中删除了一样, 这个就是浮动元素脱标
- 浮动元素脱标后的影响?
- 若前面的一个元素浮动了, 而后面的一个元素没有浮动, 那么前面的一个元素会盖住后面的元素
- 浮动元素的排序规则
- 相同方向的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
- 不同方向上的浮动元素, 左浮动靠左浮动, 右浮动靠右浮动
- 浮动元素在标准流中的位置决定它在浮动流中的位置
- 浮动元素的贴靠现象
- 如果父元素的宽度能够显示所有的浮动元素, 那么浮动的元素会并排显示
- 如果父元素的宽度不能显示所有的浮动元素, 那么会从最后一个元素开始往前贴靠, 知道贴靠到父元素的左边或右边
box-sizing属性(CSS3新增属性)
-
box-sizing：content-box(默认值) | border-box//标准模式下的盒模型是content-box Element 宽高 = 内容的宽高 (width | height)+ padding + border //怪异模式IE浏览器的盒模型是border-box Element 宽高 = 内容的宽高 (width | height+ padding + border)
