盒子模型
使用width來設置盒子內(nèi)容區(qū)的寬度
使用height來設置盒子內(nèi)容區(qū)的高度
width和height只是設置的盒子內(nèi)容區(qū)的大小畅姊，而不是盒子的整個大小，盒子可見框的大小由內(nèi)容區(qū)热监，內(nèi)邊距和邊框共同決定
為元素設置邊框
要為一個元素設置邊框必須指定三個樣式
border-width:邊框的寬度
border-color:邊框顏色
border-style:邊框的樣式
使用border-width可以分別指定四個邊框的寬度
如果在border-width指定了四個值
則四個值會分別設置給上、右践美、下述寡、左，按照順時針的方向設置的
如果指定三個值
則三個值會分別設置給上裳食、左右矛市、下
如果指定兩個值
則兩個值會分別設置給上下芙沥、左右
如果指定一個值诲祸，則四邊全都是該值
除了border-width，CSS中還提供了四個border-xxx-width
xxx的值可能是top right bottom left
專門用來設置指定邊的寬度
設置邊框的顏色
和寬度一樣而昨，color也提供四個方向的樣式救氯，可以分別指定顏色
border-xxx-color
設置邊框的樣式
可選值：
none，默認值歌憨，沒有邊框
solid 實線
dotted 點狀邊框
dashed 虛線
double 雙線
style也可以分別指定四個邊的邊框樣式着憨，規(guī)則和width一致，同時它也提供border-xxx-style四個樣式务嫡，來分別設置四個邊
設置邊框
大部分的瀏覽器中甲抖，邊框的寬度和顏色都是有默認值漆改，而邊框的樣式默認值都是none
border
邊框的簡寫樣式，通過它可以同時設置四個邊框的樣式准谚，寬度挫剑，顏色
而且沒有任何的順序要求
border一指定就是同時指定四個邊不能分別指定
border-top border-right border-bottom border-left
可以單獨設置四個邊的樣式，規(guī)則和border一樣柱衔，只不過它只對一個邊生效
邊距
一樊破、內(nèi)邊距
內(nèi)邊距（padding），指的是盒子的內(nèi)容區(qū)與盒子邊框之間的距離唆铐，一共有四個方向：
padding-top
padding-right
padding-bottom
padding-left
內(nèi)邊距會影響盒子的可見框的大小哲戚，元素的背景會延伸到內(nèi)邊距
盒子的大小由內(nèi)容區(qū)、內(nèi)邊距和邊框共同決定
盒子可見框的寬度 = border-left-width + padding-left + width + padding-right + border-right-width
盒子可見框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
設置上內(nèi)邊距
padding-top: 100px;
設置右內(nèi)邊距
padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;
使用padding可以同時設置四個邊框的樣式艾岂，規(guī)則和border-width一致
二顺少、外邊距
外邊距指的是當前盒子與其他盒子之間的距離，他不會影響可見框的大小王浴，而是會影響到盒子的位置
盒子有四個方向的外邊距：
margin-top
margin-right
margin-bottom
margin-left
由于頁面中的元素都是靠左靠上擺放的祈纯，所以注意當我們設置上和左外邊距時，會導致盒子自身的位置發(fā)生改變叼耙，而如果是設置右和下外邊距會改變其他盒子的位置
設置上外邊距腕窥，即盒子的上邊框與其他盒子的距離
margin-top: 100px;
左外邊距
margin-left: 100px;
設置右和下外邊距
margin-right: 100px;
margin-bottom: 100px;
外邊距也可以指定為一個負值，如果外邊距設置的是負值筛婉，則元素會向反方向移動
margin-left: -100px;
margin-top: -100px;
margin-bottom: -100px;
margin-bottom: -100px;
margin還可以設置為auto簇爆，auto一般只設置給水平方向的margin
如果只指定，左外邊距或右外邊距的margin為auto則會將外邊距設置為最大值
垂直方向外邊距如果設置為auto爽撒，則外邊距默認就是0
如果將left和right同時設置為auto入蛆，則會將兩側(cè)的外邊距設置為相同的值，就可以使元素自動在父元素中居中
所以我們經(jīng)常將左右外邊距設置為auto硕勿，以使子元素在父元素中水平居中
margin-left: auto;
margin-right: auto;
margin-top: auto;
外邊距同樣可以使用簡寫屬性 margin哨毁，可以同時設置四個方向的外邊距,規(guī)則和padding一樣
margin: 10px 20px 30px 40px;
內(nèi)聯(lián)元素盒模型
盒模型分成內(nèi)容區(qū)、內(nèi)邊距 源武、邊框 扼褪、外邊距四個部分
內(nèi)聯(lián)元素不能設置width和height
width: 100px;
height: 100px;
設置水平內(nèi)邊距,內(nèi)聯(lián)元素可以設置水平方向的內(nèi)邊距*/
padding-left: 100px;
padding-right: 100px;
display和visibility
display
將一個內(nèi)聯(lián)元素變成塊元素
通過display樣式可以修改元素的類型
可選值：
inline：可以將一個元素作為內(nèi)聯(lián)元素顯示
block: 可以將一個元素設置塊元素顯示
inline-block：將一個元素轉(zhuǎn)換為行內(nèi)塊元素
可以使一個元素既有行內(nèi)元素的特點又有塊元素的特點，既可以設置寬高粱栖，又不會獨占一行
none: 不顯示元素话浇，并且元素不會在頁面中繼續(xù)占有位置
display: none;
使用該方式隱藏的元素，不會在頁面中顯示闹究，并且不再占據(jù)頁面的位置
visibility
visibility
可以用來設置元素的隱藏和顯示的狀態(tài)
可選值：
visible 默認值幔崖，元素默認會在頁面顯示
hidden 元素會隱藏不顯示
使用 visibility:hidden;隱藏的元素雖然不會在頁面中顯示，
但是它的位置會依然保持
overflow
子元素默認是存在于父元素的內(nèi)容區(qū)中，理論上講子元素的最大可以等于父元素內(nèi)容區(qū)大小
如果子元素的大小超過了父元素的內(nèi)容區(qū)赏寇，則超過的大小會在父元素以外的位置顯示
超出父元素的內(nèi)容吉嫩，我們稱為溢出的內(nèi)容
父元素默認是將溢出內(nèi)容，在父元素外邊顯示
通過overflow可以設置父元素如何處理溢出內(nèi)容：
可選值：
visible嗅定，默認值率挣，不會對溢出內(nèi)容做處理，元素會在父元素以外的位置顯示
hidden, 溢出的內(nèi)容露戒，會被修剪椒功，不會顯示
scroll, 會為父元素添加滾動條，通過拖動滾動條來查看完整內(nèi)容
該屬性不論內(nèi)容是否溢出智什，都會添加水平和垂直雙方向的滾動條
auto动漾，會根據(jù)需求自動添加滾動條，需要水平就添加水平荠锭，需要垂直就添加垂直旱眯，都不需要就都不加
文檔流
文檔流
文檔流處在網(wǎng)頁的最底層，它表示的是一個頁面中的位置证九，我們所創(chuàng)建的元素默認都處在文檔流中
元素在文檔流中的特點
塊元素
1.塊元素在文檔流中會獨占一行删豺，塊元素會自上向下排列
2.塊元素在文檔流中默認寬度是父元素的100%
3.塊元素在文檔流中的高度默認被內(nèi)容撐開
內(nèi)聯(lián)元素
1.內(nèi)聯(lián)元素在文檔流中只占自身的大小，會默認從左向右排列愧怜，如果一行中不足以容納所有的內(nèi)聯(lián)元素呀页，則換到下一行，繼續(xù)自左向右拥坛。
2.在文檔流中蓬蝶，內(nèi)聯(lián)元素的寬度和高度默認都被內(nèi)容撐開
當元素的寬度的值為auto時，此時指定內(nèi)邊距不會影響可見框的大小猜惋，而是會自動修改寬度丸氛，以適應內(nèi)邊距
浮動
塊元素在文檔流中默認垂直排列，所以這個三個div自上至下依次排開
如果希望塊元素在頁面中水平排列著摔，可以使塊元素脫離文檔流
使用float來使元素浮動缓窜，從而脫離文檔流
可選值：
none，默認值谍咆，元素默認在文檔流中排列
left禾锤，元素會立即脫離文檔流，向頁面的左側(cè)浮動
right卧波，元素會立即脫離文檔流时肿，向頁面的右側(cè)浮動
當為一個元素設置浮動以后（float屬性是一個非none的值），元素會立即脫離文檔流港粱，元素脫離文檔流以后，它下邊的元素會立即向上移動
元素浮動以后，會盡量向頁面的左上或這是右上漂浮查坪，直到遇到父元素的邊框或者其他的浮動元素
如果浮動元素上邊是一個沒有浮動的塊元素寸宏，則浮動元素不會超過塊元素
內(nèi)聯(lián)元素的浮動
在文檔流中，子元素的寬度默認占父元素的全部
當元素設置浮動以后偿曙，會完全脫離文檔流.
塊元素脫離文檔流以后氮凝，高度和寬度都被內(nèi)容撐開
開啟span的浮動
內(nèi)聯(lián)元素脫離文檔流以后會變成塊元素
作業(yè)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中關村商城簡單頁面布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
width: 1000px;
height: 150px;
background-color: yellowgreen;
margin: 0 auto;
}
.content{
width: 1000px;
height: 400px;
background-color: orange;
margin: 10px auto;
}
.left{
width: 200px;
height: 100%;
background-color: skyblue;
float: left;
}
.center{
width: 580px;
height: 100%;
background-color: yellow;
float: left;
margin: 0 10px;
}
.right{
width: 200px;
height: 100%;
background-color: pink;
float: left;
}
.footer{
width: 1000px;
height: 150px;
background-color: silver;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>
