【CSS学习记录-4】：布局

概述

        HTML中的标签可以视为一个一个的盒子，我们需要通过CSS给出盒子的样式，并对盒子进行布局达到美化效果。CSS对盒子的布局方式主要有三种：分别是标准流、浮动流、以及定位。下面我们将对三种布局方式进行阐述。

一、标准流

1，元素模式      

        标准流就是HTML默认的布局方式，对于HTML中的标签，我们可以分为三类元素模式标签，针对这三类标签，分别有着相对应的布局方式。

元素模式	常见标签	元素排列	默认宽度	宽度、高度、内外边距设置	包含内容
块级元素	<h>，<p>，<div>，<ul>，<ol>，<li>	块级元素独占一行	与上级相同	可以设置	都可以
行级元素	<a>，<span>，<strong><em>，<i>	一行可以放置多个行级元素	内容的宽度	不可以设置	只可放置行元素
行内块元素	<img>，<input>，<td>	一行可以放置多个行内块元素	-	可以设置	-

2，元素模式的转换      

        同时对于块级、行级、行内块元素可以通过CSS进行转换，使其具有某种元素相应的特性。转换代码：

display：block/inline/inline-block

二、浮动流

1，为什么需要浮动流

        ① 行内块盒子布局时，中间有间隙，不太好控制

        ② 无法实现左右对齐

2，常见布局方式：

        （1）纵向/父元素浮动流布局（margin:0 auto居中），横向/子元素标准流布局。

3，浮动流布局：

        （1）浮动流布局代码：

{float: none/left/right}

        （2）浮动流布局：浮动框边缘紧挨着浮动框边缘，就是下一级（left/right）浮动会紧贴上一级（left/right）浮动

        （3）浮动流特点：

                ① 浮动元素具有块级元素特点，即可以设置宽高边界的盒子模型。（浮动行元素无需再转为块元素）

                ② 脱标：浮动盒子会脱离标准流，不再保留原有标准流的位。可以理解为浮动流、标准流属于不同维度，所以浮动流、标准流盒子可能会重叠。

                ③ 浮动流脱标只能压住盒子，但是压不住标准流里的文字，因为浮动最开始就是用于文字环绕的

                ④ 显示方式：逐行排列，上沿对齐。浮动流排列时会一行一行的贴着排列，当某一行排满时，进入下一行且上沿与上一行下沿对齐。

                ④ 一浮全浮，否则会覆盖：浮动盒子只会影响后边的标准流，不会影响前边的标准流

4，清除浮动

        （1）为什么要清除浮动：

                ① 父盒子不方便给高度，而浮动子盒子又不占有位置，无法撑开父盒子，此时会影响父盒子的布局。

                ② 清除浮动就是清除浮动脱标带来的影响

        （2）清除浮动方法：

                ① 额外标签法：不常用，在每行最后位置增加一个空标签，且style = {clear:both}

                ② 父级标签使用overflow：父元素{overflow：hidden}，但是会出现溢出隐藏/切割问题。

                ③ :after伪元素法：额外标签法的升级版，在后边增加一个盒子

//直接复制以下即可
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

//为了兼容IE6、7
.clearfix{
    *zoom:1 ;
}

        ④ 双伪元素清除浮动：前后均增加一个盒子

//直接复制即可
.clearfix:before,.clearfix:after{
    content: "";
    display: table;
}

.clearfix:after{
    clear: both;
}

.clearfix{
    *zoom: 1;
}

三、定位

1，概述

        （1）定位作用：

                ① 将盒子固定在某一个固定（相对）位置，

                ② 元素可以在固定盒子内自由移动

        （2）定位特点：

                ① 定位盒子可以设置高端、宽度、边界值

                ② 定位盒子脱标后不触发边界塌陷

2，定位使用

        （1）定位组成：定位模式+边偏移

        （2）边偏移：即相对于基准位置（定位模式决定）的偏移量，其代码格式为：

{top/bottom/left/right: 80px}

        （3）定位模式

定位模式	是否脱标	基准位置	补充
static_静态定位	否	无定位，可以理解为标准流	不常用
relative_相对定位	否（占有位置）	以原来自身的位置为基准，偏移x个像素点	常用
absolute_绝对定位	是（不占有位置）	① 以最近一级的，带定位的父级盒子为基准，偏移x个像素点 ② 若无父级，或祖宗盒子均无定位，则以浏览器为基准 ③ 常用方式：子绝父相	① 特点：相对父级盒子的位置 ② 常用
fixed_固定定位	是（不占有位置）	以浏览器的可视窗口（放缩随之变化）为基准	① 特点：位置永远不变，可以用在抬头的搜索栏，或者某些标志地方 ② 常用
sticky_粘性定位	否（占有位置）	以浏览器的可视窗口（放缩随之变化）为基准	① 开始时随鼠标滑动，当达到边偏移后设定值后固定不变 ② 当前阶段很少

3，定位应用：

        （1）定位的叠放次序/空间（z）次序：

                ① 可以通过{z-index:n}：设置盒子的空间次序，数值越大，盒子越靠上

                ② 若没有自定义，则后来居上

        （2）盒子贴近版心右侧（算法）：

lable {
    position: fixed;
    left: 50%;        //1，先走全局的50%
    margin-left: 40px;        //2，再走版心的50%（原版心为80px）
}    

        （3）盒子居中：先走版面的50%，再往返方向走自己的50%

常用布局页面