盒模型

在 htm 中每一個元素都可以看成是一個盒子骡男，默認情況下盒子的邊框是無骚亿，背景色是透明的俱笛，所以在默認情況下看不到盒子磕仅。

盒子由 margin , border , padding , content （盒子中的內(nèi)容）四部分組成。

1螺垢、margin 元素與元素之間的距離
　　a喧务、上邊距 margin-top
　　b、右邊距 margin-right
　　c枉圃、下邊距 margin-bottomd
　　d、左邊距 margin-leftb

A庐冯、1 個屬性值——margin:10px;表示上下左右的值都是該值
　　B孽亲、2 個屬性值 ——margin:10px 20px;前者表示上下值，后者表示左右的值
　　C展父、4 個屬性值——margin:10px 20px 30px 5px;表示上返劲、右、下栖茉、左
　　D篮绿、3 個值——margin:10px 20px 5px;(一般不用)表示上、左右吕漂、下

2亲配、border(對不同的邊框設(shè)置不同的屬性值 如同上述（a、b、c吼虎、d）（A犬钢、B、C思灰、D）格式
　　邊框粗細 border-width
　　邊框樣式 border-style
　　邊框顏色 border-color
3玷犹、padding 內(nèi)邊距 用于控制內(nèi)容與邊框的距離對 padding 設(shè)置不同的方向和數(shù)值 如同上述（a、b洒疚、c歹颓、d）和（A、B油湖、C巍扛、D）格式)
　　盒子在標準流中的定位原則：行內(nèi)元素之間的水平 margin 相加塊級元素之間的豎直 margin 取最大值（這個現(xiàn)象稱為 margin 的塌陷（合并）現(xiàn)象

display 屬性

display：none;（隱藏不占網(wǎng)頁空間）
　　display：block（將目標元素轉(zhuǎn)換成塊元素）span 原本是行內(nèi)元素，設(shè)置寬高是沒有效果的肺魁，只有轉(zhuǎn)換成塊元素才有效果电湘。
　　display：inline（將目標元素設(shè)置為行內(nèi)元素）轉(zhuǎn)換成了行內(nèi)元素，則設(shè)置寬高沒有效果display：inline-block（將目標元素設(shè)置為行內(nèi)塊元素）既具有行元素特性鹅经，又具有塊元素的特性
浮動
“標準文檔流”（Normal Document Stream）寂呛，簡稱“標準流”，是指在不使用其他與排列和定位相關(guān)的特殊 CSS 規(guī)則時瘾晃，各種元素的排列規(guī)則贷痪。
float：none(默認)/left（左浮動）/right(右浮動)

浮動：使元素脫離文檔流。

1.所有的元素都可以浮動蹦误。
　　2.具有 float 屬性元素在父標簽中是不占空間的劫拢。 3.float 能解決標簽之間有間隙的問題。

float 對行內(nèi)屬性標簽的影響：
　　1强胰、 float 之后可以設(shè)置 width 和 height 屬性舱沧。
　　2、并支持 margin 和 padding 屬性偶洋。

float 對塊屬性標簽的影響
　　1熟吏、在沒有設(shè)置寬高的情況下浮動后，內(nèi)容撐開寬度高度玄窝。
　　2牵寺、可以使塊屬性元素并排排列。

清除浮動

1恩脂、clear 應(yīng)用的原理是清除元素兩側(cè)浮動元素帶來的影響帽氓。

clear: left; 左側(cè)不允許有浮動元素（本身起作用），鄰后的元素需清除左側(cè)浮動元素帶來的影響則可以用 clear:left俩块； 進行清除黎休。
　　clear: right; 右側(cè)不允許有浮動元素（本身起作用）浓领，鄰后的元素需清除右側(cè)浮動元素帶來的影響則可以用 clear:right；進行清除奋渔。
　　clear: both;清除元素兩側(cè)浮動影響镊逝。原理：添加一個空 div，利用 css 的 clear:both 清除浮動嫉鲸，讓父級 div 能自動獲取到高度撑蒜。

2、overflow: hidden;超出內(nèi)容隱藏
(父級下的子元素都是浮動狀態(tài)玄渗，父級添
　　 overflow:hidden;屬性解決子元素浮動造成父級高度塌陷現(xiàn)象座菠，父級的相鄰元素正常顯示。)
　　 overflow: visible：顯示超出內(nèi)容藤树，不剪切內(nèi)容也不添加滾動條 　　 　　overflow: auto：如果內(nèi)容被修剪浴滴，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
　　overflow: scroll：內(nèi)容會被修剪岁钓，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容
3升略、after 偽類清除浮動
　　 .clearfix:after {content:""; display:block;clear:both; }
　　 .clearfix { zoom:1; }//IE 清除浮動

Eg: <div class="clearfix">
        <div class="left wh">我是浮動 div 一</div>
        <div class="left wh">我是浮動 div 二</div>
        <div class="left wh">我是浮動 div 三</div>
    </div>