网页布局之标准流、浮动流和定位流
站长
· 阅读数 1
一、网页布局方式
浏览器对网页中的元素进行排版的三种方式：
- 标准流
- 浮动流
- 定位流
二、标准流
排版方式：
- 如果元素是块级元素，那么就会垂直排版
- 如果元素是行内元素或行内块级元素，那么就会水平排版
三、浮动流
3.1 什么是脱离文档流？什么是半脱离文档流？
脱离文档流
- 不再区分行内、块级、行内块级，无论是什么级的元素都可以水平排版
- 无论是什么级的元素都可以设置宽高
半脱离文档流
- 是因为浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置，跟标准流还是有一定的关系。如下图：因为box2不是浮动流，box3不会跑到第一行，还是在第二行。
3.2 什么是浮动流
- 一种半脱离标准流的排版方式
浮动元素脱标文档流意味着 1、当某一个元素浮动走之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标 2、如果前面一个元素浮动走了，而后面一个元素没有浮动，那么垂直方向的元素会自动填充，浮动元素重新归位后就会覆盖该元素
- 浮动流只有水平排版
- 只能设置某个元素左对齐或者右对齐，没有居中对齐，也就是没有center这个取值
- 一旦使用了浮动流，则margin:0 auto;失效
为什么说是半脱离标准流？
- 因为box2是标准流，box3依然在第二行，而不是跑到第一行
3.3 浮动元素的贴靠问题
贴靠准则：
- 同一个方向上谁先浮动，谁在前面
- 不同方向上左浮动找左浮动，右浮动找右浮动
注意点： 当父元素的宽度足够显示所有元素时，浮动的元素就会并列显示；当父元素的宽度不足够显示所有元素时，浮动的元素就贴前一个元素；如果还不够，就会再贴前一个元素 直到贴到父元素左边，此时无论是否宽度足够都会在这一行显示了；具体如下图所示：
3.4 浮动元素的字围现象
- 没有浮动文字、图片、超链接等元素会给浮动的元素让位置，并围绕在浮动元素的周围
- 只要是行内块级元素，都会有字围效果
3.5 浮动元素的高度塌陷问题
- 在标准流中,内容的高度可以撑起父元素的高度
- 在浮动流中,浮动的元素是不可以撑起父元素的高度的，当子元素都浮动起来后，父亲的内容高度即height变为0，父元素就好像塌陷了一样，因而又称为父级塌陷
3.6 清除浮动
没有清除浮动前：
清除浮动后：
方式一：给父元素设置height 方式二：clear : none | left | right | both 注意：
- clear这个属性必须设置在块级、并且不浮动的元素中
- 元素是从上到下、从左到右依次加载的。在右侧元素还没有加载到时，clear：right是无用的
- 当我们给某个元素添加clear属性之后，那么这个元素的margin-top属性可能会失效，因而也不推荐直接用clear
使用方法：
第一个盒子为header， 第二个盒子是content
- 隔墙法之外墙法
操作方法：
- 在两个盒子中间添加一个额外的块级元素
- 给这个额外添加的块级元素设置clear：both；属性
注意：
- 外墙法它可以让第二个盒子使用margin-top属性
- 外墙法不可以让第一个盒子使用margin-bottom属性，所以我们通常用墙的高度作margin的替代品
- 隔墙法之内墙法
操作方法：
- 在第一个盒子中所有子元素最后添加一个额外的块级元素
- 给这个额外添加的块级元素设置clear：both；属性
注意：
- 内墙法它可以让第二个盒子使用margin-top属性
- 内墙法可以让第一个盒子使用margin-bottom属性
- 使用伪元素
本质原理与内墙法一样，但我们用的css的伪元素选择器实现的，就应该用css来控制样式
方式三：给header加上overflow: hidden 方式四：给header加上border
四、定位流
4.1 相对定位
相对定位就是相对于自己以前在标准流中的位置来移动
注意点
- 在相对定位中同一个方向上的定位属性只能使用一个
- top/bottom 只能用一个
- left/right 只能用一个
- 相对定位是不脱离标准流的，会继续在标准流中占用一份空间
- 不脱离标准流的影响：
- 区分块级、行内、行内块级元素的
- 给相对定位的元素设置margin/padding等属性时会影响到标准流的布局
4.2 绝对定位
相对于body或者某个定位流中的祖先元素来定位
注意点
- 相对的定位流中不包括静态定位
- 绝对定位的元素是脱离标准流的,所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
- 相对body定位时，会随着页面的滚动而滚动，不像position: fixed
- 一个绝对定位的元素会忽略祖先元素的padding
- 当一个盒子绝对定位之后不能使用margin: 0 auto;让盒子自身居中
4.3 固定定位
就是相对浏览器窗口定位
注意点
- 不随着滚动条的滚动而滚动
- 固定定位的元素是脱离标准流的，不会占用标准流中的空间，所以不区分行内、块级、行内块级
4.4 静态定位
默认情况下标准流中的元素position属性就等于static, 所以静态定位其实就是默认的标准流
4.5 z-index
- 默认的z-index值是0
- index值一样，那么谁写在HTML后面，谁在上面能压住别人
- 定位了的元素，永远能够压住没有定位的元素
- 从父现象
从父现象：父元素没有z-index值, 那么子元素谁的z-index大谁盖住谁；父元素z-index值不一样, 那么父元素谁的z-index大谁盖住谁