什么是网页的布局方式?
网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的
标准流(文档流/普通流)排版方式
- 其实浏览器默认的排版方式就是标准流的排版方式
- 在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素
- 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
垂直排版, 如果元素是块级元素, 那么就会垂直排版
水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版
浮动流排版方式
- 浮动流是一种"半脱离标准流"的排版方式
- 浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐
注意点:
- 浮动流中没有居中对齐, 也就是没有center这个取值
- 在浮动流中是不可以使用margin: 0 auto;
特点:
- 在浮动流中是不区分块级元素/行内元素/行内块级元素的
无论是级元素/行内元素/行内块级元素都可以水平排版 - 在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
- 综上所述, 浮动流中的元素和标准流中的行内块级元素很像
什么是浮动元素的脱标?
脱标: 脱离标准流
当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标
浮动元素脱标之后会有什么影响?
如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素
什么是浮动元素贴靠现象?
- 如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
- 如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠
- 如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边
什么是浮动元素字围现象?
浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象
企业开发中什么时候使用标准流什么时候使用浮动流?
垂直方向使用标准流, 水平方向使用浮动流
拿到一个很复杂的界面如何入手?
- 从上至下布局
- 从外向内布局
- 水平方向可以先划分为一左一右再对左边或者右边进行进一步布局
浮动元素的高度问题
- 在标准流中内容的高度可以撑起父元素的高度
- 在浮动流中浮动的元素是不可以撑起父元素的高度的
清除浮动的第一种方式
给前面一个父元素设置高度
注意点:
在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少
清除浮动的第二种方式
给后面的盒子添加clear属性
clear属性取值:
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素
注意点:
当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效
清除浮动的第三种方式
隔墙法
外墙法
- 在两个盒子中间添加一个额外的块级元素
- 给这个额外添加的块级元素设置clear: both;属性
注意点
外墙法它可以让第二个盒子使用margin-top属性
外墙法不可以让第一个盒子使用margin-bottom属性
内墙法
- 在第一个盒子中所有子元素最后添加一个额外的块级元素
- 给这个额外添加的块级元素设置clear: both;属性
注意点:
内墙法它可以让第二个盒子使用margin-top属性
内墙法它可以让第一个盒子使用margin-bottom属性
外墙法和内墙法区别
外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度
在企业开发中不常用隔墙法来清除浮动
清除浮动的第四种方式（推荐）
利用伪元素选择器清除浮动
本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样
注意点:
IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性
.box1::after
{
/*设置添加的子元素的内容为空*/
content: "";
/*设置添加的子元素为块级元素*/
display: block;
/*设置添加的子元素的高度为0*/
height: 0;
/*设置添加的子元素看不见*/
visibility: hidden;
/*给添加的子元素设置clear: both;*/
clear: both;
}
.box1
{
/*兼容IE6*/
*zoom:1;
}
清除浮动的第五种方式（推荐）
overflow: hidden;
作用：
- 可以将超出标签范围的内容裁剪掉
- 清除浮动，放到前面的box上
- 可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来
注意点
- 类似于内墙法
- 在ie6中无效，需要加入为了兼容IE6必须给前面的盒子添加*zoom:1;属性
加油
