189 8069 5689
这篇文章将为大家详细讲解有关CSS中有哪些常见的布局，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
为企业提供成都网站建设、网站制作、网站优化、成都全网营销、竞价托管、品牌运营等营销获客服务。创新互联建站拥有网络营销运营团队，以丰富的互联网营销经验助力企业精准获客，真正落地解决中小企业营销获客难题，做到“让获客更简单”。自创立至今，成功用技术实力解决了企业“网站建设、网络品牌塑造、网络营销”三大难题，同时降低了营销成本，提高了有效客户转化率，获得了众多企业客户的高度认可！
1、常见的单列布局：
header,content和footer等宽的单列布局
header与footer等宽,content略窄的单列布局
2、如何实现
对于第一种，先通过对header,content,footer统一设置width：1000px;或者max-width：1000px(这两者的区别是当屏幕小于1000px时，前者会出现滚动条，后者则不会，显示出实际宽度);然后设置margin:auto实现居中即可得到。
.header{
margin:0auto;
max-width:960px;
height:100px;
background-color:blue;
}
.content{
margin:0auto;
max-width:960px;
height:400px;
background-color:aquamarine;
}
.footer{
margin:0auto;
max-width:960px;
height:100px;
background-color:aqua;
}
对于第二种，header、footer的内容宽度不设置，块级元素充满整个屏幕，但header、content和footer的内容区设置同一个width，并通过margin:auto实现居中。
.header{
margin:0auto;
max-width:960px;
height:100px;
background-color:blue;
}
.nav{
margin:0auto;
max-width:800px;
background-color:darkgray;
height:50px;
}
.content{
margin:0auto;
max-width:800px;
height:400px;
background-color:aquamarine;
}
.footer{
margin:0auto;
max-width:960px;
height:100px;
background-color:aqua;
}
二、两列自适应布局
两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式
1.float+overflow:hidden
如果是普通的两列布局，浮动+普通元素的margin便可以实现，但如果是自适应的两列布局，利用float+overflow:hidden便可以实现，这种办法主要通过overflow触发BFC,而BFC不会重叠浮动元素。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器。具体代码如下：
left
right
right
.parent{
overflow:hidden;
zoom:1;
}
.left{
float:left;
margin-right:20px;
}
.right{
overflow:hidden;
zoom:1;
}
注意点:如果侧边栏在右边时，注意渲染顺序。即在HTML中，先写侧边栏后写主内容
2.Flex布局
Flex布局，也叫弹性盒子布局，区区简单几行代码就可以实现各种页面的的布局。
//html部分同上
.parent{
display:flex;
}
.right{
margin-left:20px;
flex:1;
}
3.grid布局
Grid布局，是一个基于网格的二维布局系统，目的是用来优化用户界面设计。
//html部分同上
.parent{
display:grid;
grid-template-columns:auto1fr;
grid-gap:20px
}
三、三栏布局
特征：中间列自适应宽度，旁边两侧固定宽度，实现三栏布局有多种方式（可以猛戳实现三栏布局的几种方法),本文着重介绍圣杯布局和双飞翼布局。
1.圣杯布局
①特点
比较特殊的三栏布局，同样也是两边固定宽度，中间自适应，唯一区别是dom结构必须是先写中间列部分，这样实现中间列可以优先加载。
.container{
padding-left:220px;//为左右栏腾出空间
padding-right:220px;
}
.left{
float:left;
width:200px;
height:400px;
background:red;
margin-left:-100%;
position:relative;
left:-220px;
}
.center{
float:left;
width:100%;
height:500px;
background:yellow;
}
.right{
float:left;
width:200px;
height:400px;
background:blue;
margin-left:-200px;
position:relative;
right:-220px;
}
圣杯布局
关于“CSS中有哪些常见的布局”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。