好程式設計師web前端培訓分享CSS基礎知識學習

　　好程式設計師web 前端培訓分享CSS 基礎點學習，今天要講的是是關於web 前端入門基礎-CSS 的基礎知識學習。希望本篇文章能夠對你有所幫助。

　　一、流

　　“流”又叫文件流，是 css 的一種基本定位和佈局機制。流是 html 的一種抽象概念，暗喻這種排列布局方式好像水流一樣自然自動。“流體佈局”是 html 預設的佈局機制，如你寫的 html 不用 css ，預設自上而下（塊級元素如 div ）從左到右（內聯元素如 span ）堆砌的佈局方式。

　　二、塊級元素和內聯元素

　　這個大家肯定都知道。

　　 塊級元素是指單獨撐滿一行的元素，如div 、 ul 、 li 、 table 、 p 、 h1 等元素。這些元素的 display 值預設是 block 、 table 、 list-item 等。

　　 內聯元素又叫行內元素，指只佔據它對應標籤的邊框所包含的空間的元素，這些元素如果父元素寬度足夠則並排在一行顯示的，如span 、 a 、 em 、 i 、 img 、 td 等。這些元素的 display 值預設是 inline 、 inline-block 、 inline-table 、 table-cell 等。

　　 實際開發中，我們經常把display 計算值為 inline inline-block inline-table table-cell 的元素叫做內聯元素，而把 display 計算值為 block 的元素叫做塊級元素。

　　 三、width: auto 和 height: auto

　　width 、 height 的預設值都是 auto 。

　　 對於塊級元素，width: auto 的自動撐滿一行。

　　 對於內聯元素，width: auto 則呈現出包裹性，即由子元素的寬度決定。

　　 無論內聯元素還是塊級元素，height: auto 都是呈現包裹性，即高度由子級元素撐開。但是父元素設定 height: auto 會導致子元素 height: 100% 百分比失效。

　　 流體佈局之下，塊級元素的寬度width: auto 是預設撐滿父級元素的。這裡的撐滿並不同於 width: 100% 的固定寬度，而是像水一樣能夠根據 margin 不同而自適應的寬度。

　　css 的屬性非常有意思，正常流下，如果塊級元素的 width 是個固定值， margin 是 auto ，則 margin 會撐滿剩下的空間；如果 margin 是固定值， width 是 auto ，則 width 會撐滿剩下的空間。這就是流體佈局的根本所在。

　　四、外在盒子和內在盒子

　　外在盒子是決定元素排列方式的盒子，即決定盒子具有塊級特性還是內聯特性的盒子。外在盒子負責結構佈局。

　　內在盒子是決定元素內部一些屬性是否生效的盒子。內在盒子負責內容顯示。

　　 如 display: inline-table;  外在盒子就是 inline ，內在盒子就是 table 。外在盒子決定了元素要像內聯元素一樣並排在一排顯示，內在盒子則決定了元素可以設定寬高、垂直方向的 margin 等屬性。

　　 右側的table 和左側的文字在一行排列（外在盒子 inline 的表現特徵），同時有擁有自定義寬度 111px （內在盒子 table 可以設定寬高）。

　　 五、css 權重和超越 !important

　　曾經有道面試題把我難住了：

　　//  假設下面樣式都作用於同一個節點元素 `span` ，判斷下面哪個樣式會生效

　　body#god div.dad span.son {width: 200px;}

　　body#god span#test {width: 250px;}

　　 可憐當時做了三年前端的我竟然還不知道css 有權重

　　css 選擇器權重列表如下：

　　 在css 中， !important 的權重相當的高，但是由於寬高會被 max-width/min-width 覆蓋，所以 !important 會失效。

　　width: 100px!important;

　　min-width: 200px;

　　上面程式碼計算之後會被引擎解析成：

　　width: 200px;