css布局(css实现页面布局)

css布局

一、单列布局
CSS常见的五大布局
常见的单列布局有两种：
header,content和footer等宽的单列布局
header与footer等宽,content略窄的单列布局
1.怎么完成
关于第一种，先经过对header,content,footer一致设置width：1000px;或许max-width：1000px(这两者的区别是当屏幕小于1000px时，前者会呈现滚动条，后者则不会，显现出实践宽度);然后设置margin:auto完成居中即可得到。
.header{
margin:0auto;
max-width:960px;
height:100px;
}
.content{
margin:0auto;
max-width:960px;
height:400px;
}
.footer{
margin:0auto;
max-width:960px;
height:100px;
}
关于第二种，header、footer的内容宽度不设置，块级元素充溢整个屏幕，但header、content和footer的内容区设置同一个width，并经过margin:auto完成居中。
.header{
margin:0auto;
max-width:960px;
height:100px;
}
.nav{
margin:0auto;
max-width:800px;
height:50px;
}
.content{
margin:0auto;
max-width:800px;
height:400px;
}
.footer{
margin:0auto;
max-width:960px;
height:100px;
}
二、两列自适应布局
两列自适应布局是指一列由内容撑开，另一列撑满剩下宽度的布局办法
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.Flexbox布局
Flexbox布局，也叫弹性盒子布局，戋戋简略几行代码就可以完成各种页面的的布局。
//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.起浮布局
Layout
三栏布局
//右栏部分要写在中心内容之前
起浮处理方案
1.这是三栏布局的起浮处理方案；2.这是三栏布局的起浮处理方案；3.这是三栏布局的起浮处理方案；4.这是三栏布局的起浮处理方案；5.这是三栏布局的起浮处理方案；6.这是三栏布局的起浮处理方案；
这种布局办法，dom结构必须是先写起浮部分，然后再中心块，不然右起浮块会掉到下一行。起浮布局的长处便是比较简略，兼容性也比较好。但起浮布局是有局限性的，起浮元素脱离文档流，要做铲除起浮，这个处理欠好的话，会带来很多问题，比如父容器高度塌陷等。
2.肯定定位布局
三栏布局
肯定定位处理方案
1.这是三栏布局的起浮处理方案；2.这是三栏布局的起浮处理方案；3.这是三栏布局的起浮处理方案；4.这是三栏布局的起浮处理方案；5.这是三栏布局的起浮处理方案；6.这是三栏布局的起浮处理方案；
肯定定位布局长处便是方便，设置很方便，而且也不容易出问题。缺陷便是，容器脱离了文档流，子孙元素也脱离了文档流，高度未知的时分，会有问题，这就导致了这种办法的有效性和可运用性是比较差的。
3.flexbox布局
三栏布局
flexbox处理方案
1.这是三栏布局的起浮处理方案；2.这是三栏布局的起浮处理方案；3.这是三栏布局的起浮处理方案；4.这是三栏布局的起浮处理方案；5.这是三栏布局的起浮处理方案；6.这是三栏布局的起浮处理方案；
flexbox布局是css3里新出的一个，它便是为了处理上述两种办法的不足呈现的，是比较完美的一个。现在移动端的布局也都是用flexbox。flexbox的缺陷便是IE10开始支持，但是IE10的是-ms办法的。
4.表格布局
三栏布局
表格布局处理方案
1.这是三栏布局的起浮处理方案；2.这是三栏布局的起浮处理方案；3.这是三栏布局的起浮处理方案；4.这是三栏布局的起浮处理方案；5.这是三栏布局的起浮处理方案；6.这是三栏布局的起浮处理方案；
表格布局的兼容性很好，在flex布局不兼容的时分，可以尝试表格布局。当内容溢出时会主动撑开父元素。
表格布局也是有缺陷:①无法设置栏边距；②对seo不友好；③当其间一个单元格高度超出的时分，两头的单元格也是会跟着一起变高的，然而有时分这并不是咱们想要的作用。
5.网格布局
三栏布局
网格布局处理方案
1.这是三栏布局的起浮处理方案；2.这是三栏布局的起浮处理方案；3.这是三栏布局的起浮处理方案；4.这是三栏布局的起浮处理方案；5.这是三栏布局的起浮处理方案；6.这是三栏布局的起浮处理方案；
CSSGrid是创建网格布局最强大和最简略的工具。就像表格相同，网格布局可以让Web设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从而使各种布局不行能与表格相同。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以堆叠和相似元素定位。
但网格布局的兼容性欠好。IE10+上支持，而且也仅支持部分特色。
6.圣杯布局
①特色
比较特别的三栏布局，相同也是两头固定宽度，中心自适应，仅有区别是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;
}
圣杯布局
②完成步骤
三个部分都设定为左起浮，不然左右两头内容上不去，就不行能与中心列同一行。然后设置center的宽度为100%(完成中心列内容自适应)，此刻，left和right部分会跳到下一行
CSS常见的五大布局
经过设置margin-left为负值让left和right部分回到与center部分同一行
CSS常见的五大布局
经过设置父容器的padding-left和padding-right，让左右两头留出空隙。
CSS常见的五大布局
经过设置相对定位，让left和right部分移动到两头。
CSS常见的五大布局
③缺陷
center部分的最小宽度不能小于left部分的宽度，不然会left部分掉到下一行
假如其间一列内容高度拉长(如下图)，其他两列的布景并不会主动填充。(借助等高布局正padding+负margin可处理，下文会介绍)
CSS常见的五大布局
7.双飞翼布局
①特色
相同也是三栏布局，在圣杯布局基础上进一步优化，处理了圣杯布局错乱问题，完成了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。
.container{
min-width:600px;//保证中心内容可以显现出来，两倍left宽+right宽
}
.left{
float:left;
width:200px;
height:400px;
background:red;
margin-left:-100%;
}
.center{
float:left;
width:100%;
height:500px;
background:yellow;
}
.center.inner{
margin:0200px;//新增部分
}
.right{
float:left;
width:200px;
height:400px;
background:blue;
margin-left:-200px;
}
双飞翼布局
②完成步骤(前两步与圣杯布局相同)
三个部分都设定为左起浮，然后设置center的宽度为100%，此刻，left和right部分会跳到下一行；
经过设置margin-left为负值让left和right部分回到与center部分同一行；
center部分增加一个内层div，并设margin:0200px；
③缺陷
多加一层dom树节点，增加烘托树生成的计算量。
④圣杯布局和双飞翼布局完成办法对比:
两种布局办法都是把主列放在文档流最前面，使主列优先加载。
两种布局办法在完成上也有相同之处，都是让三列起浮，然后经过负外边距形成三列布局。
两种布局办法的不同之处在于怎么处理中心主列的位置：圣杯布局是运用父容器的左、右内边距+两个从列相对定位;双飞翼布局是把主列嵌套在一个新的父级块中运用主列的左、右外边距进行布局调整
四、等高列布局
等高布局是指子元素在父元素中高度持平的布局办法。等高布局的完成包含伪等高和真等高,伪等高仅仅看上去等高罢了,真等高是实实在在的等高。
1.运用布景图片
这种办法是咱们完成等高列最早运用的一种办法，便是运用布景图片，在列的父元素上运用这个布景图进行Y轴的铺放，从而完成一种等高列的假象。完成办法简略，兼容性强，不需求太多的css款式就可以轻松完成,但此办法不适合流体布局等高列的布局。
在制作款式之前需求一张相似下面的布景图：
CSS常见的五大布局
.container{
background:url("column.png")repeat-y;
width:960px;
margin:0auto;
}
.left{
float:left;
width:220px;
}
.content{
float:left;
width:480px;
}
.right{
float:left;
width:220px;
}
2.运用正padding+负margin
咱们经过等布局便可处理圣杯布局的第二点缺陷，因为布景是在padding区域显现的，设置一个大数值的padding-bottom，再设置相同数值的负的margin-bottom，并在一切列外面加上一个容器，并设置overflow:hidden把溢出布景切掉。这种可能完成多列等高布局，而且也能完成列与列之间分隔线作用，结构简略，兼容一切浏览器。新增代码如下：
.center,
.left,
.right{
padding-bottom:10000px;
margin-bottom:-10000px;
}
.container{
padding-left:220px;
padding-right:220px;
overflow:hidden;//把溢出布景切掉
}
CSS常见的五大布局
3.仿照表格布局
这是一种非常简略，易于完成的办法。不过兼容性欠好，在ie6-7无法正常运转。
….
…
…
.table{
width:auto;
min-width:1000px;
margin:0auto;
padding:0;
display:table;
}
.tableRow{
display:table-row;
}
.tableCell{
display:table-cell;
width:33%;
}
.cell1{
background:#f00;
height:800px;
}
.cell2{
background:#0f0;
}
.cell3{
background:#00f;
}
4.运用边框和定位
这种办法是运用边框和肯定定位来完成一个假的高度持平列的作用。结构简略，兼容各浏览器，容易掌握。假设你需求完成一个两列等高布局，侧栏高度要和主内容高度持平。
#wrapper{
width:960px;
margin:0auto;
}
#mainContent{
border-right:220pxsolid#dfdfdf;
position:absolute;
width:740px;
height:800px;
background:green;
}
#sidebar{
background:#dfdfdf;
margin-left:740px;
position:absolute;
height:800px;
width:220px;
}
…
…
五、粘连布局
1.特色
有一块内容，当的高康足够长的时分，紧跟在后面的元素会跟在元素的后面。
当元素比较短的时分(比如小于屏幕的高度),咱们希望这个元素可以“粘连”在屏幕的底部
CSS常见的五大布局
详细代码如下：
main
main
main
footer
*{
margin:0;
padding:0;
}
html,
body{
height:100%;//高度一层层继承下来
}
#wrap{
min-height:100%;
background:pink;
text-align:center;
overflow:hidden;
}
#wrap.main{
padding-bottom:50px;
}
#footer{
height:50px;
line-height:50px;
background:deeppink;
text-align:center;
margin-top:-50px;
}
2.完成步骤
(1)footer必须是一个独立的结构，与wrap没有任何嵌套关系
(2)wrap区域的高度经过设置min-height，变为视口高度
(3)footer要运用margin为负来确定自己的位置
(4)在main区域需求设置padding-bottom。这也是为了防止负margin导致footer掩盖任何实践内容。

css实现页面布局

*{
box-sizing:border-box;
}
body{
font-family:Arial;
padding:10px;
background:#f1f1f1;
}
/*头部标题*/
.header{
padding:30px;
text-align:center;
background:white;
}
.headerh1{
font-size:50px;
}
/*导航条*/
.topnav{
overflow:hidden;
background-color:#333;
}
/*导航条链接*/
.topnava{
float:left;
display:block;
color:#f2f2f2;
text-align:center;
padding:14px16px;
text-decoration:none;
}
/*链接颜色修改*/
.topnava:hover{
background-color:#ddd;
color:black;
}
/*创建两列*/
/*Leftcolumn*/
.leftcolumn{
float:left;
width:75%;
}
/*右侧栏*/
.rightcolumn{
float:left;
width:25%;
background-color:#f1f1f1;
padding-left:20px;
}
/*图像部分*/
.fakeimg{
background-color:#aaa;
width:100%;
padding:20px;
}
/*文章卡片效果*/
.card{
background-color:white;
padding:20px;
margin-top:20px;
}
/*列后面清除浮动*/
.row:after{
content:"";
display:table;
clear:both;
}
/*底部*/
.footer{
padding:20px;
text-align:center;
background:#ddd;
margin-top:20px;
}
/*响应式布局-屏幕尺寸小于800px时，两列布局改为上下布局*/
@mediascreenand(max-width:800px){
.leftcolumn,.rightcolumn{
width:100%;
padding:0;
}
}
/*响应式布局-屏幕尺寸小于400px时，导航等布局改为上下布局*/
@mediascreenand(max-width:400px){
.topnava{
float:none;
width:100%;
}
}