CSS布局汇总

妍思码匠

已于 2023-07-21 18:48:48 修改

阅读量405

点赞数 1

分类专栏：笔记-CSS3 文章标签：前端

于 2023-07-10 21:10:32 首次发布

本文链接：https://blog.csdn.net/wjs0406/article/details/131574717

版权

笔记-CSS3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一，常见的css布局方式

float浮动布局 - 传统布局方式之一，需要清除浮动
position定位布局 - 传统布局方式之一，利用定位属性辅助布局
flex弹性布局 - 当前最流行的
grid网格布局 - 兼容相对较差
column多列布局 - 类似于仿报纸的多栏结构布局

二，float布局

他是早期最常见的布局，使用需要注意以下几点：

1，他是脱离文档流的布局方式，设置float属性会使元素从文档流中移除，因此周围的元素会重新排列适应他的位置，很容易导致父元素高度坍塌，因此开发时需合理设计

2，使用之后需要通过clear属性清除浮动

1）浮动的后一个元素直接使用clear: left/right属性

2）定义一个额外的空div，使用clear: both属性

3）给父元素添加overflow: hidden属性

4）给父元素设置高度height

5）使用伪类 .father:after {

content: '';

display: block;

height: 0;

clear: both;

visibility: hidden;

}

三，position定位布局

position的属性值有5个：static、relative、absolute、fixed、sticky

3.1 static（默认值）

静态定位，即无任何定位（相当于border中的none）。通常不需要设置

3.2 relative

相对定位，相对于元素本身原来在文档流中的位置进行定位。

使用left、right、top、bottom属性：

是根据当前元素的自身原本的位置进行定位，并不影响其他元素！！！

3.3 absolute

绝对定位，相对于有定位（非static）的最近的父（祖先）元素进行定位，如果所有（父）祖先元素均没有定位，则相对于浏览器document文档进行定位。

解析：

1，absolute和float一样，也脱离了文档流，进入浮动状态。因此二者只能出现一个。

2，absolute会摆脱overflow的限制。

3，大部分人容易混淆的部分，他并不是只相对于relative定位，如果父元素设置了absolute，他也是相对于父元素进行定位，也叫“子绝父绝”。

4，因此并不只有“子绝父相”，所谓的“子绝父相”，只是因为以前在网页中布局的时候，子元素因为不占位置，所以父元素必须要设置相对定位才会使子元素正常的显示在父元素之中。同时父元素的relative限制住了子元素的位置，这时候子元素通过left、right、top、bottom设置的属性值永远不会超出父元素。

使用场景：

1，可以通过left、right、top、bottom来控制位置，可以是像素，可以是百分比。

2，可以通过margin来控制位置。

3，如果多个子元素设置了绝对定位，可以通过设置z-index来控制层级，如果不设置z-index，则后来居上（后面的元素在上层）。

4，无依赖的绝对定位。如果设置了父元素相对定位，则缺点是对于父元素过度依赖，一旦父元素改变，则样式必定错乱，而且需要根据left、top等偏移量去计算。因此可以使用无依赖的绝对定位。使用方式：

原理：利用元素的跟随性，配合margin来实现。元素的跟随性是指无论元素是什么类型（block、inline、inline-block），该元素原来处于什么位置，设置了absolute之后依然处于什么位置。

（例如：如果是div元素独占一行，设置了absolute之后依然独占一行；如果是span行内元素紧随前面元素之后，设置了absolute之后依然是行内元素紧随前面元素之后）

实例场景：

（1）原地不动，覆盖别人

（2）尾部跟随，不占空间

优点：

不依赖父元素，不需要父元素设置position:relative
不需要设置left、top等属性

3.4 fixed

固定定位，相对于浏览器可视窗口进行定位，脱离文档流。跟父元素没有任何关系，也不随滚动条滚动。

3.5 sticky

黏性定位，相当于relative和fixed定位的结合。动态固定定位。必须搭配一个位置属性（left、top、right、bottom），否则与relative定位效果一致。

原理：

默认相当于relative定位，当页面滚动到父元素脱离视口部分不可见时，只要距离达到阈值，由relative自动转换成fixed定位，当父元素完全不可见时，再自动转换为relative定位。

四，flex弹性布局

4.1 概念

使用flex定位的容器会有两个轴，水平的主轴main axis、垂直的交叉轴cross axis。

主轴的起始位置为main start、结束位置为main end；

交叉轴的起始位置为cross start、结束位置为cross end。

flex的子元素中，占据的主轴空间为main size；占据的交叉轴空间为cross size。

4.2 注意

CSS3的新增特性，但只兼容IE10版本以上的浏览器
设置了flex布局后，子元素的float、clear、vertical-align属性将会失效
webkit内核浏览器，必须加上-webkit前缀

stretch（默认值） - 轴线占满整个交叉轴
flex-start - 与交叉轴的起点对齐
flex-end - 与交叉轴的结束点对齐
center - 与交叉轴的中点对齐
space-between - 与交叉轴的两端对齐，各轴线之间的间隔相等
space-around - 各轴线两侧的间隔相等

4.4 子元素的属性（共6个）

4.4.1 order

属性作用：

设置每个子元素的顺序

属性值：

默认为0。数字越小顺序越靠前

4.4.2 flex-grow

属性作用：

指父容器剩余空间多余的时候，子容器的增长比例。

属性值：

默认为0 - 多余空间不分配

计算公式：

子元素增长的width = 子元素grow / 所有子元素grow的总和 * 父元素剩余空间的width

父元素剩余空间的width (即父元素width - 所有子元素width总和)

计算规则：

单个子元素：

0：不分配，默认为子元素的本身宽度

>= 1：占满整个容器

0~1之间：比较少见。比如父元素500px，子元素100px，flex-grow: 0.1。

子元素实际宽度变为400 * 0.1 + 100px = 140px，多余空间剩余

多个子元素：

0：同上，多余的空间不分配，默认为每个子元素的本身宽度

所有子元素相加之和>1： 占满整个容器，每个子元素再按比例分配

所有子元素相加之和在0~1之间： 每个子元素按比例伸缩，多余空间剩余

4.4.3 flex-shrink

shrink读音[ʃrɪŋk]。

属性作用：

指父容器剩余空间不足的时候，子容器的缩小比例。

属性值：

默认为1 - 空间不足每个子元素按相同的比例缩小

注意：

此属性生效的前提是父属性的flex-warp: nowarp;

计算公式：

子元素收缩的width = (子元素width * 子元素shrink) / (所有子元素width * shrink的总和) * 父元素超出部分的width

超出父元素的width（即所有子元素width总和 - 父元素width）

4.4.4 flex-basis

属性作用：

设置子容器在不伸缩的情况下的原始尺寸（主轴为水平时代表宽度，主轴为垂直时代表高度）

属性值：

默认为auto（正常可以设置为像素、或者百分比。eg：flex-basis: 150px;）

4.4.5 flex

属性作用：

是flex-grow、flex-shrink、flex-basis三个属性的简写形式

属性值：

默认值为0 1 auto;

两个快捷属性值：

auto （1 1 auto;）

none（0 0 auto;）

官方语法：

none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

解析：

1）根据竖线|语法可知，有两种值：

        flex: none;
        flex: flex-grow flex-shrink flex-basis;

2）根据双竖线语法||可知，也有两种值：

        flex: flex-grow flex-shrink;

        flex: flex-basis;

3）问号？表示0或者1，也就是'flex-shrink'可有可无，因此又多出两种值，针对（1）中的第二种和（2）中的第一种：

flex: flex-grow flex-basis;

flex: flex-grow;

总结如下：

none
flex: flex-grow;
flex: flex-basis;
flex: flex-grow flex-shrink;
flex: flex-grow flex-basis;
flex: flex-grow flex-shrink flex-basis;

4.4.6 align-self

属性作用：

单独对子元素设置对齐的方式。允许某子元素与其他子元素的对齐方式不同。

注意：

如果不设置（默认值auto），则继承父元素的align-items属性（如果没有父元素，等同为stretch）；如果设置，则覆盖父元素的align-items属性。

属性值：

auto（默认值） - 继承父元素的align-items属性（交叉轴对齐方式）
stretch - 如果容器没有设置高度或auto，默认占满容器整个高度
flex-start - 交叉轴的开始方向对齐
flex-end - 交叉轴的结束方向对齐
center - 交叉轴的中点对齐
baseline - 按第一行文字的基线对齐

五，grid网格布局

5.1 概念

理解网格布局：

flex是一维布局，一次只能处理一行或者一列。

grid是二维布局，将网页分成行和列的网格，可以精准的控制每个网格的大小和位置，适合复杂的页面布局。

网格布局使用css控制，他也实现了脱离文档流，布局更加随心所欲。

基本概念：

网格线（grid Lines）- 网格水平和垂直的分界线

网格轨道（grid Track）- 由相邻的网格线组成的一个水平轨道（grid row）或者垂直轨道（grid column）

网格单元格（grid cell）- 4条网格线之间的空间，组成的最小单元格，类似于table中的单元格

网格区域（grid area）- 由任意4条网格线组成的空间，可以是一个或多个单元格

5.2 使用的属性

5.2.1 设置网格布局

display: grid; 或 display: inline-grid;

5.2.2 行列轨道属性

用来定义网格轨道的大小和数量

grid-template-rows - 网格容器中的每行轨道的高度
grid-template-columns - 每列轨道的宽度，同上类似

属性值：

可以使用px单位固定宽高（eg：grid-template-columns：10px 20px 10px;）

也可以使用fr单位自适应宽高（eg：grid-template-columns: 1fr 1fr 1fr; 将网格容器划分成三个相等的列）

fr是相对单位，用来表示网格容器中可用空间的占比，类似于flex。

也可以使用不同单位混合使用（eg：grid-template-columns: 10px 1fr 2fr;）

auto 自动填充可用空间（eg：grid-template-columns: 100px auto 100px;）

auto-fill 自动填充且可创建并填充可用空间（不同auto是网格不足时他可以自动创建）

        （eg：grid-template-columns: 100px 100px auto-fill;）

repeat函数 - 简化网格轨道定义过程。

        接受两个参数，第一个是重复次数，第二个是网格的大小

（eg：grid-template-columns: repeat(3, 100px); ）

使用minmax函数 - 创建行或列的最小或最大尺寸（eg：grid-template-columns: minmax(100px 200px) minmax(50px 200px);）

minmax函数接受俩参数，第一个是最小值，第二个是最大值

minmax计算规则：

                     1，如果容器总宽度 > 每列的宽度最大值的和：则取每列的最大值

             2，如果容器总宽度 < 每列的宽度最小值的和：取每列的最小值

             3，如果再二者之间：(1)取总容器的剩余空间宽度（总宽度 - 每列宽度最小值）

   (2)计算每列增长的宽度：剩余空间宽度 / 列的数量

   (3)每列实际宽度：每列原始宽度 + 每列增长的宽度

eg：按上面例子，假设设置了容器总的宽度300px。

(1)总容器剩余宽度：300 - 100 - 50 = 150px

(2)每列要增长的宽度：150 / 2 = 75px

(3)每列实际宽度：第一列：100px + 75px = 225px; 第二列：50px + 75px = 125px;

方括号[] - 设置属性每根网络线的名称。

        （eg：grid-template-columns：[col1] 10px [col2] 20px [col3] 10px; ）

5.2.3 网格间距属性

grid-column-gap（缩写为column-gap）：设置列间距
grid-row-gap（缩写为row-gap）：设置行间距
grid-gap（缩写为gap）：行、列间距简写形式。

为两个值，分别设置行、列间距；

为一个值，设置二者间距

5.2.4 网格方向属性

grid-auto-flow：指定容器的布局方式。属性值有：

row（默认值）- 先行后列方式

column - 先列后行方式

row-dense - 先行后列的基础下，尽量向前补位填满，不留空格

（例如有的div特别长，无法放到当前行尾部，只能放到下一行的开头，这样就导致

了当前行后面有空格；而如果后面的元素如果有宽度满足当前行空格的，优先补

位填满）

column-dense - 先列后行的基础下，尽量填满列，不留空格

5.2.5 单元格区域属性

grid-template-areas：定义网格区域的名称
grid-area：标记一个网格区域的元素名称
重复区域：可以使用同一个名称来实现跨区（eg：grid-template-areas: 'header header'）
空的轨道区域：可以使用点 . 来代表

eg：

.container {

    display: grid;
    grid-template-rows: 10px 10px 20px;
    grid-template-columns: 30px 30px 30px;
    grid-template-areas: 
        '. header header'
        'content content content'
        'footer footer .';
}

.header {
    grid-area: header;
}
.content {
    grid-area: content;
}
.footer {
    grid-area: footer;
}

5.2.6 网格对齐方式属性

justify-content：设置所有网格列在网格容器中的水平对齐方式
align-content：设置所有网格列在网格容器中的垂直对齐方式
place-content：justify-content和align-content的简写形式。

属性值：

start - 对齐容器的起始边框。水平方向靠左，垂直方向靠上
end - 对齐容器的结束边框。水平方向靠右，垂直方向靠下
center - 位于网格容器的中心。
space-bwetten - 每个网格的间距相等，但与容器边框之间没有间隔
space-around - 每个网格两边的间距相等
space-evenly - 每个网格两边的间距相等，距离容器边框的间隔也相等
stretch - 没有指定项目大小时，网格行或列被拉伸以占据整个网格容器

5.2.7 单元格内容对齐方式属性

justify-items：设置所有单元格内容的水平方向对齐方式
align-items：设置所有单元格内容的垂直方向对齐方式
place-items：justify-items和align-items的简写形式
justify-self：同justify-items，只是作用于单个元素
align-self：同align-items，只是作用域单个元素

属性值：

start - 位于网格容器的左侧/顶部
end - 位于网格容器的右侧/底部
center - 位于网格容器的中心。
stretch - 网格被拉伸以填充整个网格单元格
baseline - 网格的基线对齐

5.2.8 跨行/跨列属性

grid-column-start和grid-column-end：设置单元格跨域的列数
grid-row-start和grid-row-end：设置单元格跨越的行数
grid-column：grid-column-start和grid-column-end的简写形式
grid-row：grid-row-start和grid-row-end的简写形式

配合斜线/和关键字span，可以精确控制跨越的行数和列数

// 单独设置方式，从第2列开始，跨越3列
.main {
    grid-column-start: 2;
    grid-column-end: 6; // 要跨越3列，需要到后面第4个列截止
}

// 简写方式，从第2列开始，跨越3列
.main {
    grid-column: 2 / span 3;
}

5.3 显示和隐式网格

以上用grid-template-columns、grid-template-rows方式实现的是显示网格；

在网格容器内放置了超出数量的元素，所占的位置为隐式网格，为grid-auto-columns、grid-auto-rows为隐式网格设置大小。

用grid-template-areas属性设置的网格，会创建显示和隐式网格。其中定义的区域为显示网格，未定义的区域为隐式网格。

六，column多列布局

6.1 概念

通常对于文本内容进行多列布局的设置，进行布局之后的文本类似于报纸的多栏结构

6.2 常用属性

column-count - 值为数值，需要分割的列数。默认值是auto-根据列宽自动分栏
column-width - 列的宽度，默认值auto，自动分配
columns - column-width和column-count的简写形式（eg：columns: 30px 4;）
column-gap - 列与列的间距，默认值normal
column-rule - 列与列之间边框的样式规则，是column-rule-width，column-rule-style，column-rule-color的简写形式（与border类似）（eg：column-rule: 10px solid #666;）
column-span - 设置元素横跨的列数。数字-横跨的列数；none-不跨列；all-跨所有列

妍思码匠

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS布局汇总

他是早期最常见的布局，使用需要注意以下几点：1，他是脱离文档流的布局方式，设置float属性会使元素从文档流中移除，因此周围的元素会重新排列适应他的位置，很容易导致父元素高度坍塌，因此开发时需合理设计2，使用之后需要通过clear属性清除浮动position的属性值有5个：static、relative、absolute、fixed、sticky静态定位，即无任何定位（相当于border中的none）。通常不需要设置相对定位，相对于元素本身原来在文档流中的位置进行定位。使用left、right、top、bo
复制链接

扫一扫