內(nèi)容簡(jiǎn)述
關(guān)于CSS，確實(shí)太繁雜了喜喂，內(nèi)容多瓤摧。寫好不易，基本上就這個(gè)調(diào)了玉吁。大家肯定聽(tīng)過(guò)CSS奇淫技巧吧照弥，關(guān)于這個(gè)我還沒(méi)有去深入了解，只是說(shuō)普通的效果啥的进副，我基本沒(méi)問(wèn)題了这揣。我之前學(xué)CSS的時(shí)候也是感覺(jué)很心累，體會(huì)到了設(shè)計(jì)不當(dāng)影斑，對(duì)CSS屬性理解不深给赞，繼而造成的牽一發(fā)而動(dòng)全身的恐怖事件！鸥昏！塞俱，太可怕了！吏垮！
只要我稍微改動(dòng)一下障涯，搞不好整個(gè)頁(yè)面都亂了罐旗，我之前在百度前端技術(shù)學(xué)院里做任務(wù)，讓我體會(huì)到了這一點(diǎn)唯蝶，不過(guò)那是之前九秀，后來(lái)寫的頁(yè)面多了，看看別人總結(jié)的經(jīng)驗(yàn)粘我，慢慢的明白CSS應(yīng)該如何寫了鼓蜒，如果你研究過(guò)Bootstrap的源碼，那么你的css肯定不差征字，后面我也會(huì)研究BT的源碼都弹，到時(shí)候再更新吧。
這篇文章講的是CSS入門核心匙姜，你只要把這個(gè)學(xué)會(huì)了畅厢，自然CSS大體定格了，那么究竟講啥子呢氮昧？ 我分成如下幾部分來(lái)講解：
tips: : 以下例子框杜，均以Google瀏覽器為準(zhǔn)
外補(bǔ)白(margin)內(nèi)補(bǔ)白(padding)繼承特性(inherit)標(biāo)準(zhǔn)文檔流(normal)瀏覽器默認(rèn)樣式(user agent stylesheet)布局(layout)定位(position)樣式層疊(優(yōu)先選擇模式)
溫故而知新,可以為師矣
外補(bǔ)白(margin)
學(xué)習(xí)CSS，一定要會(huì)看盒子模型!! 看下面代碼：（以下代碼袖肥，瀏覽器默認(rèn)樣式均沒(méi)有）
大家馬上就知道咪辱，頁(yè)面上該是啥樣了吧，但是肯定也會(huì)有你理解錯(cuò)的地方啦椎组，我們一起來(lái)看看
首先看整體效果：
嗯油狂，和我想的一樣，再來(lái)看one的盒子模型：
可以看到庐杨，盒子one的四周都有20px的間隔选调，這個(gè)就是margin，也就是說(shuō)灵份，在我周圍20px范圍內(nèi)是不允許有任何東西的Ｈ士啊！
其實(shí)盒子two的盒子模型也是一樣的填渠，所以我們很容易理解整體效果了弦聂。我們現(xiàn)在知道了
margin作用于兄弟元素，也就是說(shuō)氛什，同級(jí)別的莺葫，我的margin就是我的保護(hù)區(qū)，無(wú)論你是誰(shuí)枪眉，你都不許靠近我的保護(hù)區(qū)捺檬，你只能在外面站
但是，下面這個(gè)你可能不知道了贸铜，可以看到堡纬，我們這個(gè)代碼聂受，對(duì)one和two來(lái)說(shuō)，有共同一個(gè)父級(jí)烤镐，我們看到蛋济，原來(lái)，左邊也有20px的距離呢炮叶！
看明白了吧碗旅，其實(shí)對(duì)于父元素而言，margin只會(huì)在水平方向起作用镜悉，豎直方向不起作用哦祟辟，所以，你是不是有經(jīng)歷侣肄。改了子元素的margin-top川尖，握草，整個(gè)布局都亂了茫孔，就是這個(gè)道理，父元素的頂部是緊貼子元素的被芳。還有一點(diǎn)缰贝，body的盒子模型和container是一樣的
接著分析，看下面：
咦畔濒，怎么這里又頂部有了20px呢剩晴？不是說(shuō)不起作用嗎？侵状，其實(shí)赞弥，這個(gè)是html的盒子模型，下面會(huì)講到瀏覽器的默認(rèn)樣式趣兄，html默認(rèn)是沒(méi)有margin和padding的绽左，也就是說(shuō)，所有的內(nèi)容艇潭，都是html的content區(qū)域
margin-top 的20px雖然沒(méi)有對(duì)父級(jí)元素起作用拼窥，但是它讓父級(jí)元素的父級(jí)元素body的 margin-top 為20px了，這個(gè)很重要.
margin的性質(zhì)
有一個(gè)性質(zhì)蹋凝，那就是不疊加鲁纠，取最大！還是上面那個(gè)例子鳍寂，如果我設(shè)置container的margin-top為20px 是不會(huì)有任何變化的改含，為什么呢？因?yàn)?code>container , body是父子關(guān)系迄汛，根據(jù)上面說(shuō)的捍壤，他們兩頂部一直貼邊骤视，你設(shè)置了container的margin-top為20px，本來(lái)就有20px的間距白群，你一樣的值尚胞，他當(dāng)然不會(huì)變，如果你設(shè)置成30帜慢，那么就會(huì)往下移動(dòng)10px了笼裳，這是特性。
內(nèi)補(bǔ)白(padding)
上面講了外補(bǔ)白粱玲，這里講內(nèi)補(bǔ)白躬柬，其實(shí)內(nèi)補(bǔ)白沒(méi)有什么難的，但是呢抽减，很多人允青，也會(huì)掉坑里，平時(shí)寫CSS的時(shí)候不注意卵沉，容易掉坑颠锉，簡(jiǎn)單的東西都要寫很久，就是因?yàn)闆](méi)有理解其特殊性史汗。
內(nèi)補(bǔ)白和外補(bǔ)白都需要理解盒子模型琼掠，那么在外補(bǔ)白我們已經(jīng)見(jiàn)過(guò)盒子模型了，也有padding停撞，margin瓷蛙，content，border呀,看一下我改動(dòng)的代碼：
一下子貼了三張圖戈毒，padding是什么呢艰猬？說(shuō)白了就是父與子的關(guān)系，只存在父子關(guān)系埋市，所有設(shè)置了padding的元素冠桃，那么里面的東西，都只能在盒子padding里面寫入恐疲，這個(gè)屬性腊满，一般用于，內(nèi)容區(qū)域與邊框有一定的規(guī)律性間隔培己，用padding是最合適的了碳蛋，注意哦，此時(shí)盒子one的總大小不是120 * 120了喲省咨，而是140 * 140啦肃弟，這是個(gè)坑！！ 總結(jié)一下：
padding 是針對(duì)父與子的笤受，父元素設(shè)置了padding穷缤，子元素排布不在頂邊，而是與父元素邊框有距離了箩兽。
tips ：這里要注意一點(diǎn)津肛，就是你設(shè)置的width和高度是不包含padding的，所以一旦設(shè)置了width和height汗贫，你在設(shè)置padding的時(shí)候身坐，一定要注意，有可能會(huì)打亂布局落包，我們應(yīng)該加入box-sizing:border-box部蛇，這樣的話，width就包含padding了咐蝇，仔細(xì)觀察盒模型
- 最后總結(jié)：標(biāo)準(zhǔn)盒模型涯鲁，在盒子瀏覽器占據(jù)的總寬度是這樣計(jì)算的：border+padding+content （你設(shè)置的width，height是content的寬度）
- 在標(biāo)準(zhǔn)文檔流下有序，一個(gè)盒子占據(jù)瀏覽器的位置 ：margin+border+padding+content ( 也就是說(shuō)抹腿，這些區(qū)域不能有其他的元素占據(jù) )
繼承特性(inherit)
繼承特性，這個(gè)就不好講的很細(xì)旭寿，但是你想要好寫好CSS幢踏，不僅僅你要理解繼承 ，而且繼承還要用的妙许师，這樣在你寫CSS的過(guò)程中，可以精簡(jiǎn)很多代碼僚匆。我現(xiàn)在看以前寫的CSS代碼微渠，很垃圾，完全就是堆疊代碼咧擂，慘不忍睹逞盆。
繼承性是指指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性，即子元素可以繼承父元素的屬性松申，例如下面的代碼云芦，div中包含2個(gè)p標(biāo)簽，1個(gè)span標(biāo)簽贸桶，當(dāng)給div設(shè)置字體顏色為紅色時(shí)舅逸，他的子標(biāo)簽會(huì)繼承父元素的屬性，因而會(huì)顯示紅色皇筛。 在CSS中以text-琉历、font-、line- 開(kāi)頭的屬性都是可以繼承的。
CSS里面有許多屬性是可以繼承的旗笔，注意了彪置，繼承一定是繼承父級(jí)元素的樣式！蝇恶！
在這里我就列出可以繼承的屬性拳魁，和不能繼承的屬性啦
不可繼承的：display、margin撮弧、border潘懊、padding、background想虎、height卦尊、min-height、max-height舌厨、width岂却、min-width、max-width裙椭、overflow躏哩、position、left揉燃、right扫尺、top、bottom炊汤、z-index正驻、float、clear抢腐、table-layout姑曙、vertical-align、page-break-after迈倍、page-bread-before和unicode-bidi伤靠。
所有元素可繼承：visibility和cursor。
內(nèi)聯(lián)元素可繼承：letter-spacing啼染、word-spacing宴合、white-space、line-height迹鹅、color卦洽、font、font-family斜棚、font-size逐样、font-style、font-variant、font-weight脂新、text-decoration挪捕、text-transform、direction争便。
終端塊狀元素可繼承：text-indent和text-align级零。
列表元素可繼承：list-style、list-style-type滞乙、list-style-position奏纪、list-style-image。
舉例：
- a 標(biāo)簽的字體顏色不能被繼承斩启，例如將上面代碼的div標(biāo)簽中代碼改為如下的代碼后序调，a標(biāo)簽的字體顏色是不會(huì)改變的，通過(guò)頁(yè)面的F12可以查看得到兔簇，a標(biāo)簽是有一個(gè)默認(rèn)的
color: -webkit-link;字體顏色屬性发绢，所以給父元素設(shè)置顏色是不能改變a標(biāo)簽字體的顏色- h標(biāo)簽字體的大小也是不能被繼承的，如下代碼給父元素在設(shè)置一個(gè)字體屬性20px垄琐，在div中添加一個(gè)h2標(biāo)簽边酒，在瀏覽器中可以發(fā)現(xiàn)h2標(biāo)簽中的字體大小不會(huì)改變，因?yàn)閔2標(biāo)簽中也有一個(gè)默認(rèn)的默認(rèn)的
font-size: 1.5em;字體大小屬性狸窘，div 標(biāo)簽的高度如果不設(shè)置由內(nèi)容來(lái)決定（沒(méi)有內(nèi)容高度為0）墩朦，寬度默認(rèn)由父元素繼承過(guò)來(lái)，下面的代碼就很好的演示了div的寬高翻擒，在每個(gè)div標(biāo)簽后面添加了一個(gè)br標(biāo)簽來(lái)強(qiáng)制換行氓涣，因?yàn)槿绻皇褂胋r標(biāo)簽來(lái)強(qiáng)制換行的話，div就會(huì)緊緊挨著一起陋气，看不不出來(lái)div的高度春哨，第一個(gè)div因?yàn)闆](méi)有內(nèi)容，所以在瀏覽器上不顯示出來(lái)恩伺，而第二div里面添加了一句話，但是高度是由里面的內(nèi)容撐出來(lái)的椰拒，第三個(gè)div里面也是一句話晶渠，并且在內(nèi)容當(dāng)中使用了一個(gè)br標(biāo)簽來(lái)強(qiáng)制換行，這樣就會(huì)發(fā)現(xiàn)該div的高度會(huì)比第二div的高度要高燃观，如果繼續(xù)向div標(biāo)簽里面添加內(nèi)容褒脯，高度也會(huì)隨之相應(yīng)的變高。
a元素涉及到瀏覽器默認(rèn)樣式缆毁，下面會(huì)講到默認(rèn)樣式
標(biāo)準(zhǔn)文檔流(normal)
- 塊級(jí)：占一行番川，不管有多大，
我就占一行，占了一行颁督，誰(shuí)都不能再占我這一行,設(shè)置寬高起作用践啄，占一行之后，不夠一行的位置沉御，均是用margin替代,這一行不夠一整行的位置屿讽，我就另起一行。 - 行級(jí)：有多大吠裆，占多大伐谈，有空位子我就占,對(duì)此種標(biāo)簽設(shè)置寬高不起作用，每個(gè)行級(jí)標(biāo)簽?zāi)J(rèn)有間隔试疙，無(wú)法取消
- 規(guī)則：不管怎么占據(jù)诵棵，已經(jīng)被占據(jù)的位置，一定不能再被占
瀏覽器默認(rèn)樣式(user agent stylesheet)
每個(gè)標(biāo)簽都有默認(rèn)的樣式祝旷，比如a標(biāo)簽履澳，默認(rèn)藍(lán)色，下劃線缓屠，img標(biāo)簽?zāi)J(rèn)有邊框奇昙，p,ul li,dt,dd標(biāo)簽?zāi)J(rèn)有margin或者padding什么的，H1~H6標(biāo)簽字體形狀和大小敌完，都會(huì)有其默認(rèn)的樣式
已下是HTML储耐，和body的默認(rèn)樣式
html
width :瀏覽器寬度
height = 8px
padding 0,margin 0 border 0
body
height : 0
width:瀏覽器寬度
padding 0 margin 8px border 0
來(lái)看一段代碼:
可以看到，默認(rèn)樣式原來(lái)是這樣的呢滨溉！
還有很多標(biāo)簽的默認(rèn)樣式什湘，這里就不一一舉例，大家平時(shí)多看看晦攒，就記得住了闽撤。每個(gè)瀏覽器可能表現(xiàn)不一樣。
布局(layout)
display: none | inline-block | inline | block |visibility: visible | hidden | collapsefloat： left | rightclear：left | right | bothoverflow: hidden scorll | auto
float: 脫離標(biāo)準(zhǔn)文檔流 脯颜，不按正常路線走, 我飄起來(lái)了哟旗，在空中呢，其他的元素當(dāng)我不存在
設(shè)置浮動(dòng)后栋操，寬度不再默認(rèn)父級(jí)元素的寬度(所有浮動(dòng)的元素都是依次排闸餐，位置不夠往下走)
浮動(dòng)之后，父級(jí)元素坍塌矾芙，你可以理解舍沙，我在空中，我在頂層剔宪，我是最外面的圖層拂铡，其他人占了我的位置壹无，但是只顯示我，因?yàn)槲沂亲钔獾膱D層感帅。
看這個(gè)布局斗锭，你就明白了
提出幾個(gè)問(wèn)題：
- div是快級(jí)元素，為什么會(huì)和盒子one站在一起呢留瞳？不是說(shuō)塊級(jí)元素一定要占一行嗎?
- two盒子沒(méi)有設(shè)置寬度拒迅，那么寬度就是100%了，也就是body的寬度她倘，為什么沒(méi)有溢出body容器呢璧微？
當(dāng)你真正理解，我問(wèn)的問(wèn)題就都不是問(wèn)題了硬梁！理解布局前硫，什么頁(yè)面你都能搞定的！
clear：清除浮動(dòng)荧止，后面的元素對(duì)前面設(shè)置浮動(dòng)的元素屹电，不理睬，經(jīng)常用在受浮動(dòng)影響的元素（我們是不希望他受影響）
其實(shí)前面元素浮動(dòng)了跃巡，對(duì)后面同級(jí)元素肯定會(huì)受影響的危号，同級(jí)元素當(dāng)他不存在，肯定就從浮動(dòng)的元素位置排布嘛素邪，肯定有影響的外莲，而且父元素高度坍塌，這個(gè)很影響布局兔朦，所以我們要考慮周全偷线，深刻理解特性。
overflow : 超出隱藏 overflow-x/-y 在水平方向或者垂直方向隱藏
tips: overflow 屬性沽甥，一般不用再比較高的祖先輩元素声邦，其繼承特性很危險(xiǎn)！０谥邸亥曹！
定位(position)
人人都說(shuō)定位難，定位是干啥用的呢恨诱？定位的用處就是媳瞪，你要精確地控制元素的位置，比較特殊的位置胡野，普通文檔流和布局都搞不定的時(shí)候，就要用到定位了
position： static(默認(rèn)) | relative | absolute | fixed
元素
absolute: 絕對(duì)定位痕鳍， 定位硫豆？ 根據(jù)誰(shuí)來(lái)定龙巨？ （如果父級(jí)元素不存在定位元素 相對(duì)html定位）如果父級(jí)存在非static定位元素，則按照就近原則定位 , 一旦定位, 有了新的圖層熊响，（脫離文檔流 ）旨别，圖層頂層relative:相對(duì)定位，沒(méi)有脫離文檔流汗茄，占位置秸弛，相對(duì)自己原來(lái)的位置定位fixed:固定定位,相對(duì)于瀏覽器窗口定位，不隨內(nèi)容變化洪碳，一只固定在窗口位置z-index: (int)number 改變圖層递览，用于定位元素（非static）top,right,bottom,left: px percentage 只用于定位元素(非static定位),移動(dòng)
定位就這么多內(nèi)容了，這些應(yīng)該是比較容易理解瞳腌，可能應(yīng)用上就懵逼了绞铃，哈哈，初學(xué)的話嫂侍，都是這樣的
樣式層疊（優(yōu)先選擇樣式）
樣式有幾大引入方式
內(nèi)嵌儿捧，內(nèi)部樣式表，外部樣式表挑宠，默認(rèn)樣式菲盾，繼承樣式
- 內(nèi)嵌：就是寫在標(biāo)簽里面的
- 內(nèi)部樣式表：就是直接寫在頁(yè)面上的
- 外部樣式表：是一link形式引入的
- 默認(rèn)樣式：就是瀏覽器給的也叫（user agent stylesheeet）
- 繼承樣式：繼承父元素的樣式
圖解：
記住規(guī)則：
- 就近原則，內(nèi)嵌>內(nèi)部樣式表>外部樣式表
- 默認(rèn)樣式>繼承樣式（這兩種樣式都是最低級(jí)的那種）
其他屬性
其他屬性各淀，遇到難理解的在著重講一個(gè)懒鉴，屬性太多，有的很簡(jiǎn)單揪阿，沒(méi)有記錄的必要疗我，不過(guò)我覺(jué)得針對(duì)移動(dòng)端布局，這個(gè)還是很重要的南捂。
CSS參考手冊(cè)：推薦這個(gè)網(wǎng)站的不錯(cuò)：CSS參考手冊(cè)_WEB前端開(kāi)發(fā)參考手冊(cè)系列
