CSS学习笔记（七）网页布局方式

一、网页布局方式

1、网页布局方式：指浏览器如何对网页的元素进行排版。

2、排版方式
（1）标准流（文档流/普通流）
A、浏览器默认的排版方式
B、在CSS中，将元素分为三类：块级/行内/行内块级
C、两种排版方式：
垂直排版：块级元素；水平排版：行内/行内块级元素
（2）浮动流：float: left/right;（与父元素的最左/右对齐）
A、浮动流是一个“半脱离标准流”的排版方式
B、浮动流只有一种排版方式，即水平排版，只能设置某个元素左/右对齐
C、浮动流没有居中对齐，在浮动流中是不可用margin: 0 auto;的
D、特点：浮动流是不区分块级/行内/行内块级元素的，即无论什么元素都可水平排版；在浮动流中无论什么元素都可以设置宽高

二、浮动元素

1、浮动元素脱标：脱离标准流
（1）当一个元素浮动之后，那么这个元素就像是从标准流里删除了一样。
（2）影响：如果前面一个元素浮动了，而后面一个元素没有浮动，那么此时前面的一个元素就会盖住后面的一个元素。

2、浮动元素排列规则
（1）相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面。
（2）不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动。
（3）浮动元素俍之后的位置，由浮动元素浮动之前在标准流的位置来确定。

3、浮动元素贴靠现象
（1）当父元素的宽度足够放下所有浮动元素时，就会并列显示；当父元素的宽度不足够放下所有浮动元素时，就会从最后一个浮动元素往前贴。

4、浮动元素字围现象
（1）当图为浮动元素时，文字会给浮动元素让位置。用于图文混排。

5、浮动元素高度问题
（1）在标准流中，内容的高度可以撑起父元素的高度。
（2）在浮动流中，内容的高度不可以撑起父元素的高度。

三、清除浮动

1、方式一：给前面一个父元素设置高度（注：在企业开发中，能不写高度就不写，所以这种方式少用）

2、方式二：给后面地盒子添加clear属性
（1）取值：

none: 默认取值，按浮动元素地排序规则来排序（左浮动找左浮动，右浮动找右浮动）
left: 不要找前面地左浮动元素
right: 不要找前面地右浮动元素
both: 不要找前面地左和右浮动元素

（2）注意：当我们给某个元素添加clear属性之后，那么这个属性地margin属性就会失效。

3、方式三：隔墙法
（1）外墙法：在两个盒子之间添加一个额外地块级元素，给这个额外地块级元素设置clear: both;属性
注：外墙法可以让第二个盒子使用margin-top属性；
外墙法不可以让第一个盒子使用margin-bottom属性。
（2）内墙法：在第一个盒子地所有子元素最后添加一个额外地块级元素，给这个额外添加地块级元素设置clear: both;属性
注：内墙法可以让第二个盒子使用margin-top属性；
内墙法可以让第一个盒子使用margin-bottom属性。
（3）区别：外墙法不能称起第一个盒子地高度，而内墙法可以撑起第一个盒子的高度。
注：企业开发中不常用隔墙法来清除浮动。

4、方式四：利用伪元素选择器（最推荐使用），伪元素选择器在IE6中不兼容，需添加以下代码来兼容

.box1{
	*zoom: 1;
}

5、方式五：overflow: hidden;（推荐使用）
（1）作用：可以将超出范围的内容剪裁掉；清除浮动
（2）在IE6中不兼容，需添加以下代码来兼容

.box1{
	*zoom: 1;
}

（3）可以通过overflow: hidden;让里面的盒子设置margin-top之后，外面的盒子不被顶下来

四、伪元素选择器

1、伪元素选择器：给指定标签的内容前面/后面添加一个子元素。

2、格式：
（1）给指定标签的内容前面添加一个子元素

::before{
	属性名称: 值;
}

（2）给指定标签的内容后面添加一个子元素

::after{
	属性名称: 值;
}

（3）指定添加子元素中存储的内容：content: "嘿";
（4）隐藏添加的子元素：visibility: hidden;

3、a标签伪类选择器：专门用来修改a标签的不同状态的样式
（1）格式：
“：link”：默认状态，从未被访问过
“：visited”：被访问过的状态
“：active”：鼠标长按的状态
“：hover”：鼠标悬停在a标签上的状态
（2）a标签伪类选择器的属性可以单独出现，也可以一起出现；若一起出现，则有严格要求，link>visit>hover>active
（3）企业开发中，编写a标签的伪类选择器最好写在标签选择器后面
（4）企业开发中和a标签盒子相关的属性都写在标签选择器中（显示模式/宽/高/padding/margin）
（5）企业开发中和a标签文字/背景相关的都写在伪类选择器中