HTML+CSS複習之CSS基礎篇

內容簡述

關於CSS，確實太繁雜了，內容多。寫好不易，基本上就這個調了。你們確定聽過CSS奇淫技巧吧，關於這個我尚未去深刻了解，只是說普通的效果啥的，我基本沒問題了。我以前學CSS的時候也是感受很心累，體會到了設計不當，對CSS屬性理解不深，繼而形成的牽一髮而動全身的恐怖事件！！，太可怕了！！

只要我稍微改動一下，搞很差整個頁面都亂了，我以前在百度前端技術學院裏作任務，讓我體會到了這一點，不過那是以前，後來寫的頁面多了，看看別人總結的經驗，慢慢的明白CSS應該如何寫了，若是你研究過Bootstrap的源碼，那麼你的css確定不差，後面我也會研究BT的源碼，到時候再更新吧。

這篇文章講的是CSS入門核心，你只要把這個學會了，天然CSS大致定格了，那麼究竟講啥子呢？ 我分紅以下幾部分來說解：

tips: : 如下例子，均以Google瀏覽器爲準

• 外補白(margin)

• 內補白(padding)

• 繼承特性(inherit)

• 標準文檔流(normal)

• 瀏覽器默認樣式(user agent stylesheet)

• 佈局(layout)

• 定位(position)

• 樣式層疊(優先選擇模式)

溫故而知新,能夠爲師矣

外補白(margin)

學習CSS，必定要會看盒子模型!! 看下面代碼：（如下代碼，瀏覽器默認樣式均沒有）

你們立刻就知道，頁面上該是啥樣了吧，可是確定也會有你理解錯的地方啦，咱們一塊兒來看看
首先看總體效果：

嗯，和我想的同樣，再來看one的盒子模型：

能夠看到，盒子one的四周都有20px的間隔，這個就是margin，也就是說，在我周圍20px範圍內是不容許有任何東西的！！
其實盒子two的盒子模型也是同樣的，因此咱們很容易理解總體效果了。咱們如今知道了

margin做用於兄弟元素，也就是說，同級別的，個人margin就是個人保護區，不管你是誰，你都不準靠近個人保護區，你只能在外面站

可是，下面這個你可能不知道了，能夠看到，咱們這個代碼，對one和two來講，有共同一個父級，咱們看到，原來，左邊也有20px的距離呢！

看明白了吧，其實對於父元素而言，margin只會在水平方向起做用，豎直方向不起做用哦，因此，你是否是有經歷。改了子元素的margin-top，握草，整個佈局都亂了，就是這個道理，父元素的頂部是緊貼子元素的。還有一點，body的盒子模型和container是同樣的
接着分析，看下面：

咦，怎麼這裏又頂部有了20px呢？不是說不起做用嗎？，其實，這個是html的盒子模型，下面會講到瀏覽器的默認樣式，html默認是沒有margin和padding的，也就是說，全部的內容，都是html的content區域

margin-top 的20px雖然沒有對父級元素起做用，可是它讓父級元素的父級元素body的 margin-top 爲20px了，這個很重要.

margin的性質

有一個性質，那就是不疊加，取最大！仍是上面那個例子，若是我設置container的margin-top爲20px 是不會有任何變化的，爲何呢？由於container , body是父子關係，根據上面說的，他們兩頂部一直貼邊，你設置了container的margin-top爲20px，原本就有20px的間距，你同樣的值，他固然不會變，若是你設置成30，那麼就會往下移動10px了，這是特性。

內補白(padding)

上面講了外補白，這裏講內補白，其實內補白沒有什麼難的，可是呢，不少人，也會掉坑裏，平時寫CSS的時候不注意，容易掉坑，簡單的東西都要寫好久，就是由於沒有理解其特殊性。
內補白和外補白都須要理解盒子模型，那麼在外補白咱們已經見過盒子模型了，也有padding，margin，content，border呀,看一下我改動的代碼：

一會兒貼了三張圖，padding是什麼呢？說白了就是父與子的關係，只存在父子關係，全部設置了padding的元素，那麼裏面的東西，都只能在盒子padding裏面寫入，這個屬性，通常用於，內容區域與邊框有必定的規律性間隔，用padding是最合適的了，注意哦，此時盒子one的總大小不是120 * 120了喲，而是140 * 140啦，這是個坑！！ 總結一下：

padding 是針對父與子的，父元素設置了padding，子元素排布不在頂邊，而是與父元素邊框有距離了。

tips ：這裏要注意一點，就是你設置的width和高度是不包含padding的，因此一旦設置了width和height，你在設置padding的時候，必定要注意，有可能會打亂佈局，咱們應該加入box-sizing:border-box，這樣的話，width就包含padding了，仔細觀察盒模型

• 最後總結：標準盒模型，在盒子瀏覽器佔據的總寬度是這樣計算的：border+padding+content （你設置的width，height是content的寬度）

• 在標準文檔流下，一個盒子佔據瀏覽器的位置 ：margin+border+padding+content ( 也就是說，這些區域不能有其餘的元素佔據 )

繼承特性(inherit)

繼承特性，這個就很差講的很細，可是你想要好寫好CSS，不只僅你要理解繼承 ，並且繼承還要用的妙，這樣在你寫CSS的過程當中，能夠精簡不少代碼。我如今看之前寫的CSS代碼，很垃圾，徹底就是堆疊代碼，慘不忍睹。

繼承性是指指被包在內部的標籤將擁有外部標籤的樣式性，即子元素能夠繼承父元素的屬性，例以下面的代碼，div中包含2個p標籤，1個span標籤，當給div設置字體顏色爲紅色時，他的子標籤會繼承父元素的屬性，於是會顯示紅色。 在CSS中以text-、font-、line- 開頭的屬性都是能夠繼承的。

CSS裏面有許多屬性是能夠繼承的，注意了，繼承必定是繼承父級元素的樣式！！

在這裏我就列出能夠繼承的屬性，和不能繼承的屬性啦

不可繼承的：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。

內聯元素可繼承：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 標籤的字體顏色不能被繼承，例如將上面代碼的div標籤中代碼改成以下的代碼後，a標籤的字體顏色是不會改變的，經過頁面的F12能夠查看獲得，a標籤是有一個默認的 color: -webkit-link;字體顏色屬性，因此給父元素設置顏色是不能改變a標籤字體的顏色

• h標籤字體的大小也是不能被繼承的，以下代碼給父元素在設置一個字體屬性20px，在div中添加一個h2標籤，在瀏覽器中能夠發現h2標籤中的字體大小不會改變，由於h2標籤中也有一個默認的默認的font-size: 1.5em;字體大小屬性，

• div 標籤的高度若是不設置由內容來決定（沒有內容高度爲0），寬度默認由父元素繼承過來，下面的代碼就很好的演示了div的寬高，在每一個div標籤後面添加了一個br標籤來強制換行，由於若是不使用br標籤來強制換行的話，div就會牢牢挨着一塊兒，看不不出來div的高度，第一個div由於沒有內容，因此在瀏覽器上不顯示出來，而第二div裏面添加了一句話，可是高度是由裏面的內容撐出來的，第三個div裏面也是一句話，而且在內容當中使用了一個br標籤來強制換行，這樣就會發現該div的高度會比第二div的高度要高，若是繼續向div標籤裏面添加內容，高度也會隨之相應的變高。

a元素涉及到瀏覽器默認樣式，下面會講到默認樣式

標準文檔流(normal)

• 塊級：佔一行，無論有多大，我就佔一行，佔了一行，誰都不能再佔我這一行,設置寬高起做用，佔一行以後，不夠一行的位置，均是用margin替代,這一行不夠一整行的位置，我就另起一行。

• 行級：有多大，佔多大，有空位子我就佔,對此種標籤設置寬高不起做用，每一個行級標籤默認有間隔，沒法取消

• 規則：無論怎麼佔據，已經被佔據的位置，必定不能再被佔

瀏覽器默認樣式(user agent stylesheet)

每一個標籤都有默認的樣式，好比a標籤，默認藍色，下劃線，img標籤默認有邊框，p,ul li,dt,dd標籤默認有margin或者padding什麼的，H1~H6標籤字體形狀和大小，都會有其默認的樣式
已下是HTML，和body的默認樣式

html 
width :瀏覽器寬度
height = 8px
padding 0,margin 0 border 0

body
height : 0
width:瀏覽器寬度
padding 0 margin 8px border 0

來看一段代碼:

能夠看到，默認樣式原來是這樣的呢！

 

還有不少標籤的默認樣式，這裏就不一一舉例，你們平時多看看，就記得住了。每一個瀏覽器可能表現不同。

佈局(layout)

• display : none | inline-block | inline | block |

• visibility : visible | hidden | collapse

• float: left | right

• clear: left | right | both

• overflow : hidden scorll | auto

float: 脫離標準文檔流 ，不按正常路線走, 我飄起來了，在空中呢，其餘的元素當我不存在
設置浮動後，寬度再也不默認父級元素的寬度(全部浮動的元素都是依次排，位置不夠往下走)
浮動以後，父級元素坍塌，你能夠理解，我在空中，我在頂層，我是最外面的圖層，其餘人佔了個人位置，可是隻顯示我，由於我是最外的圖層。
看這個佈局，你就明白了

提出幾個問題：

1. div是快級元素，爲何會和盒子one站在一塊兒呢？不是說塊級元素必定要佔一行嗎?

2. two盒子沒有設置寬度，那麼寬度就是100%了，也就是body的寬度，爲何沒有溢出body容器呢？

當你真正理解，我問的問題就都不是問題了！理解佈局，什麼頁面你都能搞定的！

clear：清除浮動，後面的元素對前面設置浮動的元素，不理睬，常常用在受浮動影響的元素（咱們是不但願他受影響）
其實前面元素浮動了，對後面同級元素確定會受影響的，同級元素當他不存在，確定就從浮動的元素位置排布嘛，確定有影響的，並且父元素高度坍塌，這個很影響佈局
因此咱們要考慮周全，深入理解特性。

overflow : 超出隱藏 overflow-x/-y 在水平方向或者垂直方向隱藏

tips:overflow屬性，通常不用再比較高的祖先輩元素，其繼承特性很危險！！！

定位(position)

人人都說定位難，定位是幹啥用的呢？定位的用處就是，你要精確地控制元素的位置，比較特殊的位置，普通文檔流和佈局都搞不定的時候，就要用到定位了

position: static(默認) | relative | absolute | fixed

元素

• absolute: 絕對定位， 定位？ 根據誰來定？ （若是父級元素不存在定位元素 相對html定位）若是父級存在非static定位元素，則按照就近原則定位 , 一旦定位, 有了新的圖層，（脫離文檔流 ），圖層頂層

• relative:相對定位，沒有脫離文檔流，佔位置，相對本身原來的位置定位

• fixed:固定定位,相對於瀏覽器窗口定位，不隨內容變化，一隻固定在窗口位置

• z-index: (int)number 改變圖層，用於定位元素（非static）

• top,right,bottom,left : px percentage 只用於定位元素(非static定位),移動

定位就這麼多內容了，這些應該是比較容易理解，可能應用上就懵逼了，哈哈，初學的話，都是這樣的

樣式層疊（優先選擇樣式）

樣式有幾大引入方式
內嵌，內部樣式表，外部樣式表，默認樣式，繼承樣式

• 內嵌：就是寫在標籤裏面的

• 內部樣式表：就是直接寫在頁面上的

• 外部樣式表：是一link形式引入的

• 默認樣式：就是瀏覽器給的也叫（user agent stylesheeet）

• 繼承樣式：繼承父元素的樣式

圖解：

記住規則：

• 就近原則，內嵌>內部樣式表>外部樣式表

• 默認樣式>繼承樣式（這兩種樣式都是最低級的那種）

其餘屬性

其餘屬性，遇到難理解的在着重講一個，屬性太多，有的很簡單，沒有記錄的必要，不過我以爲針對移動端佈局，這個仍是很重要的，想看移動端佈局CSS請看我這篇文章：[HTML+CSS入門之CSS3移動端佈局]()

CSS參考手冊：推薦這個網站的不錯：CSS參考手冊_WEB前端開發參考手冊系列