現在布局不用table，一般用盒子模型來布局，也就是通常說的div+css，一個頁面就是多個盒子的拼接
一. 初識盒子模型
例子1，測試盒子各屬性設置
<head>
<style type="text/css">
.box{
width:200px; #這里的寬和高是content的寬和高
height:100px;
background-color:blue;
1. border設置
/* border-top-width:10px; #設置頂部邊框的粗細
border-top-color:black; #設置頂部邊框顏色
border-top-style: solid; #設置頂部邊框線條類型，分為solid,dashed,dotted
*/
/*上面三句可簡寫為一句, 並測試一下其他邊框線條類型效果
border-top:10px solid black;
border-left:10px dashed black;
border-right:10px dotted black;
border-bottom:10px solid black;
*/
生產環境下，4個邊框的樣式一般是一樣的，那么此時還可以簡寫
border:10px solid black; #這里的順序可以隨意
2. padding，設置盒子四邊的內邊距
#增加padding屬性時，會使盒子尺寸變大， 用法如下
padding-top:
padding-right:
padding-bottom:
padding-left:
padding:20px 10px 20px 10px; #如果是4個值，按照上右下左的順序設置
padding:20px 10px; #如果是2個值，第一個值表示上下，第2個值表示左右
padding:10px; #也可以用一個值設置4邊
3. margin，設置盒子外邊距
#處理盒子間以及盒子和瀏覽器四周之間的間距，margin的設置屬性和padding相同
#特殊情況，外邊距合並：當2個盒子分別設置了margin-bottom:100px, margin-top:50px. 此時2個盒子間的垂直間距並非150px, 而是取他們之間大的值，也就是100px，解決方式是只設置盒子的margin-top；
如果2個盒子的margin:top和margin:bottom都設置為100px，那么他們之間的垂直間距為100px
左右間距正常計算
#<body>自帶屬性使其中的內容和瀏覽器四周有8px的間距，可用margin處理
#使用margin屬性是盒子水平居中
margin:100px auto; #100px是設置上下，auto是自動平分左右
}
</style>
</head>
<body>
<div class="box"></div>
</body>
例子2，三個盒子在一個頁面的布局測試
<head>
<style type="text/css">
.box1,.box2,.box3{
width:50px;
height:50px;
background-color:gold;
margin:20px; #maigin的尺寸是在盒子外的設置
}
.box2,.box3{
border:50px solid black;
}
.box3{
padding:50px;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
盒子真實尺寸計算方法：
寬度=width+左右padding值+左右border值
高度=height+上下padding值+上下border值
綜合練習，做下面的標題
<head>
<style type="text/css">
.box{
width:385px; #400-15，總寬度-padding-left
height:35px; #54-1-3-padding-top
border-top:1px solid #f00;
border-bottom:3px solid #666;
font-size:20px; #文字的大小不會把盒子撐大
font-family:'Microsoft Yahei';
line-height:20px; #微軟雅黑有內置行高，不是20px，所以需要為字體重新設置行高
color:#333;
padding-left:15px #設置文字左邊內間距
padding-top:15px; #（50-20）/2
}
.box2{
width:400px;
height:50px;
border-top:1px solid #f00;
border-bottom:3px solid #666;
font-size:20px;
font-family:'Microsoft Yahei';
text-indent:15px; #設置文字左邊內間距
#設置垂直居中，這種方法是生產環境下常用的，行高相當於文字+上下padding, 只能用於文字垂直居中
line-height:50px;
#水平居中的方法text-align:center
}
</style>
</head>
<body>
<div class="box">新聞標題</div>
<br /><br />
<div class="box2">新聞標題2</div>
</body>
二. margin-top塌陷，如下，想使內嵌的盒子.box垂直居中顯示
<head>
<style type="text/css">
.con{
width:300px;
height:200px;
background-color:gold;
}
.box {
width:100px;
height:100px;
background-color:green
margin-top:50px; #設置內部盒子垂直居中顯示
}
</style>
</head>
<body>
<div class="con">
<div class="box"></div>
</div>
</body>
初始效果如下圖左，設置.box中margin-top:50px后顯示如圖右，發現設置的效果居然跑到.con盒子了，這種效果就叫做margin-top的塌陷。
解決方法如下
1. 外部盒子設置一個邊框，如下
.con{
#需要減去邊框的上下左右1px
width:298px;
height:198px;
background-color:gold;
border:1px solid gold;
}
2. 外部盒子設置overflow:hidden
.con{
width:300px;
height:200px;
background-color:gold;
overflow:hidden
}
3. 使用偽元素類，類似於給盒子加了個邊框，生產環境中常用這種方法
1）首先定義一個新的類選擇器.clearfix，這個名字已經約定俗稱了
.clearfix:before{
content:"";
display:table;
}
2)在body中的外邊框中div標簽加入.clearfix類
<body>
<div class="con clearfix">
<div class="box"></div>
</div>
</body>
想要的最終效果如下
三. 元素溢出
<head>
<style type="text/css">
.con{
width:300px;
height:200px;
background-color:gold;
}
.box {
width:100px;
height:600px; #使內部盒子的高度比外部盒子高度高, 這就叫溢出
background-color:green
}
</style>
</head>
<body>
<div class="con">
<div class="box"></div>
</div>
</body>
解決方法就是在.conf中加入overflow屬性
.con{
....
overflow:hidden;
}
overflow的設置項：
1、visible 默認值。內容不會被修剪，會呈現在元素框之外。
2、hidden 內容會被修剪，並且其余內容是不可見的，此屬性還有清除浮動、清除margin-top塌陷的功能。
3、scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
4、auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
5、inherit 規定應該從父元素繼承 overflow 屬性的值，不常用。