css中常见布局⽅式有哪些？
CSS中常见布局⽅式有哪些？下⾯本篇⽂章就来给⼤家介绍⼀下CSS中的常见布局⽅式，希望对⼤家有所帮助。在介绍CSS布局⽅式之前我先简单说明⼀下html中的三种布局⽅式：
流动布局（默认）
浮动布局（float）
定位布局（position）
好了，这⾥就不详细介绍这三种布局了，今天我们的重头戏是探索CSS中常见的布局⽅式有哪些
⼀、单列布局
常见的单列布局有两种：
header,content 和 footer 等宽的单列布局
header 与 footer 等宽,content 略窄的单列布局
实现第⼀种⽅式很简单，可以将 header , content, footer 统⼀设置相等宽度，然后设置 margin:auto 即可实现居中：
<!-- html代码 -->
<p class="header"></p>
<p class="content"></p>
<p class="footer"></p>
<!-- css代码 -->
.header{
margin:0 auto;
max-width: 960px;
height:100px;
}
.content{
margin: 0 auto;
max-width: 960px;
height: 400px;
}
.footer{
margin: 0 auto;
max-width: 960px;
height: 100px;
}
对于第⼆种，header 和  footer 可以不⽤设置宽度，让其充满整个屏幕（默认100%），只需将三者的内容设置同⼀个 width ，然后在通过 margin:auto 让其内容居中
⼆、两列⾃适应布局
两列⾃适应布局是指⼀列由内容撑开，另⼀列撑满剩余宽度的布局⽅式
实现⽅式：
float+overflow:hidden
Flex 布局
Grid 布局
1. float+overflow:hidden
实现原理：通过设置overflow触发BFC，⽽BFC不会重叠浮动元素
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
<style>
.container{
/* 触发BFC格局 */
overflow: hidden;
/* 兼容IE6-浏览器 */
zoom: 1;
}
.left{
float: left;
background-color: blue;
}
.right{
overflow: hidden;
zoom: 1;
background-color: pink;
}
</style>
注意：上述代码是左侧栏固定，右侧⾃适应。
2. Flex 布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，⽤来为盒状模型提供最⼤的灵活性。任何⼀个容器都可以指定为 Flex 布局Flex 布局是2009年W3C提出了⼀种新布局⽅案，在现在也得以⼴泛使⽤，特别是移动端最优！
Flex 可以简便、完整、响应式地实现各种页⾯布局
详细了解 Flex 布局请点击：
/* html同上 */
.container{
display: flex;
}
.right{
flex: 1;
}
只需两⾏代码即可完成两列⾃适应布局，是不是很⾹~
3.Grid 布局
Grid布局，是⼀个基于⽹格的⼆维布局系统，⽬的是⽤来优化⽤户界⾯设计。
详细了解Grid布局请点击：
/* html同上 */
.container{
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 20px;
}
三、三栏布局
特征：中间列⾃适应宽度，旁边两侧固定宽度，实现三栏布局有多种⽅式：
1.浮动布局
这种布局⽅式，dom 结构必须是先写浮动部分，然后再中间块，否则右浮动块会掉到下⼀⾏。
浮动布局的优点就是⽐较简单，兼容性也⽐较好。但浮动布局是有局限性的，浮动元素脱离⽂档流，要做清除浮动，这个处理不好的话，会带来很多问题，⽐如⽗容器⾼度塌陷等。
HTML代码：
<div class="main">
<div class="left">左</div>
<div class="right">右</div>
<div class="center">中
<h2>浮动布局</h2>
</div>
</div>
CSS代码：
/* 清除所有标签默认样式 */
*{
margin: 0;
padding: 0;
}
.left{
float: left;
width: 300px;
height: 100px;
background: pink;
}
.
right{
float: right;
width: 300px;
height: 100px;
background: red;
}
.center{
margin-left: 300px;
margin-right: 300px;
background-color: lightblue;
}
效果图：
在这⾥给 .center 类设置左右外边距是因为两侧的浮动元素占300像素，不设置外边距中间内容多就会出现如下情况：
在前⾯也说了，浮动实现的三栏布局会使元素脱离⽂档流，所以为了不影响其他元素的显⽰需要清除浮动：
.main::after{
content:'';
display: block;
clear: both;
}
2.绝对定位布局
HTML代码：
<div class="main">
<div class="left">左</div>
<div class="center">中
绝对定位布局
</div>
<div class="right">右</div>
</div>
CSS代码：
*{
margin: 0;
padding: 0;
}
.main{
position: relative;
}
.left{
position: absolute;
left: 0;
width: 300px;
background-color: red;
}
.center{
position: absolute;
left: 300px;
right: 300px;
background-color: blue;
}
.
right{
position: absolute;
right: 0;
width: 300px;
background-color: pink;
}
在这⾥，由于 absolute 是相当于 static 定位以外的第⼀个⽗元素进⾏定位，所以我们要给其⽗元素添加 position:relative 属性
绝对定位布局优点就是快捷，设置很⽅便，⽽且也不容易出问题。
缺点就是，容器脱离了⽂档流，后代元素也脱离了⽂档流，⾼度未知的时候，会有问题，这就导致了这种⽅法的有效性和可使⽤性是⽐较差的。
3.表格布局
table是⼀种常见的布局⽅式，他可以将整个页⾯按照表格的⽅式设置为多⾏多列，但是由于书写table标签⽐较⿇烦尤其是涉及到table内嵌table的时候，所以CSS给我们提供了 display:table 的⽅式可以让我们⽅便的使⽤table布局, 设置⼦元素为列的属性为 display:table-cell
.main{
width: 100%;
display: table;
}
.left,.center,.right{
display: table-cell;
}div中的div居中
.left{
width: 300px;
background-color: red;
}
.center{
background-color: green;
}
.right{
width: 300px;
background-color: pink;
}
表格布局的兼容性很好，在 flex 布局不兼容的时候，可以尝试表格布局。
同样，不是谁都是完美的，表格布局也存在⼀定的缺陷：
⽆法设置栏边距
对 seo 不友好
当其中⼀个单元格⾼度超出的时候，两侧的单元格也是会跟着⼀起变⾼的
4.弹性布局
这⾥弹性(flex)布局就不再过多解释，感兴趣的⼩伙伴可以查看阮⼀峰⼤佬的详细教程：
.main {
display: flex;
}
.left{
width: 400px;
background-color: red;
}
.center{
background-color: pink;
flex: 1;
}
.right{
background-color: green;
width: 400px;
}
flexbox 布局是⽐较完美的⼀个三栏布局⽅案，flexbox 的缺点就是 IE10 开始⽀持，但是 IE10 的是-ms 形式的
5.⽹格布局
同样，⽹格(grid)布局也不再详细介绍，感兴趣的⼩伙伴请查看：
将属性 display 值设为 grid 或 inline-grid 就创建了⼀个⽹格容器，所有容器直接⼦结点⾃动成为⽹格项⽬。
gird提供了 gird-template-columns、grid-template-rows属性让我们设置⾏和列的⾼、宽
div{
display: grid;
width: 100%;
grid-template-columns: 300px auto 300px;
grid-template-rows: 150px;
}
注意：⽹格布局的兼容性不好。IE10+上⽀持，⽽且也仅⽀持部分属性。
此外，三列布局还有和。
以上就是CSS中常见的布局⽅式了，⼏种⽅式各有各的优点和缺点，没有⼀个⽅法可以说是完美的，可以按照实际情况来选择使⽤！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。