資訊專欄INFORMATION COLUMN
摘要：內(nèi)容簡(jiǎn)述關(guān)于，確實(shí)太繁雜了，內(nèi)容多。寫好不易，基本上就這個(gè)調(diào)了。里面有許多屬性是可以繼承的，注意了，繼承一定是繼承父級(jí)元素的樣式在這里我就列出可以繼承的屬性，和不能繼承的屬性啦不可繼承的和。內(nèi)聯(lián)元素可繼承。每個(gè)瀏覽器可能表現(xiàn)不一樣。
內(nèi)容簡(jiǎn)述
關(guān)于CSS，確實(shí)太繁雜了，內(nèi)容多。寫好不易，基本上就這個(gè)調(diào)了。大家肯定聽過(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)是不允許有任何東西的?。?/b>
其實(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)?b>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ì)觀察盒模型
繼承特性(inherit)最后總結(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ù) )
繼承特性，這個(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- 開頭的屬性都是可以繼承的。
CSS里面有許多屬性是可以繼承的，注意了，繼承一定是繼承父級(jí)元素的樣式?。?/b>
在這里我就列出可以繼承的屬性，和不能繼承的屬性啦
不可繼承的：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 | collapse
float: left | right
clear: left | right | both
overflow : 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è)還是很重要的，想看移動(dòng)端布局CSS請(qǐng)看我這篇文章：[HTML+CSS入門之CSS3移動(dòng)端布局]()
CSS參考手冊(cè)：推薦這個(gè)網(wǎng)站的不錯(cuò)：CSS參考手冊(cè)_WEB前端開發(fā)參考手冊(cè)系列
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112035.html
摘要：規(guī)定元素的上下文菜單。上下文菜單在用戶點(diǎn)擊元素時(shí)顯示。規(guī)定元素仍未或不再相關(guān)。規(guī)定是否對(duì)元素進(jìn)行拼寫和語(yǔ)法檢查。規(guī)定元素的行內(nèi)樣式。 一些說(shuō)明 寫在前面：HTML和CSS，當(dāng)你了解所有規(guī)則后，你應(yīng)該多寫頁(yè)面并記錄你出現(xiàn)的問(wèn)題，這才是學(xué)習(xí)HTML和CSS的最佳方法 這是我學(xué)習(xí)一段時(shí)間之后，再次回顧HTML，希望大家也對(duì)HTML有不一樣的認(rèn)識(shí) 我把HTML標(biāo)簽分成兩大類，重要的和不重要的，...
摘要：規(guī)定元素的上下文菜單。上下文菜單在用戶點(diǎn)擊元素時(shí)顯示。規(guī)定元素仍未或不再相關(guān)。規(guī)定是否對(duì)元素進(jìn)行拼寫和語(yǔ)法檢查。規(guī)定元素的行內(nèi)樣式。 一些說(shuō)明 寫在前面：HTML和CSS，當(dāng)你了解所有規(guī)則后，你應(yīng)該多寫頁(yè)面并記錄你出現(xiàn)的問(wèn)題，這才是學(xué)習(xí)HTML和CSS的最佳方法 這是我學(xué)習(xí)一段時(shí)間之后，再次回顧HTML，希望大家也對(duì)HTML有不一樣的認(rèn)識(shí) 我把HTML標(biāo)簽分成兩大類，重要的和不重要的，...
摘要：在我們深入研究這項(xiàng)新鮮的技術(shù)之前，讓我們先快速的復(fù)習(xí)原理的相關(guān)知識(shí)。同時(shí)，希望本文能對(duì)大家有所幫助。工欲善其事，必先利其器。 flex.css快速入門，極速布局 什么是flex.css? css3 flex 布局相信很多人已經(jīng)聽說(shuō)過(guò)甚至已經(jīng)在開發(fā)中使用過(guò)它，但是我想我們都會(huì)有一個(gè)共同的經(jīng)歷，面對(duì)它的各種版本，各種坑，傻傻的分不清楚，flex.css就是對(duì)flex布局的一種封裝，通過(guò)簡(jiǎn)潔...
摘要：在我們深入研究這項(xiàng)新鮮的技術(shù)之前，讓我們先快速的復(fù)習(xí)原理的相關(guān)知識(shí)。同時(shí)，希望本文能對(duì)大家有所幫助。工欲善其事，必先利其器。 flex.css快速入門，極速布局 什么是flex.css? css3 flex 布局相信很多人已經(jīng)聽說(shuō)過(guò)甚至已經(jīng)在開發(fā)中使用過(guò)它，但是我想我們都會(huì)有一個(gè)共同的經(jīng)歷，面對(duì)它的各種版本，各種坑，傻傻的分不清楚，flex.css就是對(duì)flex布局的一種封裝，通過(guò)簡(jiǎn)潔...
閱讀 2908·2023-04-26 02:23
閱讀 1724·2021-11-11 16:55
閱讀 3191·2021-10-19 11:47
閱讀 3425·2021-09-22 15:15
閱讀 2021·2019-08-30 15:55
閱讀 1086·2019-08-29 15:43
閱讀 1341·2019-08-29 13:16
閱讀 2240·2019-08-29 12:38
