【CSS】CSS常见布局

布满荆棘的人生 2023-03-14 13:11 19阅读 0赞

### 目录 ###

*   *   *  1. 居中布局
         *   *  1.1 水平居中布局
             *  1.2 垂直居中布局
             *  1.3 居中布局（水平+垂直）
         *  2. 多列布局
         *   *  2.1 两列布局
             *  2.2 三列布局
             *  2.3 等分布局
             *  2.4 等高布局
             *  2.5 多列布局
         *  3. 全屏布局

**前言：** 以前也了解过很多布局的方式，但是没有一个系统性的总结，所以用这篇博客来总结一下CSS布局。

### 1. 居中布局 ###

#### 1.1 水平居中布局 ####

**概念：** 水平居中对齐就是当前元素在父级元素容器中，水平方向是居中显示的。  
![在这里插入图片描述][20200518101238434.png]  
**实现方式：** 对于水平居中布局，有三种常见的实现方式，下面来一一列举：

**1. `inline-block` \+ `text-algin`**

*  `text-algin`是为文本内容设置对齐方式
 *  `display`属性的属性值有：`block` 块级元素，`inline` 内联元素，`inline-block` 行内块级元素，因为内联元素对于`text-align`是有效的，所以`inline-block`对其也是有效的

**特点：** 这种方式的浏览器兼容性比较好，但是`text-align`属性具有继承性，所以内部文本也会居中对齐。

**2. `table` \+ `margin`**

**特点：** 只要对子级设置就可以实现居中布局的效果，但是如果子级元素脱离文档流，会导致`margin`属性失效。

注：当元素设置为浮动`float`时，会脱离文档流，当设置为绝对定位、相对定位时也会脱离文档流。

**3. `absolute` \+ `transform`**

**特点：** 父级元素无论是否脱离文档流，都不会影响子级元素的水平居中布局效果，但是由于`transform`属性是CSS3中新增的属性，所以兼容性可能不是太好。

#### 1.2 垂直居中布局 ####

![在这里插入图片描述][20200518103600291.png]  
垂直居中对齐的实现方式，这里主要列举其中两种：  
**1. `table-cell` \+ `vertical-algin`**

*  `display`属性值设置为`table-cell`时，就是把当前的元素设置为一个表格的单元格
 *  `vertical-algin` 属性用于设置文本内容的垂直方向对齐方式

**特点：** 这种方案的兼容性比较好，但是`vertical-algin`属性有继承性，会导致父级元素的文本内容也是居中显示。

**2. `absolute` \+ `transform`**

**特点：** 父级元素无论是否脱离文档流，都不会影响子级元素，但是由于`transform`属性是CSS3中新增的属性，所以兼容性可能不是太好。

#### 1.3 居中布局（水平+垂直） ####

![在这里插入图片描述][20200518111305991.png]  
居中布局的实现方式主要是以上两种布局方式的组合，下面来列举其中两种组合：

**1. `table` \+ `margin`实现水平方向居中，`table-cell` \+ `vertical-algin`实现垂直方向居中**

**2. `absolute` \+ `transform`实现水平方向和垂直方向居中**

### 2. 多列布局 ###

#### 2.1 两列布局 ####

我们来实现两列布局，它的左侧是固定宽度，右侧自适应：  
![在这里插入图片描述][20200518160313342.png]  
**1. `float` \+ `margin`**

**特点：** `margin`必须与定宽的`width`相等，耦合。

**2. `float` \+ `overflow`**

`overflow` 开启了BFC模式，开启之后，当前元素的内部环境与外界完全隔离，BFC不会重叠浮动元素。

**BFC**指式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

**形成BFC的条件**：

*  浮动元素，`float` 除 `none` 以外的值；
 *  定位元素，`position`（`absolute`，`fixed`）；
 *  `display` 为以下其中之一的值 `inline-block`，`table-cell`，`table-caption`；
 *  `overflow` 除了 `visible` 以外的值（`hidden`，`auto`，`scroll`）；

**特点：** `overflow`虽然解决了两列布局的问题，但是同时设置了溢出的情况

**3. Flex布局**

**4. 表格布局**

现在表格布局使用较少了，所以不做过多的阐述

#### 2.2 三列布局 ####

三列布局主要是两侧固定宽度，中间部分自适应

**1. 圣杯布局**

圣杯布局和普通三栏布局有一定的区别，普通三列布局是按顺序写三列，而圣杯布局是先写中间部分，进行优先加载，在写两侧的部分。  
![在这里插入图片描述][20200518212855205.png]

**2. 双飞翼布局**

双飞翼布局是基于圣杯布局进行的优化，实现步骤如下：

*  left、center、right三种都设置左浮动
 *  设置center宽度为100%
 *  设置负边距，left设置负边距为100%，right设置负边距为自身宽度
 *  设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度

#### 2.3 等分布局 ####

![在这里插入图片描述][20200518221536685.png]

等分布局是指把页面分为若干列，每一列的宽度相等，我们用以下方式来实现等分布局：

**1. `float` 浮动**

**2. 表格布局**

**3. `flex`布局**

#### 2.4 等高布局 ####

等高布局是指子元素在父元素中高度相等的布局方式。（高度是由内容撑起来的）  
![在这里插入图片描述][20200519165929111.png]  
**1. 表格布局**

**2. 伪等高布局**

这种方式实现的布局是伪等高布局，它的工作原理是：使用 `padding-bottom: 9999px` 会让三个盒子拉伸的非常高，然后利用 `margin-bottom: -9999px` 将各个元素切割掉 9999px，最后父元素将超出的部分隐藏

#### 2.5 多列布局 ####

CSS3中多列布局使用`column`属性来实现，它有以下属性：

*  `column-count`属性:定义列的数量或者允许的最大列数，它的属性值：

（1）`auto` : 默认值，用于表示列的数量由其他CSS属性决定  
（2）`number` ：必须是正整数，用于表示定义列的数量

*  `column-width`属性:定义列的宽度，它的属性值：

（1）`auto` ：默认值，用于表示列的宽度由其他CSS属性决定  
（2）`length` ：必须是正整数，用于表示定义列的宽度

*  `column-gap`属性：用于设置列与列之间的间距，该属性需要为多列显示时的元素设置

（1）`normal` ：用于表示使用浏览器定义列的默认间距，默认值为1em  
（2）`length` ：必须是正整数，用于表示定义列之间的间距

*  `column-rule`属性：用于定义列与列之间的边框，其中包括边框宽度、边框颜色以及边框样式

（1）`column-rule-width`属性：用于表示列与列之间的边框宽度  
（2）`column-rule-color`属性：用于表示列与列之间的边框颜色  
（3）`column-rule-style`属性：用于表示列与列之间的边框样式

*  `column-span`属性：用于定义一个列元素是否跨列

（1）`none` :用于表示元素不跨列  
（2）`all`:用于表示元素跨所有列

*  `column-fill`属性：用于定义列的高度是由内容决定,还是统一高度

（1）`auto` : 默认值，用于表示列的高度由内容决定  
（2）`balance` : 用于表示列的高度根据内容最多的一列高度为准![在这里插入图片描述][20200519172231122.png]

### 3. 全屏布局 ###

全屏布局就是指HTML页面铺满整个浏览器窗口, 并且没有滚动条而且还可以跟随浏览器的大小变化而变化。

![在这里插入图片描述][20200519175403394.png]  
使用定位来实现：

后面有时间还会在总结一下网格布局的相关的知识~

[20200518101238434.png]: /images/20230312/9c6e2a3e81c94a029b5519e3a65be8bc.png?
[20200518103600291.png]: /images/20230312/f199dab40f624d35977bec7bc2452800.png?
[20200518111305991.png]: /images/20230312/a05401ada9074978bd4b943a6cd19a64.png?
[20200518160313342.png]: /images/20230312/bdacc9df84d04de2b25904c8a7bf1c9a.png?
[20200518212855205.png]: /images/20230312/5e8daf90b97d4a098f293c365d0f6b5d.png?
[20200518221536685.png]: /images/20230312/d3411e94a5304e25bec7a8bfbcaa0158.png?
[20200519165929111.png]: /images/20230312/d30a23500ac249b397b537a58115f891.png?
[20200519172231122.png]: /images/20230312/888ab8455f7c4463a9597fb178451f99.png?
[20200519175403394.png]: /images/20230312/f2899e20dee14932a24c347ceb8233bf.png?