資訊專欄INFORMATION COLUMN
摘要：解決方法使用負將其往下拉或者設置為來避免生成行框。對于浮動或絕對定位元素，計算值與聲明值可能不同。浮動元素必須包含其所有的浮動子元素使用屬性清除浮動時，例如，實際上是為設置屬性的元素增加。
- 僅作用于塊級元素的屬性
width，height（這倆可用于替換元素）
text—align， text—indent， vertical—align（也可用于表單元格和替換元素如input/img）
background-position(注意百分數(shù)和絕對值的區(qū)別，同時這個屬性會影響平鋪效果)
［基本視覺格式化］
1. 框模型：
－ background包括內容框、內邊距和邊框，外邊距通常是透明的，顯示父元素的背景；
2. 水平屬性：
－子元素的左（右）margin，左（右）padding，左（右）border和內容框width的值加起來必須等于父元素的內容框width；
－如果設置margin—left,margin-right,width（只有這三個值可以設置為auto）之中的兩個為特定值，余下的那個為auto，則設置為auto的屬性值會自動計算以填充父元素的width：
＊ 如果三個值都為非auto的特定值（over constrained），那么margin-right會被強制設置為auto； ＊ 如果margin中某一個設置為auto，另一個設置特定值，width設置為auto，則設置為auto的margin會被置為0； ＊ 如果width設置為特定值，兩個margin設置為auto，則會**水平居中**！！
－ 父元素的padding會跟子元素的margin疊加；
－ 非替換元素的默認寬度由其內容決定；為替換元素設置width為auto（如img），那么其值將會是其本來的寬度；如果只設置width，那么height會等比例變化，反之亦然。
3. 垂直屬性：
與水平屬性類似，不同點／注意點：
－ 如果將margin-top或margin-bottom設置為auto，則會被默認為0，因此不能垂直居中囧，除非用特定值顯示設置；
－ 使用百分數(shù)設置子元素height時，如果沒有顯示設置父元素的height值，那么子元素height會默認為auto；
－ 如果父元素只包含子塊級元素，那么父元素的height將不包含子元素的margin，除非父元素有border或padding！！為什么呢，因為垂直方向上的margin會重疊。由此看來，要避免重疊，就需要使用border和padding來講相鄰margin隔開哦；
行內元素：
－ line-height（行框高度）對于替換元素而言，就是其內容的高度。因此替換元素無行間距（line-height － font-size）；對于非替換元素而言，是其內容框高度加上行間距;
－ 對于只包含文本的行，能改變其行間距離的只有l(wèi)ine-height, font-size, vertical-align。
非替換元素：
－ 當line-height值小于font-size時可能會產(chǎn)生文本重疊，為避免此現(xiàn)象可設置line-height為1 em（需設置font-size）或1（根據(jù)font-size的縮放因子），此外它會繼承父元素的計算值而不是字面值，除非顯式定義；
－ 行內元素的內邊距、外邊距和邊框都不會影響行高。其中外邊距只有左右有效，上下無效；但如有正的內邊距且有背景，則有可能覆蓋鄰行（仍不影響行高和布局，就是說設置了內邊距行高也不會變高）；
替換元素：
－ 行內元素的內邊距、外邊距和邊框會影響行高，且上下margin有效。
－ 為img設置一個height值，會影響行高，但其line-height的有效值不會改變，有些屬性例如vertical-align仍然是使用line-height有效值進行計算；
－ 如果一個替換元素是一個塊級元素或表格單元格中的唯一后代，那么就會被放到基線上，例如div中的img。解決方法：使用負margin將其往下拉或者設置display為block來避免生成行框。
4. 其他
－ display屬性：
* 設置元素display屬性為inline-block時， 其表現(xiàn)類似行內替換元素；如果沒有顯式定義width，則它會自動收縮以適應內容寬度，也就是說會使其寬度剛好能包含所有內容且沒有多余； * 設置元素display屬性為run-in，表示如果該元素后面是一個display為block的元素，則該元素表現(xiàn)為行內元素放在后面那個元素的開頭，否則其本身將顯示為塊級元素。 * 對于浮動或絕對定位元素，計算值與聲明值可能不同。除inline-table之外大部分聲明值（包括inline，inline-block，run-in）都會被計算為block。
［border、margin、padding］
margin
－ 如果使用百分數(shù)，則計算值是相對于父元素的width值（not height）而言。哪怕是margin-top也是！
border
－ 不指定的值會使用默認值, e.x.:
{ border: solid 1px dotted;
border: 1px;
}
此處第二條border設置會覆蓋第一條，由于在第二條中沒有設置border-style，默認為none，所以將不會有border；
［浮動和定位］
浮動：
浮動元素的margin不會合并；
假設要使一個非替換元素浮動，需要為其指定一個width，否則會按瀏覽器規(guī)定的最小width浮動；
浮動元素會生成一個塊級框，而不論這個元素本身是什么；
浮動元素的頂端不能比其父元素或之前所有浮動元素的頂端更高；
當浮動元素與文檔流中的元素重疊時：
（1）如果是塊級元素，則其內容會在浮動元素之上，而邊框和背景則在之下；
（2）如果是行內元素，則其內容、邊框和背景都在浮動元素之上，即不會被覆蓋。
這與元素出現(xiàn)在文檔流中的先后順序無關。
浮動元素必須包含其所有的浮動子元素；
使用clear屬性清除浮動時，例如clear: left，實際上是為設置clear屬性的元素增加margin-top。因此，有可能即使該元素設置了margin-top，也會與浮動元素緊緊相連，除非margin-top的值足夠大。要使兩者之間有間隔，可以設置浮動元素的margin-bottom。
定位：
絕對定位
*如果父元素是塊級元素且position的值為非static，則子元素absolute定位是其外邊距外界相對于父元素的邊框界定區(qū)域定位；
*通過指定top, bottom, left, right的值，可以隱式指定元素的寬高；
*除bottom外被設置成auto的屬性，會默認與元素靜態(tài)位置的對應值一致；
*水平／垂直方向上，當元素過度受限時（left和right的值以及元素水平方向的各尺寸之和不等于父元素width），會忽略right／bottom的值。如果有設置為auto的屬性，則改變其值來滿足前等式，如果兩個則平分，所以可以用來做居中（margin設為auto，其他值均為0）！
*假設一個元素有設置z-index值，那么其所有子元素都是相對于這個疊放上下文來放置，并且css2.1中規(guī)定所有元素絕對不能放在其疊放上下文的背景之下，但可以在其內容之下；
固定定位
*right的值總是等于－left，bottom的值總是等于－top。
持續(xù)更新中。。。。。
本文參考 《css權威指南》
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/116406.html
摘要：剖析新版，為你所用大漠第二個議題是大漠老師的，大漠老師是的站長，著有圖解核心技術與案例實戰(zhàn)。自定義屬性大漠老師多次強調，這叫做自定義屬性，不叫變量。 前言 對于我來講，雖然做前端那么多年，但對 CSS 的探索非常少，很多 CSS 知識還是在畢業(yè)之前積累下來。揣著一本《精通CSS:高級Web標準解決方案(第二版)》（現(xiàn)在出第三版了，這是我在 CSS 道路上的啟蒙書）在前端路上走了這么幾...
摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區(qū)域的機制，中只有和中還增加了和。并非所有的布局都會在開發(fā)中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...
摘要：前言這是系列最后一篇，本文主要總結了的用法，以及最后對函數(shù)進行抽象。一個多說無益，還是上代碼來得實在還記得編程藝術中的總結一中那個無聊的根據(jù)元素在節(jié)點樹里的位置來設置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結了className的用法，以及最后對函數(shù)進行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...
摘要：前言這是系列最后一篇，本文主要總結了的用法，以及最后對函數(shù)進行抽象。一個多說無益，還是上代碼來得實在還記得編程藝術中的總結一中那個無聊的根據(jù)元素在節(jié)點樹里的位置來設置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結了className的用法，以及最后對函數(shù)進行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...
閱讀 1216·2021-09-30 09:47
閱讀 3768·2021-09-06 15:02
閱讀 1781·2021-09-01 10:46
閱讀 2364·2019-08-30 15:52
閱讀 601·2019-08-29 15:28
閱讀 1874·2019-08-29 15:08
閱讀 1154·2019-08-29 13:28
閱讀 2580·2019-08-29 12:19
