CSS样式操作大全——常用情景篇

水深无声 2021-07-24 14:06 479阅读 0赞

# CSS样式操作大全——各种情景篇 #

**目录**

CSS样式操作大全——各种情景篇

1、居中相关布局

1.1 水平居中

1.2 垂直居中布局

1.3 水平垂直居中布局

1.4 使用flex居中布局

2、N列布局

2.1 两列布局

2.2 三列布局

2.2.1 普通三列布局

2.2.2 圣杯布局

2.2.3. 双飞翼布局

2.2.4. flex布局实现（中间自适应，左右等宽）

2.3 多列等分布局

2.4 多列等高布局

3. 全屏布局

--------------------

# 1、居中相关布局 #

## 1.1 水平居中 ##

效果如下：

![20200420084135113.png][]

**方案1：inline-block  +text-align**

分析：设置dispaly为inline-block，使元素具有文本元素的性质，其父元素可以设置文本对齐熟悉text-align来控制对齐方式。

注意：text-align具有继承性，导致其内部所有元素都是居中显示，不要居中的需要再写text-align覆盖。

代码：

**方案2：定位+transform**

分析：父元素开启定位后，子元素设置绝对定位absolute后，left设置为50%，再使用transform：`translateX(-50%)`将子元素往反方向移动自身宽度的`50%`，便完成水平居中。

注意：transform是CSS3属性，存在浏览器兼容问题。

代码：

.wrap {
            position: relative;
            width: 100%;
            height: 200px;
            background-color: aqua;
        }
        .content {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }

**方案3：`display: block` + `margin: 0 auto`**

`分析：对子元素进行设置，margin设置auto表示浏览器自动分配，实现外边距等分效果`

`注意：这里子元素设置dispaly为block或者table都是可以的，如果子元素脱离文档流（浮动、定位）会导致margin属性无效`

`代码：`

.wrap {
            width: 100%;
            height: 200px;
            background-color: aqua;
        }
        .content {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            display: table;
            margin: 0 auto;
        }

## 1.2 垂直居中布局 ##

效果如下：

![20200420085451466.png][]

**方案1：定位+transform**

分析：类似水平居中原理

代码：

.wrap {
            position: relative;
            width: 200px;
            height: 600px;
            background-color: aqua;
        }
        .content {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }

**方案2：display：table-cell  +vretical-align：middle**

分析：设置了display为table-cell的元素具有td元素的行为，它的子元素布局方式类似文本元素

代码：

.wrap {
            display: table-cell;
            vertical-align: middle;
            width: 200px;
            height: 600px;
            background-color: aqua;
        }
        .content {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }

## 1.3 水平垂直居中布局 ##

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70][]

**方案1：定位position+transform：translate(-50%, -50%)**

代码：

.wrap {
            position: relative;   //父元素定位
            width: 1200px;
            height: 800px;
            background-color: aqua;
        }
        .content {
            position: absolute;   //子元素定位
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);   //子元素移动
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }

**方案2：结合水平布局方案3，垂直布局方案2**

代码：

.wrap {
            display: table-cell;
            vertical-align: middle;
            width: 1200px;
            height: 800px;
            background-color: aqua;
        }
        .content {
            margin: 0 auto;
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }

## **1.4 使用flex居中布局** ##

分析：使用flex，默认情况下，align-items：center垂直居中，`ustify-content: center`水平居中（主轴排列方式）

注意：需要考虑浏览器兼容性问题。

代码：

.wrap {
             display: flex;
             align-items: center;
             justify-content: center;
             width: 1200px;
             height: 800px;
             background-color: aqua;
         }
         .content {
             width: 200px;
             height: 200px;
             background-color: blueviolet;
         }

# 2、N列布局 #

## 2.1 两列布局 ##

场景描述：两列布局，一列（比如左侧）是定宽，另外一列（右侧）自适应

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1][]

**方案1：左边元素浮动，定宽，右边元素设置`margin-left`**

分析：左边元素设置浮动，定宽度，右边不设置浮动，右边元素的`margin-left`设置为左边元素宽度大小，可以实现效果。

代码：

.l, .r {
            height: 600px;
        }
        .l {
            width: 400px;
            background-color: aqua;
            float: left;
        }
        .r {
            background-color: blueviolet;
            margin-left: 400px;
        }

**方案2：左边元素浮动，定宽，右边元素设置overflow：hidden**

分析：

注意：`overflow:hidden`的设置也使得右边元素内容超出隐藏。这里如果不设置`overflow:hidden`，右边元素的宽度是100%，有一部分被左边浮动元素盖住，不是我们要的结果，虽然看起来没什么区别。

.l, .r {
            height: 600px;
        }
        .l {
            width: 400px;
            background-color: aqua;
            float: left;
        }
        .r {
            background-color: blueviolet;
            overflow: hidden;
        }

**方案3：将左右元素用一个display：table的元素包裹，左右元素设置为display：table-cell**

分析：这里主要是基于表格元素，在没有设置宽度时，会自动分配宽度来实现布局的。

注意：设置为表格后，在某些浏览器可能会受到表格本身特有行为的影响，比如表格边框等等。

**方案4：felx布局**

分析：父容器采用felx布局，左边元素定宽之后，右边元素因为只有一个，所以flex属性设置为不是0的正直，都会沾满剩余空间。

注意：浏览器兼容问题

## 2.2 三列布局 ##

三列布局有三种情况，普通三列布局、圣杯布局、双飞翼布局（后两者都是实现两侧宽度固定，中间宽度自适应的三列布局，区别在于双飞翼布局比圣杯布局，中间元素会多个子元素，而左右元素需要定位relative）。

### 2.2.1 普通三列布局 ###

左中两列定宽，右边自适应。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 2][]

**方案1：定宽+overflow：hidden**

分析：原理类似于两列布局方案2

代码：

**方案2：flex布局**

### 2.2.2 圣杯布局 ###

两侧宽度固定，中间宽度自适应的三列布局（`中间元素不需要嵌套子元素`）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 3][]

**方案1：左右两侧浮动，中间元素使用`margin`**

分析：这种方法就是左右两边浮动，给定宽度，中间元素使用`margin`空出左右两边元素的位置，实现比较简单。

注意：这种方式，需要在书写`html`结构时，将右侧元素写在中间元素的前面，因为如果右侧元素在中间元素后面，由于浮动元素位置上不能高于（或平级）前面的非浮动元素，导致右侧元素会下沉。但是，中间元素一般都是页面的核心部分，放在比较后面的位置，不利于`SEO。`

**方案二. 父容器使用`margin`，左中右元素均浮动，利用定位和`margin`移动到正确位置**

分析：这种方法将中间元素c放置在最前面，有利于`SEO`。

注意：实现细节在参考下面代码中的注释。

### **2.2.3. 双飞翼布局** ###

两侧宽度固定，中间宽度自适应的三列布局（`中间元素内部增加子元素用于放置内容`）

**方案一. 中间元素子元素设置`margin`，左中右元素均设置浮动，左右元素通过`margin`移动到正确位置**

分析：这种方法为中间元素增加子元素作为内容区域，通过子元素设置`margin`完成。

注意：和圣杯布局对照，有相似处，也有不同，实现的结果是一样的。

### **2.2.4. `flex`布局实现（中间自适应，左右等宽）** ###

分析：`flex`实现就很简单了，可以参照普通三列布局`flex`实现。

注意：还是要注意浏览器兼容性问题。

## **2.3 多列等分布局** ##

所谓多列等分布局，就是若干列在容器中自适应等分宽度，我们以五列等分布局为例。

**方案一. 浮动 + 百分数平分**

分析：这种方案就是每一列浮动，之后按照百分比平分宽度，实现简单。

**方案二. 使用****`display: table`布局**

分析：父容器指定`display: table`，设置布局行为`table-layout: fixed`，指定每个表格等宽。

注意：`table-layout: fixed`是需要设置的，默认情况下，列宽度由单元格内容设定，设置之后，列宽由表格宽度和列宽度设定

**方案三. 使用`column`布局**

分析：使用`column`布局，指定内容区域需要分为5列即可。

注意：浏览器兼容性问题。

**方案四. 使用`flex`布局**

分析：使用`flex`布局十分简单，指定每一列所占空间相同即可

## **2.4 多列等高布局** ##

所谓多列等高布局，就是多类内容可能不一样，但是保证每一列的高度是相同的，`这个高度应该由内容最多的那一列决定`

**方案一. 使用`display: table`布局**

分析：父元素设置`display: table`，子元素设置`display: table-cell`，这样布局就是按照表格行为布局，表格单元格默认等高

**方案二. 使用`flex`布局**

分析：默认情况下，`display: flex`的元素`align-items`属性值为`stretch`，如果项目未设置高度或设为auto，将占满整个容器的高度。

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

所谓全屏布局，就是实现经典的头部，内容区，底部三大区域占满全屏的布局，这种布局很常见。

实现效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 4][]

分析：这里采用的方案是，头部底部使用fixed定位，中间使用之前讲到的两列布局技术。

注意：头部底部可以使用`header, footer`标签，内容区域结构与布局都是多种多样的。

[20200420084135113.png]: /images/20210724/5b171c0fe2e04572800a501555e446be.png
[20200420085451466.png]: /images/20210724/c023b265f1ca41f6a20f8bf830f959a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]: /images/20210724/0b77066a60c64be482c1bf1faff2a115.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1]: /images/20210724/fc336e15caf64d11b31d5f703351378b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 2]: /images/20210724/3e42d56f5bfe4b12b96b4854039facd7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 3]: /images/20210724/eea5c15957b1435b8cd7142c5d4a63ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 4]: /images/20210724/a48769c0aeb74479878dac4ecf55af4b.png