CSS初识(四)：四大布局

布局（四大布局）

什么是布局？就是把一个个盒子放到合适的位置。

CSS2.0中有三大布局——1、流式布局。2、浮动布局。3、层布局。

CSS3.0中新增一个flex布局。

第一大布局：流式布局

最简单的布局方案，也是默认布局方案。其实就是按照标准文档流进行布局。平时开发项目时，只是用流式布局往往无法完成项目。

特点：1、块级标签独占一行，行内、行内块可以并排显示。

2、盒子摆放是从上到下进行摆放。

第二大布局：浮动布局

初衷，为了实现字围效果，也就是一堆文字围绕着一张图片。

特点，浮动会半脱离标准文档流。如果脱离标准文档流，那么这个文档流的规则就不再适用。完全脱离文档流的话，那么文字就会跑到浮动元素的下方，会被覆盖掉。而使用float并不会让文字跑到元素下方，而是让文字围绕元素，所以是半脱离。

一般使用浮动将块级元素并排显示。为什么要用浮动，而不是用inline-block？

使用inline-block虽然可以将块级元素并排显示，但是如果代码上出现换行，会导致元素之间出现一个小间隔，这就导致如果几个并排元素原本宽度相加为100%，但却因为出现了间隔，硬生生让别的元素挤到了下一行。（这个间隔的大小是根据font-size来计算出来的，如果font-size为0，那么这个间隔也就没了）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .div1 {
            width: 800px;
            height: 400px;
            overflow-x: hidden;
            overflow-y: auto;
        }

        .img1 {
            float: left;
        }

        .theDivInline {
            width: 800px;
            height: 400px;
            background-color: #ff0;
        }

        .theDivInline .p1 {
            width: 30%;
            background-color: red;
            display: inline-block;
        }

        .theDivInline .p2 {
            width: 70%;
            background-color: blue;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="div1">
        <!-- 这是一个普通的文字围绕效果 -->
        <img class="img1" src="./img/4.jpg" alt="">
        <p>新华社北京3月14日电（记者高敬）受较强冷空气影响，3月14日至16日，我国长江以北地区将先后出现大风降温天气，部分地区将有扬沙或浮尘天气。但在冷空气到来前，华北中南部、东北地区中南部等地大气扩散条件较差，仍有轻至中度霾。中央气象台预计，14日至16日，新疆北部、西北地区中东部、内蒙古、华北、东北地区等地气温下降4至6℃，部分地区达10至12℃，内蒙古东部局地可超过16℃。内蒙古、东北地区、华北、西北地区中东部等地有4至7级风，部分地区阵风8至10级。受大风影响，新疆东部和南疆盆地、内蒙古、甘肃河西、宁夏中北部等地的部分地区有扬沙或浮尘天气，其中，新疆南疆盆地、内蒙古西部、甘肃西部等地局地有沙尘暴。目前，京津冀及周边地区大气污染已经持续数日，此次污染程度重、持续时间长、影响范围大。记者从生态环境部了解到，已有多个城市发布重污染天气预警。14日，华北中南部、东北地区中南部等地大气扩散条件较差，仍然有轻至中度霾。15日起，受冷空气影响，霾天气将自北向南减弱消散。未来几天，全国范围内的雨雪天气将明显增多，新疆北部、内蒙古东北部、黑龙江西部等地将有中到大雪，局地暴雪；江淮西部、江汉东部、江南北部、西南地区东南部等地部分地区有中到大雨，其中，安徽南部、湖北东部、江西北部等地部分地区有暴雨。（完）
        </p>
    </div>
    <div class="theDivInline">
        <h1>这个是p不换行，那就没有间隙</h1>
        <!-- 这里为什么要换行？因为这是inline-block的通病，代码换行会导致元素之间出现间隙，从而导致明明两个元素宽度相加为100%，却让元素硬生生换了个行 -->
        <p class="p1">第一个p</p><p class="p2">第二个p</p>
    </div>
    <div class="theDivInline">
        <h1>这个是p换行了，就出现间隙了，这导致后面的p被挤到下一行了。</h1>
        <p class="p1">第一个p</p>
        <p class="p2">第二个p</p>
    </div>
</body>

</html>

浮动造成的影响，以及如何消除这个影响。

如果父元素没有设置高度（也就是说高度是根据内容来决定的），此时，如果子元素全都float，那么父元素的高度则会变为 “0”。

如果父元素中的前几个子元素都float了，那么后面没有float的元素，就会觉得自己的标准文档流中的前几个，这样它们就会放到前几个float的元素原来的地方。

注意：元素虽然会重叠，但float是半脱离，所以文字还是会环绕之前的元素。

如何消除影响？

有个专业术语，叫做清除浮动。清除浮动有两种：1、清除对父元素造成的影响。2、清除对兄弟元素（同级元素）造成的影响。

首先，如何清除对父元素造成的影响？

1、加高法，给父元素加一个高度。缺点：高度写死了，一般盒子高度是由内容决定的，这个方法并不好用。

2、使用overflow：hidden，本来是用来处理内容溢出的问题，但是overflow：hidden有一个特点（偏方）——可以触发BFC，这可以消除浮动影响。

3、内墙法，也就是在所有子元素后面加一个空盒子，然后给一个CSS属性clear:both，以此来消除影响，缺点：需要手动来写一行代码，这就让CSS属性和HTML混到一起了。

4、使用伪元素，给父元素用::after，也就是在父元素内的最后，创建一个“元素”，然后使用clear:both。（其实和内墙法一个道理）。技巧：直接封装一个类，哪里需要清除浮动，直接把这个类名写上去。下方是使用案例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 这就是封装的清除浮动的类，需要的时候加上 */
        .clearFlow::after {
            content: "0";
            display: block;
            clear: both;
            height: 0;
            font-size: 0;
            /* visibility: hidden; */
            /* display: none; */
        }

        .allDiv {
            border: 1px solid red;
            /* height: 400px; */
            width: 400px;
        }

        .div1 {
            height: 20px;
            width: 50px;
            background-color: saddlebrown;
            float: left;
        }

        .div2 {
            height: 50px;
            width: 100px;
            background-color: darkcyan;
            float: left;
        }

        .div3 {
            height: 100px;
            width: 150px;
            background-color: lightcoral;
            float: left;
        }
    </style>
</head>

<body>
    
    <div class="allDiv clearFlow">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

</body>

</html>

如何消除对兄弟元素的影响？

哪个兄弟元素受到了影响，只需要在受影响的元素上面加一个clear：both。

clear:left，清除左浮动造成的影响。clear:right，清除右浮动造成的影响。一般情况下，不管是左浮动还是右浮动，都直接clear:both。

浮动的特点

1、浮动的元素，具有贴靠性，总会贴着父元素的边框或者兄弟元素的边框，不会乱跑。

2、浮动元素无法脱离父元素（飘不到父元素外面）。

3、一个元素浮动了，它会自动变为行内块。

4、浮动元素半脱离标准文档流。

5、先浮动的在前面（左边、上面），后浮动的在后面（右边、下面）。

6、父元素内所有子元素都float，则如果没有设置父元素高度，父元素高度会塌陷，如果父元素也浮动了，那就不会塌陷。

7、如果一个元素浮动了，则无法使用margin：0 auto让盒子居中。

第三大布局：盒模型（传统）

将一个个标签想象成一个个盒子，每个网页都是由一个个盒子堆起来的。

根据盒子特点可以将标签(元素)分为三种——块级标签(元素)、行级标签(元素)、行内块标签(元素)。

块级标签，特点——独占一行，可以设置宽高，宽度默认为父元素宽度的100%，高度为0，高度可以靠盒子内的内容撑起来，也可以自行设置，5大属性都可以使用。

<a>标签可定义锚

<abbr>表示一个缩写形式

<acronym>定义只取首字母缩写

<b>字体加粗

<bdo>可覆盖默认的文本方向

<big>大号字体加粗

<br>换行

<cite>引用进行定义

<code>定义计算机代码文本

<dfn>定义一个定义项目

<em>定义为强调的内容

<i>斜体文本效果

<kbd>定义键盘文本

<label>标签为

<input> 元素定义标注（标记）

<q>定义短的引用

<samp>定义样本文本

<select>创建单选或多选菜单
<small>呈现小号字体效果

<span>组合文档中的行内元素

<strong>语气更强的强调的内容

<sub>定义下标文本

<sup>定义上标文本

<textarea>多行的文本输入控件

<tt>打字机或者等宽的文本效果

<var>定义变量

行级元素，特点——不独占一行，不能手动设置宽高，宽高由盒子内的内容大小来自行生成。margin和padding无法使用，height和width无法使用。

<address>定义地址

<caption>定义表格标题

<dd>定义列表中定义条目

<div>定义文档中的分区或节

<dl>定义列表

<dt>定义列表中的项目

<fieldset>定义一个框架集

<form>创建 HTML 表单

<h1>定义最大的标题

<h2>定义副标题

<h3>定义标题

<h4>定义标题

<h5>定义标题

<h6>定义最小的标题

<hr>创建一条水平线

<legend>元素为 

<fieldset>元素定义标题

<li>标签定义列表项目

<noframes>为那些不支持框架的浏览器显示文本，于 frameset 元素内部

<noscript>定义在脚本未被执行时的替代内容

<ol>定义有序列表

<ul>定义无序列表

<p>标签定义段落

<pre>定义预格式化的文本

<table>标签定义 HTML 表格

<tbody>标签表格主体（正文）

<td>表格中的标准单元格

<tfoot>定义表格的页脚（脚注或表注）

<th>定义表头单元格

<thead>标签定义表格的表头

<tr>定义表格中的行

行内块元素，特点——除了并排显示之外，和块级元素一样。
<img> <input>

一个盒子的组成

content 内容区域，真正展示的内容的区域。

padding 内边距区域，也叫做补白区域，指content和border中间的间隙

border 边框

margin 外边距区域

设置盒子模型

通过5大属性来控制这个盒子的模型。

盒子在网页上占据的大小为，盒子内容宽高(width，height) + 盒子内边距宽高（padding）+ 盒子边框宽度（border-width）+盒子外边距宽高（margin）。

width 宽，指content的宽度

height 高，指content的高度

border边框

这是一个复合属性，是多个属性的简写，具体属性如下：

border-width 边框宽度

border-style 边框样式，有solid（直线）、dotted（点线）、dash（虚线）

border-color 边框颜色

边框分为4个方向，border-top、border-right、border-bottom、border-left，可以对上右下左的边框单独设置。

border-radius，边框半径，可以设置圆角。如果想做正圆，那就是50%（前提是宽高要一样大，也就是说盒子必须得是正方形。）

/* 使用border来画小三角 */
<style>
div{
   width: 0;
   height: 0;
   border-top: 30px solid red;
   border-right: 70px solid blue;
   border-bottom: 30px solid yellow;
   border-left: 70px solid black;
}
</style>
<body>
<div></div>
</body>

padding内边距

是内边距，右top、right、bottom、left属性可以对四个方向的内边距进行调整。

padding，一个值x，上下左右都是x

两个值x，y，上下x，左右y

三个值x，y，z，上x，左右y，下z

四个值，xyzp，上x，右y，下z，左p

margin外边距

外边框，同理有上下左右可以单独进行调整。

margin塌陷

margin(塌陷)，也就是margin重叠。

margin塌陷的情况分为两类，一种是兄弟（同级）元素之间的塌陷，一种是父子（上下级）元素之间的塌陷。

同级塌陷：比如上面的盒子有个margin-bottom:100px，下面的盒子有个margin-top:50px，那么这两个盒子之间的距离不是50+100，而是100px（取大值），那个盒子的50px，相当于被覆盖掉了。

父子塌陷：比如一个盒子margin-top是100px，里面放了一个小盒子，小盒子的margin-top是50px，那么大盒子与上方的距离是100px，而小盒子此时却不会距离大盒子的上边框50px，而是小盒子的边框会与大盒子的边框挨着，小盒子的margin-top的50px被大盒子的覆盖掉了，这个距离同样是取大值。

父子塌陷的解决办法1：可以给父元素添加一个border，那么子元素的margin就不会被父元素覆盖了，而是变成相对于父元素的border来设置距离，这个办法会导致盒子所占空间变大。

父子塌陷的解决办法2：一个已经写了margin，另一个如果要调整距离的话，可以使用padding来调整，同样会导致盒子在网页上占据的空间变大。

父子塌陷的解决办法3：给父元素加一个overflow:hidden，这个属性本意是溢出内容隐藏，这个办法可以避免盒子占据的空间变大。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            margin-bottom: 50px;
            background-color: saddlebrown;
            height: 100px;
            /* border: 10px solid black; */
        }

        .div2 {
            margin-top: 100px;
            background-color: red;
            height: 100px;
            /* border: 10px solid black; */
            /* overflow: hidden; */
        }

        .div3 {
            margin-top: 20px;
            width: 50px;
            height: 50px;
            background-color: pink;
            /* border: 10px solid black; */
        }
    </style>
</head>

<body>
    <!-- 同级塌陷 -->
    <div class="div1"></div>
    <div class="div2">
        <!-- 父子塌陷 -->
        <div class="div3"></div>
    </div>
</body>

</html>

注意：平时写网页的时候要注意避免盒子之间的塌陷情况。

注意：margin可以为负值，这样可以让两个盒子的内容重合，以及调整盒子之间的距离。

display显示方式

display，显示方式，：block（块级）、inline（行内）、inline-block（行内块）、none（不显示，且不占网页空间）。

注意：块级元素 → 行内元素，margin-left/right、padding-left/right，及水平方向上距离依然可以调整，竖直方向就不行了。

行内元素转块级元素，所有属性都可以用了。

块级元素转行内块元素，所有属性都能用；行内元素转行内块，属性都能用，不过会出现行内块的一个毛病——上下可能会有空隙，这个空隙可以使用vertical-align来解决。inline-block还有一个通病，代码换行会导致并排显示的元素之间出现间隙，所以这时候一般我们使用float(浮动布局)来实现。

background背景

任何一个盒子都可以设置背景，背景包括两种，颜色、图片。

box-shadow盒子阴影

box-shadow，属性值为：水平阴影垂直阴影模糊程度阴影大小阴影颜色内/外阴影（默认为外阴影，inset改为内阴影）。

新的盒模型

可以通过一个属性将传统盒子模型变成新的盒子模型，属性是box-sizing，属性值：1、border-box（新盒模型），2、content-box（传统盒模型，默认是这个值）

传统盒模型的问题：如果改变padding，margin，border的大小，那么如果想保持盒子在网页中所占空间不变，那就需要手动对内容（content）的height、width进行调整

如果设置box-sizing:border-box，就是启动了新的盒模型，新的盒模型的width和height不代表内容（content）的宽高，而是盒子整体在网页中占据的大小，内容的height和width会自动计算。现在的项目，尤其是移动端的项目，主要新的盒模型用的多一些。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .divOld {
            height: 200px;
            width: 200px;
            background-color: green;
            background-color: red;
            border: 20px solid blue;

        }

        .divNew {
            box-sizing: border-box;
            height: 200px;
            width: 200px;
            background-color: red;
            border: 20px solid blue;
        }
    </style>
</head>

<body>
    <div class="divOld"></div>
    <div class="divNew"></div>
</body>

</html>

第四大布局：flex布局（弹性布局）

CSS3提出的一种布局方案，使用flex基本上用不着float，但并不是用flex就不用float了，有些复杂页面，也是可以flex配合float一起用。flex没有浮动、塌陷、脱离标准文档流之类的概念，不管你块级行级，都按照flex的规则来排列。

移动端使用flex很多。

flex不兼容低版本浏览器(比如IE)。

flex有四个概念：容器、项目、主轴、交叉轴。

容器：如果给以一个盒子加上display：flex，则我们认为这个盒子是一个容器。

项目：容器的直接子元素。

主轴：默认项目的，排列方向就是水平向右，这个排列方向就是主轴。

交叉轴：与主轴垂直的那个轴，叫做交叉轴。

关于容器的6个属性

flex-direction：direction本意是方向，这里是用来设置主轴方向。

row，默认值，水平向右

row-reverse，水平向左，reverse是翻转的意思。（项目倒过来排列了）

column：column本意是列的意思，垂直向下。

column-reverse：垂直向上。（项目倒过来排列了）

项目从主轴的起点开始排列，在主轴上排列。

flex-wrap：wrap是包、包裹的意思，当项目的宽度，大于容器的宽度时，可以设置这个属性。这个属性的作用是，当项目足够多的时候，是否换行。

nowrap：默认值，表示不换行，此时如果项目大于容器的大小时，每个项目都会被压缩（每个项目的压缩量都一样）。

wrap：表示换行。

flex-flow：flow表示流动，这是一个复合属性，是flex-direction和flex-wrap的综合

flex-flow:column-reverse wrap;

justify-content，justify本意是证明的意思，content是内容的意思。

作用：用来处理富裕空间。

什么是富裕空间？当项目总的所占长、宽 <(小于) 容器的长、宽。

flex-start，表示项目从主轴的开始点排列。内容在前面，富裕空间在主轴最后。（这个是默认值）。（项目没有倒过来排列）

flex-end，项目从主轴的结束点开始排列，内容在后面，富裕空间在主轴前面。（项目没有倒过来排列）

center，富裕空间位于主轴两边，内容位于中间。

space-between，富裕空间跑到项目和项目之间，每个项目都被均匀的隔开了

space-around，富裕空间围绕在项目四周。

注意：flex-start、flex-end和之前那个row-reverse、column-reverse区别，一个项目没有倒过来排列，一个项目倒过来排列了

align-items，作用：设置项目在交叉轴上的摆放位置。

flex-start：项目在交叉轴的开始位置排列。

flex-end：项目在交叉轴的结束位置。

flex-center，项目在交叉轴的中间。

align-content，一般来讲一行项目有一根主轴，多行项目就会有多根主轴。作用：用来设置多根主轴的位置关系。

flex-start，不是默认值，整体在交叉轴的开始位置（所有主轴一个挨着一个从交叉轴的开始位置开始排）。

flex-end，整体在交叉轴的开始位置。

center，整体在交叉轴的中间位置。

space-between：整体（整行、整列）被空间隔开。

space-around：整体（整行、整列）被空间包裹。

关于项目的6个属性

order，设置单独一个项目在主轴上的排列方式。默认值是0，设置order，数字越小，越靠近主轴的起始点。

flex-grow，grow本意是生长的意思。这里表示，如果有富裕空间，就可以让项目生长、延展（缩放）。取值为数字。举个例子：

      .div1 {
        flex-grow: 1;
      }
      .div2 {
        flex-grow: 1;
      }
      .div3 {
        flex-grow: 1;
      }
      /* 上面这个表示，将剩余空间分为3分，div1、2、3各占一份 */
      .div1 {
        flex-grow: 3;
      }
      .div2 {
        flex-grow: 2;
      }
      .div3 {
        flex-grow: 1;
      }
      /* 上面这个表示，将剩余空间分为6分，div1占3份，div2占2份。div3占1份，谁的值更大，谁占的份额多，谁就可以得到更多空间 */

flex-shrink，shrink是压缩的意思，当项目足够多，不换行的情况下，项目要被压缩，这个控制压缩的比例，值越大，被压缩的越多。

flex-basis，basis是基础的意思，作用是当一个项目没有设置宽度的条件下，可以通过此属性去设置项目在主轴上占据的大小。使用flex布局，在项目没有设置宽度的情况下，其宽度为自身内容的宽度。

flex，复合属性，是flex-grow、flex-shrink、flex-basis的复合属性。其中flex-shrink和flex-basis可以不写，那样的话，flex-grow：1，就代表着均分富裕空间。

align-self，单独设置某个项目在交叉轴上的位置。

flex-end，此项目放到交叉轴的结束位置。

dlex-start，此项目放到交叉轴的开始位置。

center，此项目放到交叉轴的中间位置。

想学Flex布局的话，可以参考这个大佬的文章Flex布局教程(作者：阮一峰)，同时建议配合实战练习一起食用Flex布局实战：骰子(作者：白小宇)

版心（补充了解）

每个网页基本上两边都有留白，中间显示内容的部分就是版心。不过也有的网页会铺满整个浏览器。

测量网页尺寸和颜色的工具

测尺寸——ps，fireworks，像素大厨（pxcode）。

颜色——colorlite。