09. CSS网页布局

一、网页布局方式

1、什么是网页布局方式？

布局就是排版的意思
布局方式指的是浏览器这款工具是如何对网页中国的元素进行排版的

2、网页布局/排版的三种方式

- 标准流
- 浮动流
- 定位流

二、标准流

标准流的排版方式，又称为：文档流/普通流，
指的就是元素排版布局的过程中，元素会自动从左往右，从上往下的流式排列。
#1、浏览器默认的排版方式就是标准流排版方式

#2、在CSS中将元素分为三类：
	- 块级
    - 行内
    - 行内块级
#3、在标准流中有两种排版方式，一种是垂直排版，一种是水平排版
	- 垂直排版，如果元素是块级元素，那么会垂直排版
    - 水平排版，如果元素是行内元素或者行内块级元素，那么就会水平排版

三、浮动流

1、浮动流是一种半脱离标准版的排版方式

1.1 什么是脱离文档流？

# 1、浮动元素脱离文档流意味着：
	① 不在区分行内。块级。行内块级，无论是什么级的元素都可以水平排版
	② 无论是什么级的元素都可以设置宽高
	综上所述，浮动流中的元素和标准里中的行内块级元素很像

# 2、浮动元素脱标文档流意味着：
	① 当一个元素浮动走了以后，这个元素看上去就像是从标准流中删除了一样，这个就是浮动元素的脱标
    ② 如果前面一个元素浮动走了，后一个元素没有浮动，那么垂直方向的元素会自动填充，浮动元素重新归位后就会覆盖该元素
    
# 注意点：
	1、浮动流只有一种排版方式，就是水平排版，他只能设置某个元素左对齐或者右对齐，没有居中对齐，也就是没有center这个取值
    2、一旦使用了浮动流，则margin:0 auto; 就会失效
        
# 让两个元素显示到一行，有两种实现方式，一种是修改元素的显示方式为inline-block，另一种就是浮动的方式

1.2 什么是半脱离文档流？

# 脱离分为：半脱离与完全脱离
- 其中完全脱离指的是元素原先是在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样
- 而之所以称为半脱离：是因为浮动元素之后的位置取决于它在浮动之前的标准流中的位置，跟标准流还是有一定的关系
（比如说浮动的元素在浮动之前处于标准流的第二行，那么他浮动之后也是处于浮动流的第二行，不会去找其他行的浮动元素去贴靠）
打一个比方就是：浮动流就是在标准流上面覆盖的一层透明薄膜，元素浮动之后就会被从标准流中扔到浮动流这个薄膜上，他在这个薄膜上的位置还是以前在标准流的位置上找同方向的浮动元素进行贴靠，贴靠的准则就是：
# （1）同一个方向上谁先浮动，谁在前面，
# （2）不同方向上左浮动找左浮动，右浮动找右浮动

2、 浮动元素贴靠问题

当父元素的宽度足够显示所有的元素时，浮动的元素就会并列显示
当父元素的宽度不足显示所有的元素时，浮动的元素就贴近前一个元素如果还不够，就会再贴前一个元素，直到贴到父元素左边，此时无论是否宽度足够都会在这一行显示了

3、 浮动元素字围现象

 没有浮动的文字、图片、超链接等元素会该浮动的元素让位置，并围绕在浮动元素的周围
    - 利用这一特性，可以做到图文混排
    - 只要是行内块级元素，都会有字围效果

4、 浮动流排版

# 注意：在企业开发中，如何对网页进行布局
1、垂直方向的布局用标准流布局，水平方向用浮动流布局
2、从上至下布局
3、从外向内布局
4、水平方向可以先规划分为一左一右再对左边/右边进行布局

水平方向的块级元素的宽默认是父元素的100%，

而垂直方向如果想让子元素的高是父元素的100%，则必须先设置父元素的高为100%

5、浮动元素高度问题（父级塌陷）

#1、在标准流中，内容的高度可以撑起父元素的高度
#2、在浮动流中，浮动的元素是撑不起来父元素的高度的，而子元素都浮动起来以后，父级的内容高度(即height)就会变成0，就像塌陷了一样

6、清除浮动

6.1 方式一：设置高度防止塌陷

为浮动的那些子元素的父级设置一个高度
（不推荐使用，因为在企业开发中，这样限定高度会使得页面操作不灵活）

6.2 方式二：clear

clear: none| left | right | both
(clear这个属性必须设置在块级并且不浮动的元素中)
    # （1）取值
    	- none ：默认值，允许两边都可以有浮动对象
        - left ：不允许左边有浮动对象
        - right ：不允许右边有浮动对象
        - both ：不允许两边有浮动对象
    # （2）把握住两点：
     ① 元素是从上到下、从左到右一次加载的
     ② clear:left; 对自身起作用，而不会影响其他因素
        一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题
    # 注意：
    	1、元素是从从上往下、从左往右依次加载的，在右侧元素还没有加载到时，clear:right是无用的
     	2、这种方式的弊端是：当我们给某个元素添加clear属性之后，那么这个属性的margin-top属性可能会失效，所以也不推荐直接使用

6.3 方式三：隔墙法

隔墙法
1、外墙法
	① 在两个盒子中间添加一个额外的块级元素
    ② 给这个额外添加的块级元素设置clear: both;属性
        注意：
        - 外墙法他可以让第二个盒子使用margin-top属性
        - 外墙法不可以让第一个盒子使用margin-bottom属性，所以我们通常用墙的高度代替margin
        （在企业开发中可以为墙添加一个类h20，然后设置h20的高度为20实现外间距，搜狐网站大量使用了外墙法）

2、内墙法
	① 在第一个盒子中所有子元素最后添加一个额外的块级元素
    ② 给这个额外添加的块级元素设置clear: both;属性
        注意：内墙法他可以让第二个盒子使用margin-top属性
        内墙法也可以让第一个盒子使用margin-bottom属性
        
        （内墙法也可以为墙添加一个类h20，然后为h20的高度实现外间距）
        
3、内墙法与外墙法的区别？
	① 外墙法不可以撑起第一个盒子的高度，因为添加了一个无用的墙
    ② 在企业开发中清除浮动，内墙法与外墙法都不常用，因为添加一个无用的墙
    在前端开发中推崇结构与样式分离，二隔墙法需要添加大量的没有意义的空标签div  

6.4 方式四：CSS伪元素法

本质原理与内墙法一样，但是我们是用的CSS的伪元素选择器实现的，就应该用CSS来控制样式，符合前段开发思想   

详细语法：

.header:after {                       <----在类名为“clearfix”的元素内最后面加入内容；
           content: ".";              <----内容为“.”就是一个英文的句号而已。也可以不写。
           display: block;            <----加入的这个元素转换为块级元素。
           clear: both;               <----清除左右两边浮动。
           visibility: hidden;        <----可见度设为隐藏。注意它和display:none;是有区别的。											visibility:hidden;仍然占据空间，只是看不到而已；
           line-height: 0;            <----行高为0；
           height: 0;                 <----高度为0；
           font-size:0;               <----字体大小为0；
           }

.header {*zoom: 1;} 				  <----兼容ie6,否则伪类选择器只能在谷歌浏览器中生效，其余没用

详解：

整段代码就相当于在浮动元素后面跟了个宽高为0 的div，然后设定它clear:both 来达到清除浮动的效果，
    之所以用它，是因为，你不必在HTML文件中写入大量无意义的空标签，又能清除浮动
清除浮动的是下面这三句：
content: ".";
display: block;
clear: both;

新浪首页清除浮动的方法，也是采用伪元素
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;

通用写法：

        .clearfix {
            *zoom: 1
        }

        .clearfix:before, .clearfix:after {
            content: " ";
            display: table;
        }

        .clearfix:after {
            clear: both
        }

before的作用是子元素设置margin-top父元素不会一起被顶下来

after的作用是清除浮动

6.5 方式五：overflow:hidden

overflow:hidden 除了清除浮动还有别的用途：
    - 1、可以将超出标签范围的内容裁减掉
    - 2、清除浮动
    - 3、通过overflow:hidden，让里面的盒子设置margin-top属性后，外面的盒子不被顶下来，这样就不用为外面的盒子添加边框了

四、定位流

1、相对定位就是相对于自己以前在标准流中的位置来移动

# 格式：
	position: relative
        
# 需要配合以下四个属性一起使用
	top: 20px;
    left: 30px;
    bottom: 20px;
        right: 25px;

1.1 相对定位的注意点

#1、在相对定位中同一个方向上的定位属性只能使用一个
	top/bottom 、left/right  都各只能用一个
#2、相对定位是不脱离标准流的，
	- 元素会继续在标准中占用一份空间
	- 在相对定位中是区分块级、行内、行内块级元素的
    - 当给相对定位的元素位置设置margin/padding等属性时，会影响到标准流的布局，
      即：给相对定位的标签设置margin或者padding，是以该标签原来的位置为基础来进行偏移的

1.2 相对定位的应用场景

# 1、用于对元素进行微调
# 2、配合绝对定位来使用

2、绝对定位就是相对于body或者某个定位流中的祖先元素来定位

2.1 决定定位的参考点

#1、默认情况下，所有的绝对定位的元素，无论有无祖先元素，都会以body作为参考点
#2、如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素作为那个参考点
	① 只要是这个绝对定位元素的祖先元素都可以
    ② 祖先必须是定位流，此处的定位流指的是绝对定位、相对定位、固定定位（只有静态定位不行）
    ③ 如果一个绝对定位的元素有祖先元素而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素就会以离它最近的那个定位流的祖先元素作为参考点

2.2 绝对定位的注意点

#1、绝对定位的元素是脱离标准流的，所以绝对定位的元素是不区分块级元素/行内元素/行内块级元素的
#2、如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点的，而不是以整个网页的宽度作为参考点，会相对于body定位会随着页面的滚动而滚动
#3、一个绝对定位的元素会忽略祖先元素的padding

2.3 绝对定位水平居中

#1、注意：当一个盒子绝对定位之后不能使用margin: 0 auto;让盒子自身居中
#2、如果想让一个绝对定位的盒子自身居中，可以使用
	left: 50%;
    margin-left:-元素宽度一半px;

2.4 绝对定位的应用场景

#1、用于对元素进行微调
#2、配合相对定位来使用
企业开发中一般相对定位和绝对定位都是一起出现, 很少单独使用===>"子绝父相"

3、固定定位

#1、固定定位（和绝对定位高度相似，和背景的关联方式也高度相似）
固定定位可以让某一个元素不随着滚动条的滚动而滚动
类似于：背景的关联方式background-attachment: fixed;可以让图片不随着滚动条的滚动而滚动
    
#2、注意点：
	1、固定定位，就是相对于浏览器窗口定位。页面如何滚动，这个盒子的显示位置不会发生变化
    2、固定定位的元素是脱离标准流的，不会占用标准中的空间
    3、固定定位不区分行内、块级、行内块级
    4、E6不支持股固定定位

固定定位的应用场景：

- 网页对联广告
- 网页头部通栏（穿透效果）

4、静态定位

默认情况下标准流中的元素position属性就是属于static，所以静态定位其实就是默认的标准流

5、z-index

#1、z-index属性：用于指定定位的元素的覆盖关系
	- 1.1 z-index值表示谁压着谁，数值大的覆盖住数值小的
    - 1.2 只有定位了的元素，才有z-index值，
    	也就是说不管相对定位、绝对定位、固定定位，都可以使用z-index值，而浮动的元素不能用
    - 1.3 z-index值没有单位，就是一个正整数，默认的z-index值为0
    - 1.4 如果大家都没有z-index值（默认都为0），或者z-index值都一样，那么谁写在HTML后面，谁就能覆盖住别人，定位了的元素，永远可以覆盖没有定位的元素

#2、注意点：从父现象
	- 父元素没有z-index值，那么子元素z-index值大的在最上面（不被覆盖）
    - 父元素的z-index值不一样大的，谁父元素大就谁在上面覆盖住别人