1 概述

在Web开发中，页面布局是一个至关重要的方面。合理的布局能够使页面更加美观、易读，同时提升用户体验。本文将为您汇总CSS布局技巧，如浮动、定位、弹性盒子布局等，以及写出它们的应用场景和实操实践。

1.1页面布局时需要考虑的方面

要有整体意识
从外向内，层层递进
模块化
命名规则

1.2 网页栏目的划分

网站的主页主要包括以下几个区域：页头、banner、导航区域、内容、页脚。
页头：网页的页眉，主要作用是定义页面标题。
banner：banner横幅广告，可有可无，不一定放在页头，也可以在其他区域，banner也不一定放置的就是广告，也可以是其他内容。
导航区域：通过导航区域可以看出网站的定位，也不是所有的网站都有导航区域。导航区域通常以导航条的形式出现，导航条大致分为：横向导航条、纵向导航条、菜单导航条。
内容：具体内容。
页脚：网站最下面，通常用来展示版权信息、法律声明信息、网站备案信息、联系方式等等

2 浮动（Float）布局技巧

2.1浮动的含义

浮动的框可以向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档普通流中，所以文档普通流中的块元素表现得就像浮动框不存在一样。

2.1.1浮动的应用场景

实现多列布局：将多个块级元素浮动到一行，形成多列布局。
图片环绕文字：实现文字围绕在图片周围的效果。

2.2 溢出和剪切

visible: 当开发人员将矩形对象的overflow属性设置为visible时，如果内容区域的大小能够容纳子矩形对象，浏览器会正常显示子矩形对象;当内容区域无法容纳子矩形区域时，浏览器会在内容区域之外显示完整的子矩形对象。
hidden:当开发人员将矩形对象的overflow属性设置为hidden时，如果内容区域的大小能够容纳子矩形对象，浏览器会正常显示子矩形对象;当内容区域无法容纳子矩形区域时，浏览器会显示内容区域之内的子矩形对象，超出内容区域的则不显示。
seroll: 当开发人员将矩形对象的overflow属性设置为scroll时，如果内容区域的大小能够容纳子矩形对象，浏览器会正常显示子矩形对象，并且显示预设滚动条;当内容区域无法容纳子矩形区域时，浏览器会在内容区域之内显示完整的子矩形对象，同时显示滚动条并启用滚动条功能，让用户能够通过滚动条浏览完整的子矩形对象。
auto: 当开发人员将矩形对象的overflow属性设置为auto时，如果内容区域的大小能够容纳子矩形对象，浏览器会正常显示子矩形对象;当内容区域无法容纳子矩形区域时，浏览器会在内容区域之内显示完整的子矩形对象，同时显示滚动条并启用滚动条功能，让用户能够通过滚动条浏览完整的子矩形对象。

2.3 对象的显示与隐藏

在CSS中，display属性设置一个元素如何显示，visibility属性指定一个元素可见还是隐藏。隐藏一个元素可以通过把display属性设置为none ,或把visibility属性设置为hidden。这两种方法会产生不同的结果。

3 定位（Positioning）布局技巧

3.1定位的含义

允许定义某个元素脱离其原来普通文档应该出现的正常位置，而是设置其相对于父元素、某个特定元素或浏览器窗口本身的位置。利用定位属性，可以建立列式布局，将布局的一部分与另一部分重叠，这种方法可以完成原来需要使用多个表格才能完成的任务，这种使用CSS定位的好处是可以根据浏览器窗口的大小进行内容显示的自适应。

3.1.1定位的应用场景

创建覆盖效果：如弹出框、下拉菜单等。
实现层叠布局：让元素在三维空间中自由定位，创建立体效果。

3.2定位的四个属性

static(静态定位)
relative(相对定位)
absolute（绝对定位）
flex（固定定位）

3.2.1静态定位

静态定位是元素默认的定位方式，是各个元素在HTML文档流中的默认位置:在静态定位方式中，无法通过位置偏移属性来改变元素的位置

3.2.2相对定位

相对定位是普通文档流的一部分，相对于本元素在文档流原来出现位置的左上角进行定位，可以通过位置偏移属性改变元素的位置。虽然其移动到其他位置，但该元素仍占据原来未移动时的位置，该元素移动后会导致其覆盖其他的框元素。

3.2.3绝对定位

绝对定位是脱离文档流的，不占据其原来未移动时的位置，是相对于父级元素或更高的祖先元素中有relative (相对)定位并且离本元素层级关系上最近元素的左上角进行定位。如果在祖先元素中没有设置relative定位时，就默认相对于body进行定位

3.2.4固定定位

固定定位是绝对定位的一种特殊形式，是以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。当对元素设置固定定位后，该元索将脱离标准文档流的控制，始终依据浏览器窗口的左上角来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

3.3 实操实例


```js
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="steven" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		P{
			border: solid 5px yellow; 
			text-align: left; /* 左对齐 */
			width: 100px;
			height: 55px;
		}
	</style>
</head>
<body>
<p>11111</p>
</body>
</html>

3.4 定位元素的层叠顺序

多个块元素形成多个层。可以使用z-index属性对这些层进行层叠设置。
z-index属性设置一个定位元素沿z轴的位置, z轴定义为垂直延伸到显示区的轴。如果为数，则离用户更近，为负数则表示离用户更远。即拥有z-index属性值大的元素放置顺序在上。
注意：元素可拥有负的z-index属性值、而且z-index仅能在绝对定位元素(例如position:absolute;)上起作用。

4 弹性盒子（Flexbox）布局技巧

4.1 弹性盒子的含义

弹性盒子是一种 CSS3 引入的布局模式，也被称为 Flexbox。它由弹性容器和弹性子元素组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex 来定义，而弹性子元素则放置在弹性容器内部。弹性盒子提供了一种灵活的布局方式，可以让元素在不同的屏幕尺寸和设备下预测性

4.1.1 弹性盒子的应用场景

创建动态布局：让元素随着容器的大小调整而自动适应。
实现等高列布局：让多个列高度自动保持一致。

CSS布局技巧 | 青训营