B站学习，HTML,CSS三种布局方式

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

三种布局讲完了，在这里只是给三种布局做简单的理解，要想了解更多，可以查找更多的资料，不喜勿喷，谢谢！