HTML,CSS三种布局方式
三种布局方式的核心思想是利用margin来实现的。
等高布局
利用margin-bottom和padding-bottom互相抵消的效果来展现。”
首先看看正常效果
代码
<div id="parent">
<div id="box1">
</div>
<div id="box2">
</div>
*{margin: 0;padding: 0;}
#parent{border: 10px solid black;overflow: hidden;width: 500px;}
#box1{float: left; width: 100px;height: 100px; background: red;}
#box2{float: right; width: 100px;height: 200px; background: blue;}
实现等高后的效果
代码
**margin-bottom: -2000px; padding-bottom: 2000px;**实现互相抵消
<div id="parent">
<div id="box1">
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</div>
<div id="box2">
<p>word</p>
<p>word</p>
<p>word</p>
<p>word</p>
<p>word</p>
<p>word</p>
<p>word</p>
<p>word</p>
<p>word</p>
<p>word</p>
</div>
</div>
*{margin: 0;padding: 0;}
#parent{border: 10px solid black;overflow: hidden;width: 500px;}
#box1{float: left; width: 100px;background: red;margin-bottom: -2000px; padding-bottom: 2000px;}
#box2{float: right; width: 100px;background: blue;margin-bottom: -2000px; padding-bottom: 2000px;}
**
双飞翼布局
**
利用的也是margin功能,先看看正常的时候。
代码
<div class="header"></div>
<div class="container">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
*{margin: 0;padding: 0;}
.header{height: 50px;background: black;}
.container .center{width: 100%;height: 100px;float: left;background: blueviolet;}
.container .left{width: 100px;height: 100px;float: left;background: chartreuse;}
.container .right{width: 150px;height: 100px;float: right;background: darkcyan;}
双飞翼效果
这样之后,无论网页大小如何改变,都会呈现这样的效果。
代码
<div class="header"></div>
<div class="container">
<div class="center">
<p>内容展示</p>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
*{margin: 0;padding: 0;}
.header{height: 50px;background: black;}
.container .center{width: 100%;height: 100px;float: left;}
.container .center p{height: 100%;background: blueviolet;margin: 0 150px 0 100px;}
.container .left{width: 100px;height: 100px;float: left;background: chartreuse;margin-left: -100%;}
.container .right{width: 150px;height: 100px;float: left;background: darkcyan;margin-left: -150px;}
圣杯布局
效果展示
圣杯布局与双飞翼布局很像。
代码
<div class="header"></div>
<div class="container clear">
<div class="center">
<p>内容展示</p>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
.header{height: 50px;background: black;}
.clear::after{content: "";display: block;clear: both;}
.container{margin: 0 150px 0 100px; background: blueviolet;}
.container .center{width: 100%;height: 100px;float: left;}
.container .left{width: 100px;height: 100px;float: left;background: chartreuse;margin-left: -100%;position: relative;left: -100px;}
.container .right{width: 150px;height: 100px;float: left;background: darkcyan;margin-left: -150px;position: relative; right: -150px;}
三种布局讲完了,在这里只是给三种布局做简单的理解,要想了解更多,可以查找更多的资料,不喜勿喷,谢谢!