內容引用：css 框模型概述
css 框模型 (box model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。元素的背景應用於**由內容和內邊距(padding)、邊框(border)組成的區域。
邊框以外是外邊距(margin)，外邊距預設是透明的，因此不會遮擋其後的任何元素。
內邊距、邊框和外邊距都是可選的，預設值是零；內邊距、邊框和外邊距可以應用於乙個元素的所有邊，也可以應用於單獨的邊。定義元素的寬高屬性。
可以用px進行數字定義，如1px；也可以用百分比100%等表示，百分比表示佔父元素的百分之多少。
注：行內元素不能定義寬高，塊元素和行內塊元素可以。
內容引用：css 內邊距
元素的內邊距在邊框和內容區之間。
padding屬性定義元素的內邊距，接受長度值或百分比值，但不允許使用負值。
h1h1h1內邊距的百分數值是相對於父元素的寬度計算的。
/* 段落的內邊距設定為父元素 width 的 10% */
p
padding只參考了父元素的width，也就是上下內邊距也是參照的width，而不是參照常理上父元素的height；padding-top/padding-bottom也是一樣參照的width。
內容引用：css 外邊距
圍繞在元素邊框的透明區域是外邊距。設定外邊距就是使用
margin屬性，這個屬性接受任何長度單位（畫素、英吋、公釐或 em）、百分數值甚至負值。
margin可以設定為auto。
基本上外邊距和內邊距padding書寫方式類似，甚至在百分數參考父元素width這一點上也是一樣的。
與單邊內邊距屬性類似：
不再更多的說明。
有時會輸入一些重複的值：
p/* 上面的規則與下面的規則是等價的 */
p
h1
/* 等價於 0.25em 1em 0.5em 1em */
h2 /* 等價於 0.5em 1em 0.5em 1em */
p /* 等價於 1px 1px 1px 1px */
css 定位 (positioning) 屬性允許你對元素進行定位。定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對于父元素、另乙個元素甚至瀏覽器視窗本身的位置。
div、h1或p元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即「塊框」。
與之相反，span和strong等元素稱為行內元素，這是因為它們的內容顯示在行中，即「行內框」。
可以使用 display 屬性改變生成的框的型別。如果乙個框的屬性設定為
display:none，該框及其所有內容就不再顯示，不占用文件中的空間。
但是一種情況下，即使沒有顯式定義（包括環繞標籤），也會建立塊級元素，這種情況發生在把一些文字新增到乙個塊級元素（比如 div）的開頭。即使沒有把這些文字定義為段落，它也會被當作段落對待：
some text
some more text.
css 有三種基本的定位機制：普通流、浮動和絕對定位。所有框預設都在普通流中定位。
塊級框從上到下乙個接乙個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。
由一行形成的水平框稱為行框（line box），行框的高度總是足以容納它包含的所有行內框。不過，設定行高可以增加這個框的高度。
通過使用position屬性，我們可以選擇 4 種不同型別的定位。內容引用：css 相對定位
設定為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所佔的空間仍保留。簡單來說就是，原來所佔位置還是佔那個位置，但是元素將會進行偏移顯示。
#box_relative設定為絕對定位的元素框從文件流完全刪除，並相對於其包含塊定位。絕對定位使元素的位置與文件流無關，因此不佔據空間，這一點與相對定位不同。
簡單來說就是，元素不再占用任何文件流的空間，只剩下相對於包含塊的定位顯示。
#box_relative絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（一般情況下是html元素）。上述概念中，已定位指的就是
position屬性設定了relative、absolute和fixed之一的元素；最近的已定位指的是元素父子鏈往從本元素向上尋找，其中最近的已定位祖先元素。
提示：因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設定z-index屬性來控制這些框的堆放次序。
內容引用：css 浮動
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。
如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素「卡住」。
使用浮動的方法：
imgfloat可能的值：
浮動框旁邊的行框會被縮短，使行框圍繞浮動框，所以建立浮動框可以使文字圍繞影象。
注釋：這裡說的行框就是之前說的無名塊框。
如果想要阻止行框圍繞浮動框，需要對該框(?)應用clear屬性，屬性值可以是left、right、both或none，它表示框的哪些邊不應該挨著浮動框。
在這裡將不會進一步詳細的說明浮動和清理的深入用法和機制說明（主要是自己暫時不太喜歡用，到時候涉及到的時候再開專題說明吧，咕咕咕）。
個人靜態部落格：
前端菜鳥筆記 Day 4 CSS布局
內容引用 css 框模型概述 css 框模型 box model 規定了元素框處理元素內容 內邊距 邊框 和 外邊距 的方式。描述 1 元素的背景應用於 由內容和內邊距 padding 邊框 border 組成的區域。邊框以外是外邊距 margin 外邊距預設是透明的，因此不會遮擋其後的任何元素。內...
前端菜鳥筆記 Day 5 CSS 高階
內容引用 css 選擇器 htmlh2,p.important p.warning important.warning 選擇同時擁有這兩個類名的元素 introa href a href title a href p class important warning 完全匹配的屬性內容 p class...
前端菜鳥筆記 Day 5 CSS 高階
內容引用 css 選擇器 htmlh2,p.important p.warning important.warning 選擇同時擁有這兩個類名的元素 introa href a href title a href p class important warning 完全匹配的屬性內容 p class...