margin作用于兄弟元素，也就是說，同級別的，我的margin就是我的保護(hù)區(qū)，無論你是誰，你都不許靠近我的保護(hù)區(qū)，你只能在外面站

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

看明白了吧，其實對于父元素而言，margin只會在水平方向起作用，豎直方向不起作用哦，所以，你是不是有經(jīng)歷。改了子元素的margin-top，握草，整個布局都亂了，就是這個道理，父元素的頂部是緊貼子元素的。還有一點，body的盒子模型和container是一樣的
接著分析，看下面：

咦，怎么這里又頂部有了20px呢？不是說不起作用嗎？，其實，這個是html的盒子模型，下面會講到瀏覽器的默認(rèn)樣式，html默認(rèn)是沒有margin和padding的，也就是說，所有的內(nèi)容，都是html的content區(qū)域

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

margin的性質(zhì)

有一個性質(zhì)，那就是不疊加，取最大！還是上面那個例子，如果我設(shè)置container的margin-top為20px 是不會有任何變化的，為什么呢？因為container , body是父子關(guān)系，根據(jù)上面說的，他們兩頂部一直貼邊，你設(shè)置了container的margin-top為20px，本來就有20px的間距，你一樣的值，他當(dāng)然不會變，如果你設(shè)置成30，那么就會往下移動10px了，這是特性。

上面講了外補白，這里講內(nèi)補白，其實內(nèi)補白沒有什么難的，但是呢，很多人，也會掉坑里，平時寫CSS的時候不注意，容易掉坑，簡單的東西都要寫很久，就是因為沒有理解其特殊性。
內(nèi)補白和外補白都需要理解盒子模型，那么在外補白我們已經(jīng)見過盒子模型了，也有padding，margin，content，border呀,看一下我改動的代碼：

一下子貼了三張圖，padding是什么呢？說白了就是父與子的關(guān)系，只存在父子關(guān)系，所有設(shè)置了padding的元素，那么里面的東西，都只能在盒子padding里面寫入，這個屬性，一般用于，內(nèi)容區(qū)域與邊框有一定的規(guī)律性間隔，用padding是最合適的了，注意哦，此時盒子one的總大小不是120 * 120了喲，而是140 * 140啦，這是個坑??！ 總結(jié)一下：

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

tips ：這里要注意一點，就是你設(shè)置的width和高度是不包含padding的，所以一旦設(shè)置了width和height，你在設(shè)置padding的時候，一定要注意，有可能會打亂布局，我們應(yīng)該加入box-sizing:border-box，這樣的話，width就包含padding了，仔細(xì)觀察盒模型

最后總結(jié)：標(biāo)準(zhǔn)盒模型，在盒子瀏覽器占據(jù)的總寬度是這樣計算的：border+padding+content （你設(shè)置的width，height是content的寬度）

在標(biāo)準(zhǔn)文檔流下，一個盒子占據(jù)瀏覽器的位置 ：margin+border+padding+content ( 也就是說，這些區(qū)域不能有其他的元素占據(jù) )

繼承特性，這個就不好講的很細(xì)，但是你想要好寫好CSS，不僅僅你要理解繼承 ，而且繼承還要用的妙，這樣在你寫CSS的過程中，可以精簡很多代碼。我現(xiàn)在看以前寫的CSS代碼，很垃圾，完全就是堆疊代碼，慘不忍睹。

繼承性是指指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性，即子元素可以繼承父元素的屬性，例如下面的代碼，div中包含2個p標(biāo)簽，1個span標(biāo)簽，當(dāng)給div設(shè)置字體顏色為紅色時，他的子標(biāo)簽會繼承父元素的屬性，因而會顯示紅色。 在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。

內(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)簽的字體顏色是不會改變的，通過頁面的F12可以查看得到，a標(biāo)簽是有一個默認(rèn)的       color: -webkit-link;字體顏色屬性，所以給父元素設(shè)置顏色是不能改變a標(biāo)簽字體的顏色

h標(biāo)簽字體的大小也是不能被繼承的，如下代碼給父元素在設(shè)置一個字體屬性20px，在div中添加一個h2標(biāo)簽，在瀏覽器中可以發(fā)現(xiàn)h2標(biāo)簽中的字體大小不會改變，因為h2標(biāo)簽中也有一個默認(rèn)的默認(rèn)的font-size: 1.5em;字體大小屬性，

div 標(biāo)簽的高度如果不設(shè)置由內(nèi)容來決定（沒有內(nèi)容高度為0），寬度默認(rèn)由父元素繼承過來，下面的代碼就很好的演示了div的寬高，在每個div標(biāo)簽后面添加了一個br標(biāo)簽來強制換行，因為如果不使用br標(biāo)簽來強制換行的話，div就會緊緊挨著一起，看不不出來div的高度，第一個div因為沒有內(nèi)容，所以在瀏覽器上不顯示出來，而第二div里面添加了一句話，但是高度是由里面的內(nèi)容撐出來的，第三個div里面也是一句話，并且在內(nèi)容當(dāng)中使用了一個br標(biāo)簽來強制換行，這樣就會發(fā)現(xiàn)該div的高度會比第二div的高度要高，如果繼續(xù)向div標(biāo)簽里面添加內(nèi)容，高度也會隨之相應(yīng)的變高。

a元素涉及到瀏覽器默認(rèn)樣式，下面會講到默認(rèn)樣式

塊級：占一行，不管有多大，我就占一行，占了一行，誰都不能再占我這一行,設(shè)置寬高起作用，占一行之后，不夠一行的位置，均是用margin替代,這一行不夠一整行的位置，我就另起一行。

行級：有多大，占多大，有空位子我就占,對此種標(biāo)簽設(shè)置寬高不起作用，每個行級標(biāo)簽?zāi)J(rèn)有間隔，無法取消

規(guī)則：不管怎么占據(jù)，已經(jīng)被占據(jù)的位置，一定不能再被占

每個標(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)簽字體形狀和大小，都會有其默認(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

來看一段代碼:

可以看到，默認(rèn)樣式原來是這樣的呢！

?

還有很多標(biāo)簽的默認(rèn)樣式，這里就不一一舉例，大家平時多看看，就記得住了。每個瀏覽器可能表現(xiàn)不一樣。

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)文檔流 ，不按正常路線走, 我飄起來了，在空中呢，其他的元素當(dāng)我不存在
設(shè)置浮動后，寬度不再默認(rèn)父級元素的寬度(所有浮動的元素都是依次排，位置不夠往下走)
浮動之后，父級元素坍塌，你可以理解，我在空中，我在頂層，我是最外面的圖層，其他人占了我的位置，但是只顯示我，因為我是最外的圖層。
看這個布局，你就明白了

提出幾個問題：

div是快級元素，為什么會和盒子one站在一起呢？不是說塊級元素一定要占一行嗎?

two盒子沒有設(shè)置寬度，那么寬度就是100%了，也就是body的寬度，為什么沒有溢出body容器呢？

當(dāng)你真正理解，我問的問題就都不是問題了！理解布局，什么頁面你都能搞定的！

clear：清除浮動，后面的元素對前面設(shè)置浮動的元素，不理睬，經(jīng)常用在受浮動影響的元素（我們是不希望他受影響）
其實前面元素浮動了，對后面同級元素肯定會受影響的，同級元素當(dāng)他不存在，肯定就從浮動的元素位置排布嘛，肯定有影響的，而且父元素高度坍塌，這個很影響布局
所以我們要考慮周全，深刻理解特性。

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

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

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

position: static(默認(rèn)) | relative | absolute | fixed

元素

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

relative:相對定位，沒有脫離文檔流，占位置，相對自己原來的位置定位

fixed:固定定位,相對于瀏覽器窗口定位，不隨內(nèi)容變化，一只固定在窗口位置

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

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

定位就這么多內(nèi)容了，這些應(yīng)該是比較容易理解，可能應(yīng)用上就懵逼了，哈哈，初學(xué)的話，都是這樣的

樣式有幾大引入方式
內(nèi)嵌，內(nèi)部樣式表，外部樣式表，默認(rèn)樣式，繼承樣式

內(nèi)嵌：就是寫在標(biāo)簽里面的

內(nèi)部樣式表：就是直接寫在頁面上的

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

默認(rèn)樣式：就是瀏覽器給的也叫（user agent stylesheeet）

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

圖解：

記住規(guī)則：

就近原則，內(nèi)嵌>內(nèi)部樣式表>外部樣式表

默認(rèn)樣式>繼承樣式（這兩種樣式都是最低級的那種）

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

CSS參考手冊：推薦這個網(wǎng)站的不錯：CSS參考手冊_WEB前端開發(fā)參考手冊系列