【css】常见布局概述
本文将对css的常见布局方案进行概述,给大家提供系统化的布局解决方案参考。
一、流式布局
顾名思义,该布局基于dom的文档流进行布局,是最常用、最原始的布局方式。
其主要的布局单位是块级元素和内联元素,通过内联元素在行内水平方向上的显示特点、块元素从顶部开始垂直方向显示元素的特点,布局页面内容。
🌰举个例子
<div class="box1">
<p>段落一: <span>开始</span> </p>
<p>段落二</p>
</div>
<div class="box2">
<p>尾巴段落</p>
</div>
//------css------
//给box1文本段落添加边框
.box1 p {
border: 2px solid green;
}
span {
background-color: lightblue;
}
效果如下:
二、浮动布局
基于css属性float进行布局。元素设置完float属性后会脱离文档流,但是仍然保持部分流动性(即占据原来的文档位置,按照内联格式进行占据计算),并且其将允许其他的文本和内联元素环绕它。所以其最常用的场景是文本环绕图片、简单的多栏布局、左侧导航栏+内容 布局。
🌰举个例子
<div class="container">
<div class="box1"></div>
<span class="text">
我又一个文本在这里希望围绕围绕诶扰
</span>
<div class="box2"></div>
</div>
//------css------
.container{
width:250px;
height:250px;
border:1px solid black;
}
.box1 {
width:100px;
height:100px;
float:left;
border: 2px solid green;
}
.box2 {
width:100px;
height:100px;
float:right;
border: 2px solid green;
}
.text {
display:block;
}
效果如下:
如果此时text元素是个块级元素,设置clear属性(块级元素生效)可以清除浮动效果的影响,使得元素位于浮动元素所处那一行最上或者最下边框位置之外。
这里设置clear:both(左右浮动元素的效果都清除掉),效果如下:
三、定位布局
通常基于position属性的非static取值设置,来进行相对定位(relative
)、绝对定位(absolute
)、固定定位(fixed
)、和粘性定位(sticky
)。然后通过设置top、left、right、bottom设置偏移值来确定元素的位置。这些定位方式在不同场景中各有用途。常见的适用场景有:
- 弹出框或模态框
- 固定导航栏
- 侧边浮动工具栏
- 多层叠加的布局,利用定位元素下z-index生效的特性,叠加布局
四、弹性布局
基于css中的flex属性进行弹性布局。被设置了display:flex的元素成为弹性布局的容器,而其子元素变成弹性item项目,并且对于块级元素之后不再占据一整行。
适用场景:
- 响应式布局,利用弹性布局自动撑大、计算子元素之间的间隙的特性,来进行灵活布局
- 卡片布局
🌰列举一些常用的flex相关属性
可设置在弹性容器上的属性
- flex-direction:可取值row(水平方向上)、column(垂直方向上),决定元素排列方向
- flex-wrap:no-wrap(元素不换行,可能导致溢出flex容器)、wrap、wrap-reverse(反向)
- flex-flow:上面两个属性的简写
可设置在弹性子item上的属性
- flex-basis:flex 元素在主轴方向上的初始大小
- flex-grow:flex 增长系数
- flex-shrink:flex 缩小系数
- flex:上述三者的简写属性。
/* 三值:flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%;
应用例子:
<div id="default-example" class="default-example">
<div class="flex-el">I grow</div>
<div>Item Two</div>
<div>Item Three</div>
</div>
//---css ----
.default-example {
display: flex;
//交叉轴对齐方式
align-items: center;
//主轴对齐方式
justify-content:space-around;
border: 1px solid #c5c5c5;
width: 1000px;
max-height: 300px;
}
.default-example div{
width:200px;
background-color: rgba(0, 0, 255, .2);
border: 3px solid #00f;
margin: 10px;
}
.flex-el{
//等同于flex-grow:2
flex:2;
}
效果为:
五、网格布局
基于display:grid创建的网格容器来进行布局。其涉及的属性有点多,可以根据下面链接中列出的相关属性进行一一查询:
*在网格布局中涉及一个单位fr,其代表取某方向上被网格划分后的几份,并且每份的计算包含了网格之间的gap宽度,比人为设置具体数值的优点是保证刚好等分网格容器不会因为忽略gap值而溢出。
常用属性:
- grid-template-columns:容器被如何划分、划分为多少列
- grid-template-rows:容器被如何划分、划分为多少行
- grid-column:网格容器中的元素列上哪行到哪行(取值范围为grid-column-start到grid-column-end),用 / 分割
- grid-row:功能如上一条
- gap属性:设置水平/垂直方向上的网格间距
🌰举个栗子
下面为一个行高100px、列分为等分3列的网格容器【其他颜色和边框样式未给出】
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
//-----css------
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 3;
grid-row: 1;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
grid-row: 2 / 5;
grid-column: 1;
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2 / span 2;
grid-row: 4;
}
效果如下:
⚠️从上述应用可以得出几点注意!
- grid-column/row设置的起始号 / 结束号,如果超出范围,会取到最后一列的范围截止
- 如果对grid-column/row中的 / 后一个数字添加关键字span,代表跨越覆盖的行/列数。
- 如果没有特地对某个元素 比如上文的 six元素设置行列范围,则其值为auto,自动填补到网格容器中的空隙中。
六、多列布局
基于column-count这一css属性展开的布局,划分的列数具有弹性宽度(浏览器自动计算)。
参考链接:
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout
相关属性:
- column-count:列数,弹性宽度
- column-width:列宽,按照列宽划分尽可能多的列数
- column-gap:列间隙
- column-rule:列之间的分割线样式,是column-rule-style、column-rule-width、column-rule-color三者的简写属性
原文地址:https://blog.csdn.net/weixin_57208584/article/details/142452686
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!