CSS 布局

将元素以正确的大小摆放在正确的位置上；元素摆放的模式；

即，CSS 中影响元素大小和位置的因素；元素摆放的模式。

怎么理解呢？网页布局的核心，就是用 CSS 来摆放盒子位置。那么，如何把盒子摆放到合适的位置呢？

在 CSS 中有 3 种元素摆放的模式：标准文档流、浮动和定位。

[ 标准文档流（Normal Flow）] { 视觉格式化？↓ }

~，又称普通流或文档流，实际上就是网页内标签元素正常从上到下、从左到右顺序排列的意思。如块级元素会独占一行，行级元素会按序依次前后排列，按这种大前提的布局排列之下绝对不会出现例外的情况，就叫做标准文档流布局。

简单讲就是，从上到下，从左到右的输出文档内容；它由块级元素和行级元素组成，且它们都是盒子模型。

// 下面为 Firefox 布局可视化 Gecko Reflow Visualisation。

display 设置元素的显示方式

在 HTML 中，标签一般分为块级标签和行级标签，又称为块级元素和行级元素。

块级元素：通常都会独占一行，可以对齐设置宽高、对齐等属性，常用于网页布局和网页结构的搭建。

行级元素：不占有独立的区域，仅仅靠自身的字体大小和图片尺寸来支持结构，一般不可以设置宽高、对齐等属性，常用于控制页面中文本的样式。 // 水平方向的padding和margin可以设置，但垂直方向的无效。

行级元素中有几个特殊的标签img、input、td等，对它们可以设置宽高和对齐属性，称之为行级块状标签。其特点为：和相邻行内块在一行上，但之间会有空白间隙；默认宽度为内容宽度，可设置宽高和内外边距。

display:block | inline | inline-block | none

注，默认宽度和设置宽高，影响元素大小；起始位置，影响元素位置。
默认：
  display:block(块级元素)    div,p,h1~h6,ul,form…；div是最典型的块级元素。
  display:inline(行级元素)    span,a,label,cite,em…；span是最典型的行级元素。
  display:inline-block     input,textarea,select,button…
  display:none(设置元素不显示，不占空间)  VS  visibility:hidden(不显示，隐藏，但占空间)

display:block | inline | inline-block | none

注，默认宽度和设置宽高，影响元素大小；起始位置，影响元素位置。

默认：

display:block(块级元素) div,p,h1~h6,ul,form…；div是最典型的块级元素。

display:inline(行级元素) span,a,label,cite,em…；span是最典型的行级元素。

display:inline-block input,textarea,select,button…

display:none(设置元素不显示，不占空间) VS visibility:hidden(不显示，隐藏，但占空间)

~~注，块级元素可以容纳行级元素和其他块级元素；行级元素只能容纳文本或其他行级元素（a除外）。~~

[ display？↓ 的应用 ] { 元素显示、隐藏的9种方式？↓ }

模式A：块级元素水平居中

HTML <div> <div class=”content”>content area</div> </div> CSS .content{width:300px;height:300px;background-color:pink;} .content{margin:0 auto;}

1
2
3
4
5

HTML    <div>
            <div class=”content”>content area</div>
        </div>
CSS     .content{width:300px;height:300px;background-color:pink;}
        .content{margin:0 auto;}

模式B：居中导航

HTML <ul class=”m-nav”> <li><a href=”#”>推荐</a></li> <li><a href=”#”>歌单</a></li> <li class=”cur”><a href=”#”>主题</a></li> </ul> CSS ul{text-align:center;height:30px;line-height:30px;background-color:#f00;} li，a{display:inline-block;width:80px;height:100%;} li{margin:0 5px;list-style:none;} a,a:hover,li.cur a{color:#fff;text-decoration:none;} a:hover,li.cur a{background-color:#c00;}

1
2
3
4
5
6
7
8
9
10

HTML    <ul class=”m-nav”>
            <li><a href=”#”>推荐</a></li>
            <li><a href=”#”>歌单</a></li>
            <li class=”cur”><a href=”#”>主题</a></li>
         </ul>
CSS      ul{text-align:center;height:30px;line-height:30px;background-color:#f00;}
         li，a{display:inline-block;width:80px;height:100%;}
         li{margin:0 5px;list-style:none;}
         a,a:hover,li.cur a{color:#fff;text-decoration:none;}
         a:hover,li.cur a{background-color:#c00;}

float 浮动 - 块级元素同行显示，在文档流（半脱离文档流）

[ 浮动的由来 ]浮动最早是用来控制图片的，以便达到其他元素（特别是文字）实现“环绕”图片的效果。

后来，大家发现浮动有个非常有意思的特性，就是可以让任何盒子在同一行中排列。换句话来说就是，浮动可以使得块级元素同行显示，因此，浮动被逐渐应用到网页布局当中。

[1] 浮动，是指设置了浮动属性的元素会脱离普通文档流的控制，移动到其父元素中指定位置的过程。

其主要目的是为了让多个块级元素在同一行内显示。 { 深入了解float？↓ }

float:left | right | none | inherit

   left：元素向左移动；
   right：元素向右移动；
   none：元素不浮动（默认值）；

float:left | right | none | inherit

left：元素向左移动；

right：元素向右移动；

none：元素不浮动（默认值）；

[ 特性一 ] 文档流（“漂浮起来”）/ 默认宽度为内容宽度（可设置宽高）/ 向指定方向一直移动（只有左右浮动）

[ 特性二 ] float 的元素在同一文档流

[ 特性三 ] float 元素半脱离文档流（对后续元素，脱离文档流；对内容，在文档流） // BFC用途？！

浮动创建包含块的概念（包裹），也就是说，浮动的元素总是找离它最近的父元素对齐，但不会超出内边距范围。

因此，从布局的稳定性考虑，浮动首先需要添加标准流父级。

[ 排列规则 ] 浮动元素A的排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则 A 元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则 A 元素的顶部会和上一个元素的底部对齐。

[ 显示模式 ] 添加浮动后，元素会具有行级块状元素的特性，元素的大小取决于定义的大小或默认内容的多少。

[2] 清除浮动，本质上来讲，主要是为了解决父元素因为子元素浮动引起内部高度为 0 的问题。

~~很多时候，我们不方便给定父元素高度，比如新闻，因为你不知道新闻里面会有多少字，一般是让内容自动撑开。~~

在CSS中，clear属性用于清除浮动，其基本语法为：
   clear:both | left | right | none | inherit           应用于后续元素&块状元素

   // 清除浮动的隐藏方式：给父元素设定固定高度。

在CSS中，clear属性用于清除浮动，其基本语法为：

clear:both | left | right | none | inherit 应用于后续元素&块状元素

// 清除浮动的隐藏方式：给父元素设定固定高度。

[ 清除浮动的方式 ] “闭合”思想：把浮动的盒子圈在里面，让父盒子闭合出口和入口，不让子盒子出来影响其他元素。

空白元素：W3C 推荐，在浮动元素末尾添加一个空白标签

<div class="parent"> <div class="sample">float:left</div> <div class="sample">float:left</div> <br class="cb"> </div> .sample{float:left;} .cb{clear:both;height:0;overflow:hidden;visibility:hidden;} 优点：通俗易懂，书写方便缺点：添加许多无意义的标签，结构化较差。不建议使用。

1
2
3
4
5
6
7
8
9
10

<div class="parent">
    <div class="sample">float:left</div>
    <div class="sample">float:left</div>
    <br class="cb">
</div>
.sample{float:left;}
.cb{clear:both;height:0;overflow:hidden;visibility:hidden;}

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差。不建议使用。

父级添加 overflow 方法：可以通过出发BFC？！的方式，可以实现清除浮动效果。

给父级添加：overflow 为 hidden | auto | scroll 都可以实现优点：代码简洁缺点：内容增多时候容易发生内容不会自动换行而导致内容被隐藏，无法显示需要溢出的元素。

1
2
3
4

给父级添加：overflow 为 hidden | auto | scroll 都可以实现

优点：代码简洁
缺点：内容增多时候容易发生内容不会自动换行而导致内容被隐藏，无法显示需要溢出的元素。

clearfix — after 伪元素清除浮动

<div class="sc clearfix"> <div class="sample">float:left</div> </div> .clearfix:after{ content:".";display:block;clear:both; height:0;overflow:hidden;visibility:hidden; } .clearfix{zoom:1;} // IE低版本不支持after，加上这个优点：结构语义化正确缺点：IE6-7不支持:after，使用zoom:1出发hasLayout，代表网站：百度、淘宝、网易等，推荐使用。

1
2
3
4
5
6
7
8
9
10
11

<div class="sc clearfix">
    <div class="sample">float:left</div>
</div>
.clearfix:after{
    content:".";display:block;clear:both;
    height:0;overflow:hidden;visibility:hidden;
}
.clearfix{zoom:1;}  // IE低版本不支持after，加上这个

优点：结构语义化正确
缺点：IE6-7不支持:after，使用zoom:1出发hasLayout，代表网站：百度、淘宝、网易等，推荐使用。

clear fix — 双伪元素清除浮动

.clearfix:before,.clearfix:after{ content:"."; display:table; } .clearfix:after{ clear:both; } .clearfix{ zoom:1 } 优点：代码更简洁缺点：由于IE6-7不支持:after，使用zoom:1出发hasLayout，代表网站：小米、腾讯等，推荐使用。

1
2
3
4
5
6
7
8
9

.clearfix:before,.clearfix:after{
    content:".";
    display:table;
}
.clearfix:after{ clear:both; }
.clearfix{ zoom:1 }

优点：代码更简洁
缺点：由于IE6-7不支持:after，使用zoom:1出发hasLayout，代表网站：小米、腾讯等，推荐使用。

position 设置定位方式（参照物）

[ 为什么学习定位 ] 从下图（ // 在新标签页打开图像）中发现定位的常见应用场景：

XXXXX ，~~如果用标准流或浮动，实现起来会比较复杂或难以实现，此时就需要使用定位来做。~~

元素的定位属性主要包括定位模式和边偏移两个部分。

[1] 边偏移（设置位置）：top、right、bottom、left、z-index

其用于设置元素边缘与参照物边缘的距离，且设置的值可为负值。在同时设置相对方向时，元素将被拉伸。

  top               顶端偏移量。定义元素相对于其父元素上边线的距离。
  bottom            底部偏移量。定义元素相对于其父元素下边线的距离。
  left              左侧偏移量。定义元素相对于其父元素左边线的距离。
  right             右侧偏移量。定义元素相对于其父元素右边线的距离。

// 定位（position）和偏移可以搭配使用，如 top:100px;left:30px;

top 顶端偏移量。定义元素相对于其父元素上边线的距离。

bottom 底部偏移量。定义元素相对于其父元素下边线的距离。

left 左侧偏移量。定义元素相对于其父元素左边线的距离。

right 右侧偏移量。定义元素相对于其父元素右边线的距离。

// 定位（position）和偏移可以搭配使用，如 top:100px;left:30px;

[ 叠放次序 z-index ]当对多个元素同时设置定位时，定位元素之间就可能会发生层叠。

其用于设置 Z 轴上得排序，默认值为 0 ，但可设置为负值，也就是说其取值可以为：正整数、负整数和0。

（如不做设置，或取值相同，则按照文档流的顺序排列，后面的元素将置于前面的元素之上）

z-index默认属性值为0，取值越大，定位元素在层叠元素中越居上。但z-index栈除外。

[ z-index 栈 ]父类容器的 z-index 优于子类 z-index。

[2] position？↓ ：用于定义元素的定位模式（不同的定位的类型）

position : static | relative | absolute | fixed

position:static;       // 自动定位，默认值
positon:relative;      // 在文档流中；参照物为元素本身；使用场景：作为绝对定位元素的参照物；
position:absolute;     // 脱离文档流；默认宽度为内容宽度；参照物为第一个定位元素或根元素；
position:fixed;        // 脱离文档流；默认宽度为内容宽度；参照物为视窗，即整个浏览器窗口；

position : static | relative | absolute | fixed

position:static; // 自动定位，默认值

positon:relative; // 在文档流中；参照物为元素本身；使用场景：作为绝对定位元素的参照物；

position:absolute; // 脱离文档流；默认宽度为内容宽度；参照物为第一个定位元素或根元素；

position:fixed; // 脱离文档流；默认宽度为内容宽度；参照物为视窗，即整个浏览器窗口；

[ 静态定位 static ] 默认值，可以将元素定位于静态位置，即各元素在HTML文档流中的默认位置（标准流特性）。

在静态定位状态下，无法通过边偏移属性（top、bottom、left、right）来改变元素的位置。

其本身没有什么特别的作用，一般用来清除定位，也就是说不想定位了。

[ 相对定位 relative ] 相对定位是将元素相对于它在标准流中的位置进行定位，不脱离文档流。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

每次移动的位置，是以自己的左上角为基点进行移动（参照物是自身）。其主要作用是给绝对定位做参照物。

[ 绝对定位 absolute ] 绝对定位可以通过边偏移属性移动位置，但它脱离文档流，默认宽度为内容宽度，不占位置。

需要注意的是：如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的一部分定位。

其参照物为第一个定位元素或根元素。也就是说，绝对定位依据已经定位（相对、绝对或固定）的父元素（祖先）进行定位；如果其祖先元素都没有定位，就以浏览器（根元素）为基准进行定位。

[ 固定定位 fixed ] 固定定位是绝对定位的一种特殊形式，类似正方形是一种特殊的矩形。 // IE6等低版本浏览器不支持

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依照浏览器窗口来定义自己的显示位置。不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位的元素与父元素没有任何关系，只和浏览器有关；

固定定位完全脱离文档流，不占有位置，不随滚动条滚动。

// 模式A 轮播头图

HTML    <div class="is">
	    <img src="images/first.jpg">
            <p class="title"><a href="#">第一视角</a></p>
            <div class="controls">
	        <span></span><span></span><span></span><span></span>
            </div>
       </div>
CSS    .is{position:relative;width:900px;}
       .is .title{position:absolute;bottom:0;width:100%;}
       .is .controls{position:absolute;bottom:20px;right:10px;}
       .is .controls span{display:inline-block;width:10px;height:10px;}

HTML <div class="is">

</div>

CSS .is{position:relative;width:900px;}

.is .title{position:absolute;bottom:0;width:100%;}

.is .controls{position:absolute;bottom:20px;right:10px;}

.is .controls span{display:inline-block;width:10px;height:10px;}

// 模式B 三行自适应

HTML    <div class="head">head</div>
        <div class="main">main body</div>
        <div class="foot">foot</div>
CSS     .head{display:absolute;height:100px;top:0;left:0;width:100%;}
	    .main{display:absolute;top:100px;bottom:100px;left:0;right:0;}
	    .foot{ display:absolute;height:100px;bottom:0;left:0;width:100%;}

HTML <div class="head">head</div>

CSS .head{display:absolute;height:100px;top:0;left:0;width:100%;}

.main{display:absolute;top:100px;bottom:100px;left:0;right:0;}

.foot{ display:absolute;height:100px;bottom:0;left:0;width:100%;}

// 模式C 固定顶栏

HTML  <body>
            <div class="top">top bar</div>
            <div class="main">main content</div>
	  </body>
CSS       body{padding:50px;}
          .top{position:fixed;top:0;width:100%;height:50px;}

HTML <body>

<div class="main">main content</div>

</body>

CSS body{padding:50px;}

.top{position:fixed;top:0;width:100%;height:50px;}

// 模式D 遮罩

HTML    <div class="mask"></div>
CSS     .mask{position:fixed;top:0;left:0;z-index:999;width:100%;height:100%;}

1 2	HTML <div class="mask"></div> CSS .mask{position:fixed;top:0;left:0;z-index:999;width:100%;height:100%;}