1. CSS盒模型（盒模型大小包括border和padding 不包括margin）

CSS盒模型：分為元素、外邊距、內邊距、邊框、以及元素區域的高度寬度

盒模型坍塌：子容器的寬高超過父元素時，就造成盒模型溢位，也為盒模型坍塌。

解決方法：

1.在區塊屬性裡面新增overflow:hidden

2.通過對父容器新增max-height，max-width來控制溢位

2.兩欄佈局：

1：用表格形式

<table border="0"  width="100%" height=“200”>
    <tr>
        <td style="width: 30%;" height="200" bgcolor

="red"></td>
        <td style="width: 70%;" height="200" bgcolor="blue" ></td>
    </tr>
</table>

2.表格+css

CSS：其中#為id選擇器，一般id選擇器只出現一次，類選擇器是用“.”表示，可以出現多次

table {width:100%; height:200px;}
#left{background-color:red;width:50%;}
#right{background-color:blue;width:50%;}

<table>
    <tr>
       <td id="left"></td>
       <td id="right"></td>
    </tr>
</table>

3.div+css

CSS：

#container { width: 100%;}
#left { width: 30%;height:200px;background-color:red;}
#right { width: 70%;height:200px;background-color:blue;}

<div id="container">

   <div id="left" style="float:left">內容</div>
   <div id="right" style="float:right">內容</div>
</div>

3.三欄佈局：

1.div+css

#left {background-color:red;float:left;width:30%;height:200px;}
#right {background-color:yellow;float:right;width:30%;height:200px;}
#main {background-color:green;width:40%;height:200px;margin:0 30%;}

<div id="left"></div>
<div id="right"></div>
<div id="main"></div>

2.自適應的三欄佈局（左邊100px，右邊100px，中間視窗自適應）

#left {background-color:red;float:left;width:100px;height:200px;}
#right {background-color:yellow;float:right;width:100px;height:200px;}
#main {background-color:green;height:200px;margin：0 100px；}

<div id="left">左側欄</div>
<div id="right">右側欄</div>
<div id="main">中間欄</div>

3.絕對定位法

#left {background-color:red;  position:absolute;  left:0;  width:100px;  height:200px;}
#right {background-color:yellow;   position:absolute;  right:0;   width:100px;   height:200px;}
#main {background-color:green;   height:200px;    margin:0 100px;}

<div id="left"></div>
<div id="right"></div>
<div id="main"></div>

tips：overflow：hidden還有消除浮動的作用 有待研究