这篇文章主要介绍了CSS实现页面一列布局,两列布局与三列布局的方法示例,包括宽度与高度的自适应的示例,需要的朋友可以参考下:
1.一列布局(又叫单列布局)
一列布局需要掌握3个知识点:标准文档流,其中又包含了块级元素和行级元素,还有margin属性,可以说实现一列布局的关键代码就是由margin属性实现的,通过设置margin:0 auto;来实现水平居中,auto就是它会根据浏览器的宽度自动设置两边的外边距。要设置margin,你首先得有一个盒子模型,比如这里的div,然后设置它的长宽,有一个固定的大小,才可以实现居中。
<style type="text/css"> body{margin:0;padding:0;} .head{heigth:200px;background:blue;} .main{height:500px;width:800p;margin:0 auto;} .footer{background:blue;height:200px;width:800px;margin:0 auto;} </style> <div class="head"> This is head !</div> <div class="main"> This is main !</div> <div class="footer"> This is footer !</div>
2.二列布局(两列自适应)
浮动:
块级元素都是一行一行这样排列的,需要把两个块级元素并排时,就需要用到CSS中的浮动布局float,float有三个属性值,
left-左浮动,right-右浮动,none-不浮动,一旦设置了float属性,元素就会对应的向左移,或向右移,直到碰到容器边缘,
当元素没有内容但是设置了浮动属性时,元素的宽度就随内容的变化而变化。
清除浮动的常用方法是:clear:both;(为需要清楚浮动的元素设置)如果你清楚的知道设置了那种浮动,也可以clear:right/left,一般都用both,保障浮动被清除;还有另外一种清除浮动的方法,width:100%;overflow:hidden;
<style type="text/css"> body{margin:0;padding:0;} .main{width:800px;margin:0 auto;} .left{width:20%;height:500px;background:blue;float:left;} .right{width:80%;background:red;height:500px;float:right;} </style> <div class="main"> <div class="left"> This is left !</div> <div class="right"> This is right !</div> </div>
添加了父级div后,right和left块就被限制在父级块中,父级块宽度是固定的,则左右两块的宽度也随之固定,但是如果父级块的宽度改变,则左右两块也会随之改变,且比例还是2:8,这个是固定不变的。
3.三列布局
position可设置4个属性值,分别为:static(静态定位),relative(相对定位),absolute(绝对定位),fixed(固定定位)
三列布局自适应,将上述两列布局中的比例更改为33.33%即可,那么以此类推,四列布局自适应也可以用一样的方法,调整比例分配,从而实现自己想要的布局方式。
<style type="text/css"> body{margin:0;padding:0;} .main{width:800px;margin:0 auto;} .left{width:33.33%;height:500px;background:blue;float:left;} .middle{width:33.33%;height:500px;background:black;float:left;} .right{width:33.33%;background:red;height:500px;float:right;} </style> <div class="main"> <div class="left"> This is left !</div> <div class="middle"> This is middle !</div> <div class="right"> This is right !</div> </div>
另外一种情况是,左右两块的宽度都是固定的分别为200px,300px,而中间是自适应的。这种情况下就不能通过float来实现了,此时我们需要对左右两块进行绝对定位,然后设置中间块的margin,则可以实现要求。如果你想让中间和左右两块不要紧密贴合,则可以在设置margin(上,右,下,左)时,把像素适当的提高。实现方式如下:
注意left:0;top:0;right:0;top:0; 这些设置是必须的,不加就会出问题,亲测
<style type="text/css"> body{margin:0;padding:0;} .main{width:800px;margin:0 auto;} .left{width:200px;height:500px;background:blue;position:absolute;left:0;top:0;} .middle{height:500px;background:black;margin:0 300px 0 200px;} .right{width:300px;background:red;height:500px;position:absolute;right:0;top:0;} </style> <div class="main"> <div class="left"> This is left !</div> <div class="middle"> This is middle !</div> <div class="right"> This is right !</div> </div>
在网页设计中,我们更多的是将上述布局方式进行混合,比如在一列布局的main块中插入二列或者三列布局,代码和上基本一致
使用BFC的原理实现
BFC的规则之一,就是BFC区域,不会与float box重叠,因此我们可以利用这一点来实现3列布局。
css代码如下
.left { float: left; margin-right: 10px; width: 100px; height: 100px; background-color: orange; } .rightright { float: rightright; margin-left: 10px; width: 100px; height: 100px; background-color: orange; } .main { height: 100px; background-color: green; overflow: hidden; }
html代码如下
<div class="left"></div> <div class="right"></div> <div class="main"></div>
双飞翼布局
这种布局方案最早由淘宝提出,主要为了主列能够被最先加载。
实现原理:
(1)让主列外面添加一个wrap,主列wrap,以及2子列都左浮动。
(2)设置主列wrap宽度为100%,将子列的margin-left设置为负值,让子列能够排列在左右两侧。
(3)这是主列的margin-left与margin-right比左右两列的宽度大一点,则可以设置出来主列与子列之间的间隙。
css代码如下
.wrap { width: 100%; } .wrap::after { display: block; content: ''; font-size: 0; height: 0; clear: both; zoom: 1; } .main-content { float: left; width: 100%; } .main { height: 100px; background-color: green; margin-left: 110px; margin-right: 110px; } .left { float: left; width: 100px; height: 100px; background-color: orange; margin-left: -100%; } .rightright { float: left; width: 100px; height: 100px; background-color: orange; margin-left: -100px; }
html代码如下
<div class="wrap"> <div class="main-content"> <div class="main"></div> </div> <div class="left"></div> <div class="right"></div> </div>
圣杯布局
圣杯布局在结构上要简单一点,也能够让主列优先加载。
实现原理:
(1)添加一个包裹框,设置padding-leftpadding-right值,比子列宽度大一个空隙的宽度。
(2)主列,子列都设置为float: left 左子列margin-left设置为-100%,并且设置为position:relative; left: -110px将左子列放置到左侧。右子列同理。
(3)主列只需设置宽度为100%即可。包裹框的宽度不要设置为100%,自适应即可。
css代码如下
.wrapper { padding-left: 110px; padding-right: 110px; overflow: hidden; } .main { float: left; width: 100%; height: 100px; background-color: #ccc; } .left { float: left; width: 100px; height: 100px; margin-left: -100%; position: relative; left: -110px; _left: 0; background-color: orange; } .rightright { float: left; width: 100px; height: 100px; background-color: orange; margin-left: -100px; position: relative; rightright: -110px; }
html代码如下
<div class="wrapper"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div>
已抢66873个
抢已抢39274个
抢已抢21719个
抢已抢2759个
抢已抢2797个
抢已抢19354个
抢