网页布局汇总

1. 盒模型

容器大小 = 内容大小 + 内边距(padding) + 边框大小

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒模型</title><style>.container {width: 100px;height: 100px;border: 10px solid skyblue;padding: 1px;margin: 2px;/*-sizing: border-box;*/}</style>
</head>
<body><div class="container">css盒模型</div>
</body>
</html>

在 css 中加入下列代码，盒子便不会被撑大。

box-sizing: border-box;

box-sizing 有三个值：content-box(默认)、border-box、inherit 。其中inherit表示box-sizing的值应该从父元素继承。content-box和border-box的主要区别就是盒子的width和height的值包不包括border、padding这两个属性的值。

content-box: 也叫标准盒模型，默认是该值。不包含 border 和 padding 大小。如果盒子宽度为 100 px, padding 为 10px , border 宽度为 5 px。那么盒子大小是 100 + 10 * 2 + 5 * 2 = 130 px

border-box：也叫 IE 盒子模型。盒子大小包含 content(内容大小) + padding(内边距) + border 边框大小。如果盒子宽度为 100， padding 为 10 px， border 宽度为 5px。那么盒子大小为 100px

2. 流式布局(fluid布局)

流式布局就像是在容器中装水，容器有多宽，水就有多宽。在网页中，显示器有多大像素，内容就覆盖到哪。流式布局是为了解决固定像素的缺点而诞生的。流式布局是一种等比例的缩放式的布局方式。在css 代码中用百分比来设置宽度，所以也称百分比自适应布局。流式布局实现方式是将css固定像素宽度转换成百分比宽度。

换算公式：目标元素宽度/父盒子宽度=百分数宽度

流式布局的缺点：流式布局是解决不同设备分辨率的兼容性问题，如果两个设备差异太大，都会导致页面变形。因为字体和高度是采用固定像素的，而宽度是采用百分比的，字体和高度不会兼容。

2.1 响应式导航栏案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>流式布局</title><style>.container {overflow: hidden;background-color: black;}a {float: left;display: block;padding: 10px;color: #fff;font-size: 16px;text-decoration: none;}/* @media mediaType 连接符 (mediaFeature) {  CSS 样式规则  }mediaType ： all（不写默认all,所有设备） \ screen (手机、平板、电脑)\ print(打印机)连接符： and or onlymediaFeature：媒体特性，width、height、min-width、max-width、device-width、orientation 等。*/@media screen and (max-width: 600px) {a {float: none;width: 30%;}}</style>
</head>
<body><div class="container"><a href="">首页</a><a href="">我的信息</a><a href="">我的订单</a><a href="">联系我们</a></div>
</body>
</html>

3. 弹性布局(flexbox布局)

flexbox 弹性布局打破常规的浮动布局，实现垂直等高，水平均分，按比例划分等布局方式以及如何处理可用的空间，该布局可以创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。

弹性布局盒子由伸缩容器和伸缩子元素组成，通过设置元素的display属性为flex（块状元素）或者inline-flex（内联元素），便可以将一个盒子指定为伸缩盒子。每一个伸缩容器内都有两根轴:主轴和交叉轴，两轴之间相互垂直，值得一提的是水平的不一定就是主轴。每根轴都有起点和终点，伸缩盒子内能定义多个伸缩子元素，伸缩子元素沿着主轴排列。设为flex布局以后，子元素的float、clear和vertical-align属性将失效。伸缩子元素也可通过设置display:flex指定成伸缩盒子，也就是伸缩盒子可以嵌套。

3.1 父容器属性

1. flex-direction 属性

flex-direction 属性指定伸缩盒子中主轴的方向。

参数：

row：默认主轴的水平方向，从左向右排列

row-reverse：与 row 排列相仿，从右向左排列

column：从上到下排列

column-reverse：从下到上排列

2. flex-wrap 属性

flex-wrap 属性指定子元素超过夫容器是否换行

参数：

nowrap：子元素不换行（默认值）

wrap：子元素换行，换行部分在子元素下面

wrap-reverse：子元素换行，换行部分在子元素上面

3. flex-flow 属性

flex-flow 是个简写属性，同时设置 flex-direction 和 flex-wrap 属性。更加方便地控制弹性盒模型（Flexbox）中的项目排列方向和换行方式。

参数：

flex-flow: flex-direction属性值 flex-wrap属性值

案例：有一个容器，我们希望其中的项目水平排列，并且当空间不足时允许项目换行。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex弹性布局</title><style>.container {display: flex;flex-flow: row wrap;  /* 水平排列，换行 */}.item {width: 20%;}</style>
</head>
<body><div class="container"><div class="item">项目 1</div><div class="item">项目 2</div><div class="item">项目 3</div><div class="item">项目 4</div><div class="item">项目 5</div><div class="item">项目 6</div></div>
</body>
</html>

4. justify-content 属性

justify-content属性决定了子元素在主轴上的对齐方式
参数：

flex-start：子元素在主轴方向的开始位置向结束位置排列（默认值）

flex-end：子元素在主轴方向的结束位置向开始位置排列

center：子元素在主轴的中间排列

space-between：子元素平均分布在主轴上，第一个元素左边和最后一个元素右边无间隔

space-around：子元素平均分布在主轴上，每个元素左右两边都有间隔。

5. align-items 属性

align-items 属性定义了子元素在交叉轴上的排列方式

参数：

flex-start：子元素在交叉轴方向的开始位置向结束位置排列（默认值）

flex-end：子元素在交叉轴方向的结束位置向开始位置排列

center：子元素在交叉轴的中间排列

baseline: 子元素第一行文字的基线对齐

stretch: 子元素未设置高度，子元素高度将填充整个容器高度（默认）

6. align-content 属性

align-content 属性定义了多根轴线的对齐方式，若只有一根轴线将不起作用。

参数：

flex-start: 交叉轴的起点位置对齐

flex-end: 交叉轴的终点对齐

center：交叉轴中央对齐

space-between: 与交叉轴平均分布，第一个元素上边和最后一个元素下边无间隔

space-around: 与交叉轴平均分布，第一个元素上边和最后一个元素下边有间隔

stretch：子元素未设置高度，子元素高度将填充整个容器高度（默认）

3.2 子容器属性

1. order 属性

order 定义子容器排列顺序，默认 0，数值越小优先级越高，排在越前

2. flex-grow属性

flex-grow 属性设置扩展比率。默认值 0，表示不占用父容器剩余空间。该值不带单位。

案例1：当父容器的宽度大于子容器所有宽度之和时，父容器有剩余空间，当设置子元素的 flex-grow 为 0 时，表示不占用父容器的剩余空间。当设置某个子元素的 flex-grow：1时，其余子元素不设置，表示父容器剩余空间都给设置了 flex-grow：1 的元素。

案例2：当父容器的宽度大于子容器所有宽度之和时，父容器有剩余空间，当设置子元素1的 flex-grow 为 2 时，设置某个子元素2的 flex-grow：1 时，其余子元素不设置，表示父容器剩余空间给子元素1和子元素2按比例分配。此时，子元素1的容器大小 = 本身子元素大小 + 剩余父容器大小 * (2/3)，子元素2的容器大小 = 本身子元素大小 + 剩余父容器大小 * (1/3)

3. flex-shrink 属性

flex-shrink 属性设置收缩比率。默认值 1，不带单位。当父元素容器宽度小于子容器所有之和时，所有子元素按照定义的收缩比例收缩。

4. flex-basis 属性

定义主轴多余空间，默认是 auto, 及子容器本身大小。可以设置像素值，如 250px，表示该子元素占据固定空间。当同时设置了width和flex-basis属性时，width属性无效。

5. align-self 属性

允许单个子元素与其它子元素不一样对齐方式。可覆盖 align-items 属性。默认值为 auto ，表示继承父元素的 aling-items 属性。如果没有父元素，等同于 stretch。

参数：

auto

flex-start

flex-end

center

baseline：子元素第一行文字的基线对齐

stretch：子元素未设置高度，子元素高度将填充整个容器高度

6. flex 属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

3.3 基于弹性布局的响应式导航栏

<!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>.container {display: flex;justify-content: space-around;background-color: black;}.item {color: #fff;font-size: 16px;padding: 14px 20px;text-decoration: none;}@media (max-width: 600px) {.container {flex-direction: column;  /**从上到下排列*/}.item {text-align: center;margin-bottom: 10px;}}</style>
</head>
<body><div class="container"><a href="" class="item">首页</a><a href="" class="item">我的信息</a><a href="" class="item">我的订单</a><a href="" class="item">联系我们</a></div>
</body> 
</html>

当屏幕像素小于 600px 时，导航栏纵向排列

4. 网格布局(Grid 布局)

网格布局（Grid）是将网页划分成一个个网格单元，可任意组合不同的网格，轻松实现各种布局效果，也是目前CSS中最强大布局方案。通过设置 display: grid 或 inline-grid（设成行内元素）将容器设置为网格容器，容器内的子元素为网格元素，也称item （项目）。

值得一提是，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align等设置都将失效。

行和列

容器里面的水平区域称为 "行"（row），垂直区域称为 "列"（column）。

网格线

网格线(grid line)就是划分网格的线。水平网格线区分行，垂直网格线区分列。

单元格

行和列交叉区域被称为单元格(cell) , m行n列的网格线会有 mn 个单元格。

4.1 网格容器属性

1. grid-template-rows 和 grid-template-columns

这两个属性用于定义网格的行和列。我们可以使用像素、百分比或 fr 单位来指定它们的尺寸。

 .container {display: grid;width: 300px;grid-template-columns: 50px 100px 50px;grid-template-rows: 50px 100px 50px;background-color: #ccc;
}

2. grid-column-gap 和 grid-row-gap

这两个属性用于设置行和列之间的间隙。

3. justify-items 和 align-items

这两个属性用于调整网格项在容器中的水平和垂直对齐方式。

4. grid-template-areas

这个属性允许我们为网格区域命名，从而更容易地控制网格项的位置。

5. repeat() 函数

网格非常多，需要为每个网格设置宽高，非常麻烦。

repeat(arg1, arg2) 。arg1 表示行或列的数量。arg2 表示网格的大小。

.container {display: grid;grid-template-columns: repeat(2, 40px 60px 80px);grid-template-rows: repeat(2,50%);background-color: #ccc;
}

6. fr 单位

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。

.container {width: 300pxdisplay: grid;grid-template-columns: 1fr 2fr 1fr;background-color: #ccc;
}

第二列的宽度为固定的100px，第三列的宽度是第一列的2倍。

.container {display: grid;width: 300px;grid-template-columns: 1fr 100px 2fr;background-color: #ccc;}

7. minmax()

该函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

上面代码表示第三列宽度不小于100px, 不大于 1fr

8. auto

自适应

.container {width: 300pxdisplay: grid;grid-template-columns: 50px auto 50px;
}

9. auto-fill、auto-fit
aut-fill 和 auto-fit 自适应与自填充，一般用来实现自适应布局的。

.container {display: grid;grid-template-columns: repeat(auto-fill, 100px);
}

5. 圣杯布局

圣杯布局是三列布局，我们需要一个容器 wrapper 包裹所有的内容，并包含 middle (中间内容区域), left (左侧栏), 和 right (右侧栏) 三个主要区域。注意 HTML 结构中必须将 middle 放在最前面，以便优先加载。中间宽度自适应，两边定宽，主要是采用浮动 + 定位实现圣杯布局。

将主要内容、左边、右边都设置位左浮动，并且设置主要内容部分宽度100%，左右两边定宽。

    /*  通用样式 */body {margin: 0;padding: 0;}.wrapper {overflow: hidden; /* 清除浮动，并解决margin塌陷 */}.content {float: left;width: 100%; /* 占据父容器全部宽度 */}.left {float: left;width: 200px;}.right {float: left;width: 200px;}/*  为了方便查看效果 */.content {background-color: #eee;padding: 20px;height: 200px;box-sizing: border-box; /* 包含 padding 和 border */}.left, .right {background-color: #ddd;height: 200px;padding: 20px;box-sizing: border-box;}

上面css样式设置后效果如下，可以看到中间内容部分独占一行。

接下来需要把最外层的父容器(wrapper) 部分设置设置左右边距，放置左右侧盒子腾出空间。

将左右两边的盒子定位到预留的位置中

左边部分：负 margin-left 的百分比值是相对于父元素的宽度计算的，这里将左侧栏拉到最左侧。

右边部分：负 margin-left 的固定值，将右侧栏拉到中间内容区域的右侧。

6. 双飞翼布局

双飞翼布局是另一种经典的网页布局方式，与圣杯布局类似，同样实现了左右两侧固定宽度，中间内容区域自适应的三栏布局。双飞翼布局和圣杯布局的核心思想是一样的：让中间内容区域优先加载，并且保证三栏居中对齐。它们的不同之处在于实现的方式，双飞翼布局使用 margin 负值和 padding 来实现。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>双飞翼布局</title><style>* {margin: 0;padding: 0;}.wrapper {width: 100%; /* 容器设置为100%*/}.middle {float: left;width: 100%;background-color: darkkhaki;}/* 这就是与 圣杯布局最大的差别，这里需要在中间容器额外内嵌一个块级元素，设置外边距为左右两边占位*/.content {margin: 0 200px; /* 左右margin，为侧边栏预留空间 */}.left {float: left;width: 200px;margin-left: -100%;}.right {float: left;width: 200px;margin-left: -200px;}/* 为了方便查看效果 */.content {background-color: #eee;padding: 20px;height: 200px;box-sizing: border-box; /* 包含 padding 和 border */}.left, .right {background-color: #ddd;height: 200px;padding: 20px;box-sizing: border-box;} </style>
</head>
<body><div class="wrapper"><div class="middle"><div class="content">中间</div></div><div class="left">左边</div><div class="right">右边</div></div>
</body>
</html>