CSS中有哪些常见的布局

这篇文章将为大家详细讲解有关CSS中有哪些常见的布局，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

　　1、常见的单列布局：

　　header,content和footer等宽的单列布局

　　header与footer等宽,content略窄的单列布局

　　2、如何实现

　　对于第一种，先通过对header,content,footer统一设置width：1000px;或者max-width：1000px(这两者的区别是当屏幕小于1000px时，前者会出现滚动条，后者则不会，显示出实际宽度);然后设置margin:auto实现居中即可得到。

　　<pclass="header"></p>

　　<pclass="content"></p>

　　<pclass="footer"></p>

　　.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实现居中。

　　<pclass="header">

　　<pclass="nav"></p>

　　</p>

　　<pclass="content"></p>

　　<pclass="footer"></p>

　　.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-浏览器。具体代码如下：

　　<pclass="parent"style="background-color:lightgrey;">

　　<pclass="left"style="background-color:lightblue;">

　　<p>left</p>

　　</p>

　　<pclass="right"style="background-color:lightgreen;">

　　<p>right</p>

　　<p>right</p>

　　</p>

　　</p>

　　.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;

　　}

　　<articleclass="container">

　　<pclass="center">

　　<p>圣杯布局</p>

　　</p>

　　<pclass="left"></p>

　　<pclass="right"></p>

　　</article>

关于“CSS中有哪些常见的布局”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。