####一、网页布局
网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的
1. 标准流(文档流/普通流)排版方式
- 其实浏览器默认的排版方式就是标准流的排版方式
- 在CSS中将元素分为三类,分别是块级元素/行内元素/行内块级元素
- 在标准流中有两种排版方式,一种是垂直排版,一种是水平排版.如果是块级元素就是垂直排版,如果是行内块级或者是行内元素时就是水平排版
- 标准流中内容的高度可以撑起父元素的高度
2. 浮动流排版方式
- 浮动流是一种"半脱离标准流"的排版方式
- 浮动流只有一种排版方式,就是水平排版,只能设置某个元素的左对齐或右对齐
- 浮动流不区分块级,行内块级和行内元素,都可以设置宽高
- 浮动元素的脱标:
当某个元素浮动的时候,这个元素看上去就像是从标准流中删除了一样.如果前面一个元素浮动了,后面一个元素没有浮动,那么前面浮动元素就会盖住后面的标准流元素 - 浮动元素排序规则:
- 相同方向上的浮动元素,先浮动的元素会显示在前面,后浮动的元素会显示在后面
- 不同方向上的元素,左浮动找左浮动,右浮动找右浮
- 浮动元素浮动之后的位置取决于它之前在标准流中的位置
- 浮动元素的贴靠现象:
如果父元素的宽度不够,浮动元素会自动贴靠上上一个浮动元素,如果仍然不够,便会贴靠最外层父元素,这时不管够不够都显示 - 浮动元素的自围现象(图文混排):
浮动元素不会覆盖标准流中的文字,文字会自动包裹浮动元素 - 浮动元素不能撑起父元素的高度
注意:
- 浮动流中没有居中对齐,float没有center这个取值
- 在浮动流中不能使用margin:0 auto;
3. 清除浮动
- 给盒子添加一个高度,但是在企业开发中不常用,能不设置高度就不设置高度
-
clear:both
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素
注意:当给某个元素添加clear属性后,那么这个属性的margin属性就会失效 - 隔墙法(在企业开发中不常用)
- 外墙法:两个盒子之间添加一个额外的块级元素,给他设置clear:both属性
注意:外墙法可以让第二个盒子使用margin:top但是不能使用第一个盒子的margin:buttom,所以我们哪个都不用,我们直接设置墙的高度以达到margin效果 - 内墙法:在第一个盒子最后设置一个块级元素,给他设置一个clear:both属性.
区别:外墙法不能撑起第一个盒子的高度而内墙法可以撑起
- 伪元素选择器(推荐使用)
名称::before{ 属性名称:值; }:给指定标签的内容前面添加一个子元素
名称::after{ 属性名称:值; }:给指定标签的内容后面添加一个子元素
visibility:hidden可以将添加的子元素隐藏
清除浮动代码:
名称::after{
content:"";
height:0;
display:block;
clear:both;
visibility:hidden;
}
名称{
*zoom:1;/*兼容IE6*/
}
- 利用overflow:hidden清除浮动(推荐使用)
overflow:hidden:超标标签的内容裁剪掉,还可以用来清除浮动,在第一个标签中添加overflow:hidden,但是还得加上*zoom:1;以保持IE6的兼容
两个盒子嵌套时,里面的盒子设置margin-top时会把大盒子也顶下来(margin塌陷),这时除了可以设置大盒子的边框外,还可以在大盒子中添加overflow:hidden;即可解决
