CSS基础之如何前端布局方式有哪些

我们知道html定义了前端页面的结构，css定义了页面的样子，JavaScript定义了用于的行为。页面的结构和样式，又可以简单的成为是布局，我们就来讲讲前端页面的布局有哪些？

1、流体布局

流体布局其实我们正常的布局，他其实就是一个盒子模型。

 

在这种布局下我们其实能操作的布局样式很少，我这里主要提一下margin属性，我们可以通过 margin: auto；对子元素进行水平居中。通过它可以让元素水平居中的原因在于 auto 的计算原理：auto会让盒子模型填充父元素剩下的宽度。 也可实现盒子的垂直剧中。

2、float布局

float: left/right

浮动的元素会脱离文档流（浮在正常文档流上面），浮动元素后面的文字会环绕在图片周围，但是不会被覆盖。这种布局方式虽然很简单，但是缺点也很明显，就是会影响后面的元素，所以我们就需要清除浮动。

clear：left/right/both（建议直接写both）

官方对clear属性的解释：“元素盒子的边不能和前面的浮动元素相邻。”所以，清除浮动并不是真的把浮动元素给清除了，只是让自身元素不受前面元素的影响

3、table布局 

 

table布局结构很乱 ，很难维护，非常容易引起回流，所以，不建议使用table布局，CSS样式与HTML table属性一一对应，它俩一结合简直无敌，这就是大名鼎鼎的DIV+CSS布局方案。

4、定位布局

position: static/relative/absolute/fixed/sticky static:元素默认值，正常布局

relative: 相对于自身在文档流的位置进行定位，left/right/top/bottom属性有效，不脱离文档流

absolute: 相对于第一个非 static 的祖先进行定位（如果没有祖先，相对于html），left/right/top/bottom属性有效，脱离文档流

fixed: 相对于窗口进行定位，left/right/top/bottom属性有效，脱离文档流

sticky: 是 relative 和 fixed 的结合体

当不指定高度时，top和bottom同时存在，听top的。（同理，当不指定宽度时，left和right同时存在，听left的）

5、flex布局

主要讲下flex：1，flex：1其实就是flex-grow,flex-shirk,flex-basic的缩写。

flex弹性布局，如果子元素宽度之和大于或者小于父元素宽度，空间就会存在剩余和不够，flex默认不换行，除非设置flex-wrap,那么这种情况下，有两个重要的属性，flex-grow和flex-shrink.

flex-grow默认值为0，用于子元素的宽度之和小于父元素的宽度时分配剩余空间，假如父元素宽度为1000，三个子元素，div1宽度200，div2宽度300，div3宽度300；三个子元素都不设置flex-grow,那么浏览器默认不自动分配剩余空间，剩余空间超出；假如给div1设置flex-grow:1,那么剩余1000-200-300-300=200px全部分配给div1；其他的子元素div2和div3不参与分配,即不设置此属性就不参与分配。

所以如果要参与分配，就要给子元素添加flex-grow属性。如果按照1:1:1，那么剩余空间就分成3等份，每个子元素分1/3，也可以设置2:2:2或者3:3:3,，但是结果和1:1:1是一样的，都是平均分配，没有意义。如果按照2:3:1，那么剩余空间分成6等份，每个子元素按照2/6，3/6,1/6去分配。

flex-shrink和flex-grow相反，默认值为1，子元素宽度之和超出父元素宽度，那么每个子元素就要按比例缩小以适应父元素。这时候给子元素设置flex-grow不起作用。即使不给子元素设置flex-shrink,浏览器也会根据子元素在子元素宽度之和的占有比例去缩小每个子元素，假如

父元素宽度600，div1宽度200，div2宽度300，div3宽度300，超出父元素200+300+300-600=200，这200在默认情况下浏览器会按比例给每个子元素均分减少，默认比例怎么算呢？先算出每个div占所有div宽度之和多少，上面三个div之和为800，那么三个div所占比例为：

div1:200/800=0.25

div2:300/800=0.375

div3:300/800=0.375

那么超出的200就按照上面这个比例去分配，所有div1宽度要减少200*0.25=50,div2减少200*0.375=75，div3减少200*0.375=75；所以即使不给子元素添加flex-shrink,浏览器最后会把三个子元素宽度缩小到150,225,225；如果想自定义减小某个子元素宽度，就要给相应的div设置flex-shrink, 其他不缩小的设置flex-shrink：0；

如果子容器设置了 flex-basis 或者 width，那么在分配空间之间，他们会先跟父容器预约这么多的空间，然后剩下的才是归入的剩余空间，然后父容器再把剩余空间分配给设置了 flex-grow 的容器。如果同时设置 flex-basis 和 width，那么 width 属性会被覆盖，也就是说 flex-basis 的优先级比 width 高。有一点需要注意，如果 flex-basis 和 width 其中有一个是 auto，那么另外一个非auto 的属性优先级会更高。

6、响应式布局

响应式布局主要为移动端量身定做。我们在做响应式布局的时候，一般会先设置mate标签。其原理就是view的缩放。

<meta name="viewport" content="width=device-width, initial-scale=1" />

在布局中，我们还需要注意以下问题：

使用相对单位（%，vh，vw，rem，em ）
图片响应式（max-width: 100%，srcset）
流动布局（float，flex）
媒体查询（@media）
rem相对于根html元素的font-size的大小
em相对于父元素的font-size的大小
vh: viewpoint height,也就是意味着vh相对于可视区域的高度的大小
vw: viewpoint width,也就是意味着vw相对于可视区域的宽度的大小
7、Grid网格布局

display: grid;
grid-template-columns: 100px 100px 100px // 建立了三列，每列宽度为100px
grid-template-rows: 100px 100px;  // 建立了两行，每行宽度为 100px

创建了三列，俩行的一个网格布局。

8、圣杯布局

9、双飞翼布局

基本前端就是这么多的布局方式。。。。
————————————————
版权声明：本文为CSDN博主「leelxp」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/leelxp/article/details/108203868