CSS中有哪些常见的布局

这篇文章将为大家详细讲解有关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中有哪些常见的布局”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。