學(xué)習(xí)資源：
1貌踏、學(xué)習(xí)CSS布局
2邓梅、CSS 禪意花園
3尿瞭、CSS 開發(fā)者指南【MDN】
4蚀之、HTML Dog
5蝗敢、CSS ZEN GARGEN
HTML/CSS/JS的前世今生【過去的需要了解CSS2，未來的需要掌握CSS3】
學(xué)習(xí)CSS布局
沒有布局
display
1足删、每個元素都有一個默認的display屬性寿谴，其值與元素的類型有關(guān)。
2失受、可以重寫讶泰。比如：把li元素最改成：display: inline;咏瑟，制作水平菜單。
3痪署、設(shè)置成block的元素與設(shè)置成inline的元素的區(qū)別码泞？
4、設(shè)置成none用在哪些地方狼犯？比如：script標簽是display: none;余寥。常用在js中控制元素的顯示與隱藏【彈出框】。
5悯森、display: none;與visibility: hidden;的區(qū)別宋舷？
margin: auto; 與 max-width
{width: 600px; margin: 0 auto;}與{max-width: 600px; margin: 0 auto;}
當瀏覽器寬度小于元素的寬，就會產(chǎn)生水平方向的滾動條瓢姻。
解決：提倡使用后者祝蝠。處理小窗口視圖【移動設(shè)備】。
針對display屬性是block的元素汹来。
與元素寬度相關(guān)的盒子模型
1、元素的寬度是什么改艇？包含了什么收班？
2、盒子【margin-left + border-left + padding-left + content + padding-right + border-right + margin-right】
box-sizing->盒子模型的重點
1谒兄、border-box與content-box
2摔桦、元素box-sizing的默認屬性是content-box，即：元素的寬和高是content部分承疲；
3邻耕、border-box：元素的寬和高是border+padding+content
定位
position
1、static【沒有定位燕鸽、在文檔流中】
2兄世、relative【相對于自身定位、在文檔流中】
3啊研、fixed【相對于瀏覽器定位御滩，不在文檔流中】
4、absolute【相對于離它最近的非static定位的父元素定位党远，如果沒有削解，就是相對于body定位，不在文檔流中】
5沟娱、例子氛驮？？
float屬性
1济似、文字環(huán)繞圖片
clear屬性
1、控制浮動
如何清除浮動蚪缀？
1纳猫、這是一潭很深的水！
如何使用浮動布局蛾找？
1、兩列布局赵誓，三列布局打毛，，俩功，
2幻枉、用定位實現(xiàn)同樣的布局？诡蜓？
百分比寬度【百分比的坑】
1熬甫、相對計量單位的關(guān)鍵點是：相對于誰？
2蔓罚、百分比寬度布局【響應(yīng)式布局】
媒體查詢
1椿肩、做針對各種設(shè)備兼容的頁面
2、meta viewport豺谈？郑象？？
inline-block
1茬末、IE6厂榛、IE7不支持該屬性值
2、hasLayout【只是用來支持舊的瀏覽器】
3丽惭、inline-block布局與float布局【具體實現(xiàn)與對比】
4击奶、inline-block布局注意的點：
vertical-align 屬性會影響到 inline-block 元素，你可能會把它的值設(shè)置為 top 责掏。
你需要設(shè)置每一列的寬度
如果HTML源代碼中元素之間有空格柜砾，那么列與列之間會產(chǎn)生空隙
【沒仔細理解，明天看】
columns屬性【CSS布局】
1换衬、支持IE9及其以上
2局义、例子
flex-box的各種布局
1、支持性不友好
2冗疮、例子
CSS框架
