CSS2.1中經常使用知識點及常見的問題

css2.1經常使用知識點

「根元素」的包含塊（也稱爲初始包含塊）由用戶代理創建，在HTML中，根元素就是<html>元素，不過有些調試器會使用<body>做爲根元素，在大多數瀏覽器中，初始包含塊就是一個視窗大小的矩形。初始包含塊不等於視窗。
對於一個非根元素，若是其position值是relative或static，包含塊則由最近的塊級根構成。
對於一個非根元素，若是其position值是absolute（絕對定位），包含塊設置爲最近的position值不是static的祖先元素。若是這個祖先是塊級元素，包含塊則設置爲該元素的內邊距邊界。若是沒有祖先，元素的包含塊定義爲初始包含塊。
left，top，right，bottom，width，height默認值是auto。margin，padding，border-width默認值是0
width，margin，padding百分比參照於包含塊的width的值，height百分比參照於包含塊的height，left百分比參照於包含塊的width，top百分比參照於包含塊的height
一個元素分爲兩層，上層是文字相關的，下層是盒模型相關的。（在進行元素浮動的時候要考慮）
浮動會使元素提高半個層級。
margin爲負值（margin不影響元素的位置）：將元素的邊界往裏收，爲正值：將元素的邊界往外擴。
給<body>標籤設置最小寬度：left.width*2+right.width (right.width*2+left.width)。
若是讓<body>元素,<html>元素,視口三合一，高度必須一層一層的繼承下來。
瀏覽器渲染頁面的規則，若是<body>元素和<html>元素中只有一個overflow屬性，那麼這個overflow屬性給文檔。若是二者都寫了，<html>元素上的overflow屬性會做用給文檔，<body>元素的overflow屬性會做用給本身。
禁止系統默認滾動條的方法： html,body{ height:100%;overflow:hidden;}。
沒有定位參照於包含塊，相對定位參照於元素原本的位置，絕對定位參照於包含塊，固定定位參照於視口。
Box：CSS佈局的基本單位。Box是CSS佈局的對象和基本單位，直觀來講，就是一個頁面是由不少個Box組成的。元素的類型和display屬性，決定了這個Box的類型，不一樣類型的Box。會參與不一樣的formatting Context(一個決定如何渲染文檔的容器)，所以Box內的元素會以不一樣的方式渲染。
盒子的類型：block-level box：display屬性爲block,list-item,table的元素，會生成block-level box。而且參與block fomatting context;inline-level box:display屬性爲inline,inline-block,inline-table的元素，會生成inline-level box。而且參與inline formatting context。
CSS hack（條件註釋表達式）用來設置不一樣的瀏覽器版本下編寫代碼。*針對IE6和IE7，_只針對IE6。

text-align只對內聯元素（行內元素）有效。css

white-space控制文本換行或不換行。最大的場景就是溢出顯示省略號 div{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
一行上垂直對齊時以行高值最大的行內框爲基準，其餘行內框採用本身的對齊方式向基準對齊，最終計算行框的高度，當有多行內容時，每行都會有本身的行框。
vertical-align屬性用來指定行內元素的垂直對齊方式，就是參照一行上垂直對齊時以行高值最大的行內框爲基準進行對齊的。
像<input>，<img>這種元素被稱爲替換元素，在頁面上寫的時候只寫了一個標籤，但是最終渲染到頁面中的時候用圖片或者文本框佔據高寬了，不用默認指定高寬。

三列布局相關知識點

三列布局的需求
1. 兩邊固定，當中自適應
2. 當中列要完整顯示
3. 當中列要優先加載
聖盃佈局的技術點
1. 浮動：搭建完整的佈局框架
2. margin爲負值：調整旁邊兩列的位置（使三列布局到一行上）。
3. 使用相對定位：調整旁邊兩列的位置（使兩列位置調整到兩頭）
僞等高佈局：margin-bottom爲負值，padding-bottom設一個比較大的值。超出部分用overflow：hidden。
標準的塊級元素水平居中使用margin：0 auto；使用浮動時會失效。
雙飛翼佈局技術點
1. 浮動：搭建完整的佈局框架
2. margin爲負值：調整旁邊兩列的位置（使三列布局到一行上）。
3. 在中間<div>標籤中再加一個<div>標籤，將內部<div>標籤的內邊距調整，使兩列位置調整到兩頭。
聖盃佈局和雙飛翼佈局實現的對比：
1. 兩種佈局方式都是把主列放在文檔流最前面，使主列優先加載。
2. 兩種佈局方式在實現上也有相同之處，都是讓三列浮動，而後經過負外邊距造成三列布局。
3. 兩種佈局方式的不一樣之處在於如何處理中間主列的位置：聖盃佈局是利用父容器的左右內邊距+兩個從列相對定位；雙飛翼佈局是把主列嵌套在一個新的父級塊中利用主列的左右內邊距進行佈局調整。

stickyFooter（粘連佈局）

經典的「粘連」footer佈局，有一塊內容<main>,當<main>的高度足夠長的時候，<footer>應該緊跟在<main>元素的後面。當<main>元素比較短的時候（好比小於屏幕的高度），咱們指望這個<footer>元素可以「粘連」在屏幕的底部。
stickyfooter的佈局套路：
1. 寫兩個<div>標籤（父子關係），父標籤下面寫<footer>。
2. <body>元素獲取視口高度（html，body{height：100%；}），父標籤的最小高度（mid-height：100%）設置和<body>元素同樣的高度。此時footer被撐到視口下方。
3. footer的margin-top設置爲負的footer.height,，footer向上移，這樣footer就在底部顯示了。可是當子元素中的內容區足夠大，撐開到超過視口的時候，內容區會與footer重疊。
4. 給子標籤設置一個padding-bottom：footer.height。消除重疊。

解決IE6下fixed失效問題的方法

使用絕對定位來模擬固定定位:
1. 禁止系統默認滾動條。
2. 給<body>元素一個滾動條。
3. 讓<body>元素的尺寸變爲視口的尺寸。

BFC知識點

Formatting context是W3C CSS2.1規範中的一個概念。它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。最多見的Formatting context 有Block fomatting context(簡稱BFC) ,Inline formatting context(簡稱IFC).
BFC(Block formatting context)直譯爲「塊級格式化上下文」。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。
BFC佈局規則：
1. 內部的Box會在垂直方向，一個接一個地放置。
2. BFC的區域不會與float box重疊。
3. 內部的Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
4. 計算BFC的高度時，浮動元素也參與計算。（清除浮動，haslayout）
5. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
會生成BFC的元素：
- 根元素
- float屬性不爲none
- position爲absolute或fixed
- overflow不爲visible
- display爲inline-block，table-cell，table-caption，flex，inline-flex

兩列布局

兩列布局要求，左邊固定，右邊自適應。
兩列布局實現方法：
1. 兩個<div>標籤，上面浮動，下面的<div>頂上去
2. 給<body>設置最小寬度，利用BFC規則給右邊的<div>標籤設置overflow：hidden。

margin疊加問題

兄弟元素之間的margin疊加：處於同一個BFC中兩個相鄰塊元素會margin重疊。解決辦法：
1. 能夠改變兩個元素屬性。
2. 能夠改變兩個塊元素不在一個BFC中。
3. 使兩個塊元素不相鄰（不推薦使用）。
父子元素之間的margin傳遞解決方案：
- 能夠給父元素設置一個overflow：hidden，讓父子元素不處於同一個BFC中，便可解決margin傳遞問題。

清除浮動問題

清除浮動：讓浮動的子元素能夠撐開父級的高度。
解決辦法：
1. 直接給父元素加高度（有點low，擴展性很差）
2. 給父元素開啓BFC， overflow:hidden(缺點不兼容IE6)（浮動盒子的特色，定位盒子的特色：高寬都由內容撐開)
3. <br>標籤清除浮動。<br clear="all">（IE6不支持）
4. 空標籤清除浮動。<div style="clear:both;">(不推薦，沒有符合結構，行爲，樣式相分離的原則)IE6下元素的最小高度爲19px，能夠嘗試給元素的fontsize設爲0，可是仍是會有2px的偏差。
5. 僞元素清除浮動。開啓haslayout兼容IE6（zoom:1;），同時設置：after僞類{ content:"";display:block;clear:both;}。

已知寬高的元素垂直水平居中方案

該元素設置爲絕對定位position：absolute；該元素的父元素設置相對定位position：relative；（讓該元素相對於父元素進行定位），設置該元素的left：50%；top：50%；再將該元素的外邊距設置爲margin-left:負的該元素的寬度；margin-top：負的該元素的高度；
該元素設置爲絕對定位position：absolute；該元素的父元素設置相對定位position：relative；（讓該元素相對於父元素進行定位），設置該元素的left，right，top，bottom爲0，margin設置爲auto；

未知高寬的元素垂直水平居中方案

絕對定位盒子的特性：高度由內容撐開，水平方向上：left+right+width+padding+margin=包含塊padding區域的尺寸。垂直方向上：top+bottom+height+padding+margin=包含塊padding區域的尺寸
未知高寬的元素垂直水平居中方案
- 該元素設置爲絕對定位position：absolute；該元素的父元素設置相對定位position：relative；（讓該元素相對於父元素進行定位），設置該元素的left：50%；top：50%；transform:translate3d(-50%,-50%,0);

字體相關樣式

font-size 的值有px，em（em值的大小是動態的，當定義font-size屬性時，1em等於元素的父元素的字體大小）%（參照父元素的字體大小）在Google中font-size默認是16px，最小是12px。
font-style，兩個值italic或oblique均可以讓字體傾斜。
font-weight，normal和bold（正常和加粗兩個值），normal正常粗細，與400等值，bold加粗，與700等值，一共分爲9個等級100-900.
font-family容許經過給定一個有前後順序的，由字體名或者字體族名組成的列表來爲選定的元素設置字體，屬性的值用逗號隔開，瀏覽器會選擇列表中第一個該計算機上有安裝的字體。通常將最後一個值設置爲字體族。
font簡寫屬性，該屬性必須同時設置font-size和font-family，如需設置font-style和font-weight中任意一個，它們必須放在font-size值的前面，line-height值必須緊跟在font-size以後，而且要在屬性值前面加上/。最後font-family是必不可少的，必須放在最後。（通常不推薦使用）

文本行高相關知識點

文本的行高分爲頂線，中線，基線，底線。行高指的是上下文本行中基線的垂直距離。行距指的是上文本行的底線到下文本行的頂線的垂直距離。半行距指的是行距的一半。行距=行高-字體大小。
內容區：底線和頂線包裹的區域。文本行中的每一個元素都會生成一個內容區，這個由字體的大小肯定，這個內容區則會生成一個行內框，若是不存在其餘因素，這個行內框就徹底等於該元素的內容區，由line-height產生的行間距就是增長和減小各行內框高度。
行內框：行內框是一個瀏覽器渲染模型中的一個概念，沒法顯示出來，行內框默認等於內容區域，將line-height的計算值減去font-size的計算值，這個值就是總行距，這個值多是個負值，任何將行間距/2分別應用到內容區的頂部和底部，其結果就是該元素的行內框。
行框是指本行的一個虛擬的矩形框，是瀏覽器渲染模式中的一個概念，並無實際顯示，默認狀況下行內框的高度等於本行內全部元素中行內框最大的值。
在前端開發中，若是要處理大量的文本，建議把行高設置的要比字體大。
關於行高的繼承，line-height:1會直接被子元素繼承，而不是轉換爲font-size的值再被子元素繼承，可是line-height:100%,會先轉換成父元素的font-size的值，再由子元素繼承。
在頁面初始化時body{ line-height:1;}，當頁面中有大量文字時，標籤的行高設置爲1.5,頁面顯示文字會優美- 行高最大的做用是單行文本垂直居中。

圖片垂直水平居中方法

給圖片加一個<div>標籤的盒子，先給<div>標籤設置一個text-align：center;讓圖片水平居中，而後給<div>標籤加一個after僞類，display：inline-block，vertical-align：middle，高度設置爲100%，這樣就給了圖片的vertical-align一個參照，而後給圖片<img>標籤設置一個vertical-align：middle；（vertical-align只適用於inline-block元素，其餘類型元素不適用）。