一 盒子模型
1.1 盒子中的區(qū)域
一個盒子中最主要的屬性：
width是“寬度”的意思歼疮，CSS中width指的是內(nèi)容的寬度，而不是盒子的寬度。
height是“高度”的意思，CSS中height指的是內(nèi)容的高度，而不是盒子的高度
padding是“內(nèi)邊距”的意思
border是“邊框”
margin是“外邊距”
web中的盒子模型與安卓界面設計中的并不一致霎褐。安卓開發(fā)中布局真實占有寬高依靠width和height決定，布局不會溢出衡查。而web開發(fā)中則是以padding瘩欺、border、寬度和高度共同參與拌牲，并且內(nèi)部會溢出俱饿。
web中的padding描述方向順序：上 右? 下 左
padding: 30px 40px;相當于 上下30 左右40
padding: 20px;
padding-left: 30px;//大小屬性要有順序 小屬性不能寫在大屬性前面。
在安卓中只能padding生效? 在web中由于層疊性同時生效塌忽。
1.2 border
一個border是由三個小屬性綜合而成：
border-width? border-style??border-color拍埠。
如果某一個小要素后面是空格隔開的多個值，那么就是上右下左的順序：
border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blueyellow;
二土居、標準文檔流
宏觀的講枣购，我們的web頁面和photoshop等設計軟件有本質的區(qū)別：web頁面的制作，是個“流”擦耀，必須從上而下棉圈，像“織毛衣”。而設計軟件眷蜓，想往哪里畫個東西分瘾，都能畫。
我們要看看標準流有哪些微觀現(xiàn)象：
1）空白折疊現(xiàn)象：
比如吁系，如果我們想讓img標簽之間沒有空隙德召，必須緊密連接：
<img src="images/0.jpg" /><imgsrc="images/1.jpg" /><img src="images/2.jpg" />
2）高矮不齊，底邊對齊
3）自動換行汽纤，一行寫不滿上岗，換行寫。
4.1 塊級元素和行內(nèi)元素
標準文檔流等級森嚴蕴坪。標簽分為兩種等級：
1）塊級元素
● 霸占一行肴掷，不能與其他任何元素并列
● 能接受寬、高
●如果不設置寬度背传，那么寬度將默認變?yōu)楦赣H的100%捆等。
2）行內(nèi)元素
● 與其他行內(nèi)元素并排
● 不能設置寬、高续室。默認的寬度，就是文字的寬度谒养。
在HTML中挺狰，我們已經(jīng)將標簽分過類明郭，當時分為了：文本級、容器級丰泊。
文本級：p薯定、span、a瞳购、b话侄、i、u学赛、em
容器級：div年堆、h系列、li盏浇、dt变丧、dd
CSS的分類和上面的很像，就p不一樣：
所有的文本級標簽绢掰，都是行內(nèi)元素痒蓬，除了p，p是個文本級滴劲，但是是個塊級元素攻晒。
所有的容器級標簽都是塊級元素。
4.2 塊級元素和行內(nèi)元素的互相轉換
塊級元素可以設置為行內(nèi)元素
行內(nèi)元素可以設置為塊級元素
可以通過給標簽設置顯示模式班挖，改變元素的行內(nèi)鲁捏、塊級性質
display:顯示模式。inline(轉為行內(nèi)元素) block(轉為塊級元素)
div{
? ? ? display: inline;
? ? ? background-color: pink;
? ? ? width:500px;
? ? ? height: 500px;?????????????
}
標準流中的限制非常多聪姿，所以可以通過某些手段脫離標準文檔流：
css中一共有三種手段碴萧，使一個元素脫離標準文檔流：
1）浮動
2）絕對定位
3）固定定位
三、浮動
浮動是css里面布局最常用的屬性
3.1 浮動的元素脫標
脫離標準文檔流后末购，一個元素就能夠并排且設置寬高了破喻。
3.2 浮動元素的互相貼靠
如果有足夠空間 就會緊貼前一個元素，如果沒有 則遞增尋找更前面的元素盟榴。若確實沒有足夠空間曹质，則元素自身單獨成行
3.3 浮動的元素有“字圍” 效果
當文字夠多時，浮動的元素可以擋住盒子擎场，但是擋不住盒子內(nèi)部的文字羽德。
關于浮動我們要強調(diào)一點，浮動這個東西迅办，我們在初期一定要遵循一個原則：
永遠不是一個東西單獨浮動宅静，浮動都是一起浮動，要浮動站欺，大家都浮動姨夹。
3.4 收縮
浮動的元素如果沒有width,那么將自動鎖緊為內(nèi)容的寬度纤垂。
四、浮動的清除
3.1 清除浮動方法1：給浮動的元素的祖先元素加高度磷账。
有高度的盒子峭沦，才能關住浮動。
3.2 清除浮動方法2：clear both
網(wǎng)頁制作中逃糟，高度height很少出現(xiàn)吼鱼。為什么？因為能被內(nèi)容撐高绰咽！那也就是說菇肃，方法1，工作中用的很少剃诅。
clear就是清除巷送，both指的是左浮動、右浮動都要清除矛辕。意思就是：清除別人對我的影響笑跛。
這種方法有一個非常大的、致命的問題聊品，margin失效了飞蹂。
3.3 清除浮動方法3：隔墻法
用一個空的盒子自帶高度和clear both一起使用 撐起一個高度
內(nèi)墻法：不僅僅讓后面的浮動元素不去追前面的浮動元素了，并且能把第一個盒子的高度撐開翻屈。
3.4 清除浮動方法4：overflow:hidden
表示“溢出隱藏”陈哑。所有溢出邊框的內(nèi)容，都要隱藏掉伸眶。
一個父親不能被自己浮動的兒子惊窖，撐出高度。但是厘贼，只要給父親加上overflow:hidden; 那么界酒，父親就能被兒子撐出高了，并且margin生效了嘴秸。這是一個偏方毁欣。
3.5 瀏覽器兼容問題
1) IE6、7岳掐，不支持小于12px的盒子凭疮。解決辦法：將盒子的字號設置小，比如0px串述。
瀏覽器hack执解，hack就是黑客。就是使用瀏覽器提供的后門纲酗，針對某一種瀏覽器做兼容材鹦。
IE6留了一個后門逝淹，只要給css屬性之前加上下劃線，這個屬性就是只有IE6能識別的專屬屬性桶唐。解決微型盒子寫法：_font-size:0;
2) IE6不支持用overflow:hidden;清除浮動。
解決方法：追加_zoom:1;
解決兼容問題的這兩個屬性茉兰，稱為伴生屬性
五尤泽、margin
5.1 margin的塌陷現(xiàn)象
標準文檔流中，豎直方向的margin不疊加规脸，以最大的為準坯约。不在標準流中是沒有塌陷現(xiàn)象的。
5.2 盒子居中margin:0 auto;
margin的值可以為auto莫鸭，表示自動闹丐。當left、right兩個方向被因，都是auto的時候卿拴，盒子居中了：
注意：
1）使用margin:0 auto; 的盒子，必須有width梨与，有明確的width
2）只有標準流的盒子堕花，才能使用margin:0 auto; 居中。也就是說粥鞋，當一個盒子浮動了缘挽、絕對定位了、固定定位了呻粹，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子壕曼，不是居中文本。文本的居中等浊，要使用text-align:center;
5.3 善于使用父親的padding而不是兒子的margin
如果父親沒有border腮郊，那么兒子的margin實際上踹的是“流”，踹的是這“行”凿掂。所以伴榔，父親整體也掉下來了
margin這個屬性，本質上描述的是兄弟和兄弟之間的距離庄萎； 最好不要用這個marign表達父子之間的距離踪少。
5.4關于margin的IE6兼容問題
1. IE6雙倍margin BUG:
1) 當出現(xiàn)連續(xù)浮動的元素，浮動方向和margin方向相同時糠涛，隊首元素會產(chǎn)生雙倍margin援奢。
解決方案：使用浮動方向和margin方向相反的屬性。并且這是現(xiàn)在開發(fā)的一種習慣忍捡。
2) 使用hack(沒必要)
單獨給隊首的元素一個一半的_margin屬性集漾。
2.IE6的3px BUG：
IE6中切黔，兒子浮動并且使用margin，結果margin的值會多出3px具篇。
解決辦法：不用管纬霞，因為根本就不允許用兒子踹父親。所以驱显，如果你出現(xiàn)了3px bug诗芜，說明你的代碼不標準。
