本文将介绍面试中常考的一些CSS布局：

两栏布局(左边固定右边自适应)
三栏布局(左右固定中间自适应)
- 流体布局（浮动）
- BFC三栏布局
- 双飞翼布局
- 圣杯布局
- flex
- table布局
- 绝对定位布局
- 网格布局(Grid布局)

一、两栏布局

左边固定，右边自适应

1.通过设置浮动实现。

需要两个div实现，一个div设置浮动，并设置宽度，另一个div可以不用设置任何东西

如果要给右边块设置什么的话下面两种方法也行：

left左浮动并设置宽度right设置margin-left为left的宽度也能实现
left设置左浮动并和宽度right，right设置over-flow:hidden也能实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>两栏布局——float</title><style>div{height:300px;}.left{width:200px;background-color:gray;float:left;}.main{background-color:pink;/* margin-left:200px; *//* 或者overflow:hidden; */}</style>
</head>
<body><div class = 'left'></div><div class = 'main'></div>
</body>
</html>

2. 通过相对定位和绝对定位实现。

需要三个div，其中一个div是父容器，包含两个子元素。
两个子元素设置相对定位，给上边的子元素设置宽度，下边的子元素设置left,值为上边子元素的宽度，再设置right:0。
给父容器设置相对定位是因为可以让其设置绝对定位的子元素相对它进行移动；给上边的子元素设置绝对定位可以让下边的子元素跟它在同一行。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>两栏布局——absolue</title><style>.outer{position:relative;height:300px;}.left{position:absolute;width:300px;background-color:blue;height:100%;}.main{background-color:yellow;position:absolute;left:300px;right:0;height:100%;}</style>
</head>
<body><div class = 'outer'><div class = 'left'></div><div class = 'main'></div><div>
</body>
</html>

3.通过弹性盒子flex实现

需要三个div，其中一个div是父容器，包含两个子元素。
父元素设置display:flex;上边子元素设置宽度，下边子元素设置flex:1

    div{height:300px;}.parent{display:flex;}.left{flex:0 0 100px;}.right{flex:1 1 auto;}

二、三栏布局

左右固定，中间自适应

1.流体布局（浮动）

原理: 左右模块各自向左右浮动，并设置中间模块的margin值使中间模块宽度自适应

缺点: 主要内容无法最先加载，当页面内容较多时会影响用户体验

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>三栏布局——float</title><style>div {height: 200px;}.left {float: left;width: 100px;}.right {float: right;width: 100px;}.center {margin-left: 100px;margin-right: 100px;}</style>
</head><body><div class="left" style="background-color:rgb(6, 235, 44)"></div><div class="right" style="background-color:rgb(9, 134, 236)"></div><div class="center" style="background-color:red"></div>
</body></html>

2.BFC 三栏布局

原理: BFC规则有这样的描述：BFC 区域不会与浮动元素重叠, 因此我们可以利用这一点来实现 3 列布局

缺点: 主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。因此为了解决这个问题，有了下面要介绍的布局方案双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>三栏布局——BFC</title><style>div {height: 200px;}.left {float: left;width: 100px;}.right {float: right;width: 100px;}.center {overflow: hidden;}</style>
</head><body><div class="left" style="background-color:rgb(6, 235, 44)"></div><div class="right" style="background-color:rgb(9, 134, 236)"></div><div class="center" style="background-color:red"></div>
</body></html>

3.双飞翼布局。

原理：给center添加一个容器元素container，设置center的margin值避开侧边栏，让left、right飘在两边

优点: 主要内容模块可以优先加载，当页面中内容较多时不会影响用户体验。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>三栏布局——双飞翼</title><style>.container {float: left;width: 100%;}.center {margin-left: 100px;margin-right: 100px;height: 100px;}.right {float: left;margin-left: -100px;/*自身宽度*/width: 100px;height: 100px;}.left {float: left;margin-left: -100%;/*基于父元素百分比的外边距*/width: 100px;height: 100px;}</style>
</head><body><div class="container"><div class="center" style="background-color:red"></div></div><div class="left" style="background-color:rgb(6, 235, 44)"></div><div class="right" style="background-color:rgb(9, 134, 236)"></div>
</body></html>

4.圣杯布局

和与双飞翼布局的区别: 与双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>三栏布局——双飞翼</title><style>.container {margin-left: 100px;margin-right: 100px;}.center {float: left;width: 100%;height: 100px;}.left {float: left;margin-left: -100%;position: relative;left: -100px;width: 100px;height: 100px;}.right {float: left;margin-left: -100px;position: relative;right: -100px;width: 100px;height: 100px;}</style>
</head><body><div class="container"><div class="center" style="background-color:rgb(9, 134, 236)"></div><div class="left" style="background-color:red"></div><div class="right" style="background-color:rgb(6, 235, 44)"></div></div>
</body></html>

5.flex

原理： 设置父元素 display:flex;再设置子元素的flex；

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性：

flex-grow：项目将相对于其他灵活的项目进行扩展的量
flex-shrink：规定项目将相对于其他灵活的项目进行收缩的量
flex-basis：项目的默认长度

优点：可以先写center，让他先加载，然后用order属性，把他排到中间的位置

.container{display:flex;width:100%;height:100px;
}
.left{flex:0 0 100px;order: 0 /*默认为0*/
}
.right{flex:0 0 100px;order:2
}
.center{flex:1 1 auto;order:1
}<div class="container"><div class="center" style="background-color:rgb(9, 134, 236)"></div><div class="left" style="background-color:red"></div><div class="right" style="background-color:rgb(6, 235, 44)"></div>
</div>

6. table布局

缺点：无法设置栏间距

.container{display:table;width:100%;
}
.left,.center,.right{display:table-cell;
}
.left{width:100px;height:100px;
}
.right{width: 100px;height:100px;
}<div class="container"><div class="left" style="background-color:red"></div><div class="center" style="background-color:rgb(9, 134, 236)"></div><div class="right" style="background-color:rgb(6, 235, 44)"></div>
</div>

7.绝对定位布局

优点: 简单实用，并且主要内容可以优先加载。

.container{position:relative;
}
.center{margin-left:100px;margin-right:100px;height:100px;
}
.left{position:absolute;left:0;top:0;width:100px;height:100px;
}
.right{position:absolute;right:0;top:0;width:100px;height:100px;
}<div class="container"><div class="left" style="background-color:red"></div><div class="center" style="background-color:rgb(9, 134, 236)"></div><div class="right" style="background-color:rgb(6, 235, 44)"></div>
</div>

8.网格布局(Grid布局)

grid-template-columns: 100px auto 100px;
用于设置网格容器的列属性其实就相当于列的宽度当我们需要几列展示时
就设置几个值这个属性可以接收具体数值比如100px 也可以接收百分比值
表示占据容器的宽度
需要注意的是: 当给容器设定了宽度时
grid-template-columns设定的百分比值是以容器的宽度值为基础计算的
如果未设置宽度时会一直向上追溯到设置了宽度的父容器直到body元素。
grid-template-rows: 100px;
用于设置网格容器的行属性其实就相当于行的高度
其特性与grid-template-columns属性类似

.container{     display: grid;            grid-template-columns: 100px auto 100px;                     grid-template-rows: 100px;                }    <div class="container"><div class="left" style="background-color:red"></div><div class="center" style="background-color:rgb(9, 134, 236)"></div><div class="right" style="background-color:rgb(6, 235, 44)"></div>
</div>

总结

我个人还是更喜欢使用flex布局，感觉用起来很方便，基本上的布局都能够完成。

有兴趣的可以看看这篇文章

Flex(弹性布局)实现五大常用布局

本文链接：https://blog.csdn.net/qq_39903567/article/details/114751532

CSS常见布局的几种实现方式(面试常考)相关推荐

平分布局 html,实现CSS平分布局的4种方式
实现CSS等分布局的4种方式前面的话等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式思路一: float 缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比 ...
两栏布局的几种实现方式
两栏布局的几种实现方式通过以下四常见的方法均可以实现图中两栏布局的效果侧边栏左浮动+正文部分overflow:auto 定位实现两栏布局纯浮动形式浮动+常规流效果图侧边栏左浮动+正文部分o ...
三栏布局的几种实现方式
三栏布局是一种经典的页面布局:在网页上以平铺方式展现的左中右三列布局,其特点在于,左右两列可固定在网页两侧,中间一列永远居中,且当网页宽度大于左右两列宽度之和时,中间一列可随网页整体宽度的变化而变化( ...
html 水平垂直居中,css水平垂直居中有几种实现方式？
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...
[css] 说下line-height三种赋值方式有何区别？
[css] 说下line-height三种赋值方式有何区别? line-height 可以有带单位及不带单位的写法(感觉其实是两种).div{line-height: 24px;line-height ...
实现CSS等分布局的5种方式
前面的话等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的5种方式 float [思路一]float 缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比取值存在四舍五入的 ...
html画布20等分,实现CSS等分布局的4种方式 - 小火柴的蓝色理想
前面的话等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式思路一: float 缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比取值存在四舍五入的误差 [1] ...
简述css属性选择器的几种定义方式_css的四种使用方式 css规则按选择器类型分为那四种...
HTML中嵌入CSS的四种方式及优先级,如何选择 1. 行内样式行内样式就是把 CSS 样式直接放在代码行内的标签中,一般都是放入标签的style属性中,由于行内样式直接插入标签中,故是最直接的一种方 ...
简述css属性选择器的几种定义方式_CSS基础试题
一.单选题 1.CSS是利用( B )XHTML标签构建网页布局. A. C. D. 2.在CSS语言中下列哪一项是"左边框"的语法( C ) A.borde ...

CSS常见布局的几种实现方式(面试常考)