前端css知識總結整理
阿新 • • 發佈：2018-02-26
選擇器優先級 tex footer 默認 順序 展現 http 後代選擇器 計算 1.設置css樣式的三種方式？
外部樣式表，引入一個外部css文件
內部樣式表，將css代碼放在<head>標簽內部
內聯樣式，將css樣式直接定義在html元素內部 2.css有哪些選擇器？
id選擇器
類選擇器
標簽選擇器 又可以細分為：
派生選擇器（包括後代選擇器、子元素選擇器、相鄰兄弟選擇器）
偽元素選擇器
屬性選擇器
群組選擇器
通配符選擇器 css優先級定義？
計算方法：
標簽選擇器優先級為1
類選擇器優先級為10
id選擇器優先級為100
行內樣式優先級為1000
！important 無限大； 3.css中屬性定義，使得dom元素不顯示在瀏覽器可視範圍內？
1.display屬性為none、visibility設為hidden（但是仍然占據頁面空間）
display：隱藏對應的元素不占據原來的空間。visibility：隱藏對應的元素仍占據空間位置。 4.超鏈接訪問過後hover樣式就不出現？如何解決？
改變css屬性的排列順序（LVHA）link visited hover active 5.css hack的原理？
由於不同的瀏覽器和瀏覽器各版本對css的支持及解析結果不一樣，以及css優先級對瀏覽器展現效果的影響，我們可以據此針對不同瀏覽器情景來應用不同的css。
css hack有三種表現形式，css屬性前綴法、選擇器前綴法以及ie條件註釋法（即頭部引用if ie）。實際項目中css hack大部分是針對ie瀏覽器不同版本之間的表現差異而引入的。 5.1屬性前綴法：
例：ie6能識別下劃線“_”和星號“*”，ie7能識別星號“*”（以上版本並不支持），但不能識別下劃線“_”，ie6~ie10都認識“\9”，但是其他瀏覽器不能支持
5.2選擇器前綴法（選擇器hack）
例：ie6能識別*html .class{},ie7能識別*+html .class{} 或者*:first-child+html .class{};
5.3ie條件註釋法：
針對所有ie（ie10+已經不再支持條件註釋）：<!--[if IE]>ie瀏覽器顯示的內容<![endif]-->，針對ie6及以下版本：<!--[if lte IE 6]>只在ie6及以下顯示的內容<![endif]-->.這類hack不僅針對css生效，對寫在判斷語句裏面的所有代碼都會生效。 css hack書寫順序：
一般將適用範圍廣，能識別能力強的css定義在前面。因為寫在後面代碼如果被識別會覆蓋前面識別的。 6.行內元素和塊級元素的具體區別？行內元素的padding和margin可設置嗎？
塊級元素：總是獨占一行，寬、高、內邊距、外邊距都可以控制。
內聯元素：和相鄰的內聯元素在同一行，寬、高、上下內邊距、上下外邊距都不可變。
塊級元素：
div、p、h1~h6、hr、ul、ol、li、dl、dt、dd、form、table、tbody、tfoot、thead、（header、article、footer、nav）
內聯元素：
span、a、b、br、em、strong、img、input、abbr、button、label、textarea
（拓展：瀏覽器默認的inline-block元素） <input>、<img>、<button>、<textarea>、<label> （附：行內塊元素的兼容性使用？）
在css當中兩個（普通文檔流）豎直方向上的毗鄰（沒有被非空內容、padding、border 或 clear 分隔開）盒子的外邊距可以結合成一個單獨的外邊距。這種合並外邊距的方式被稱為折疊，所結合而成的外邊距成為折疊外邊距。
註意：父塊級盒子與子塊級盒子在垂直方向上毗鄰也會導致外邊距重疊； 計算規則：
兩個豎直方向上相鄰的外邊距都是正數，折疊結果是他們兩者之間較大的值。
兩個豎直方向上相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
兩個豎直方向上相鄰的外邊距一正一負時，折疊結果是兩者的相加的和； (附：如何使元素上下margin不折疊？)
1、浮動、inline-block、絕對定位；
2、創建塊級格式化上下文（BFC）的元素，不和它的子元素發生margin折疊； 8.rgba()和opacity()的透明效果的區別？ rgba()和opacity都能實現透明效果，但最大的不同是opacity作用於元素，以及元素內的所有內容的透明度，而rgba()只作用於元素的顏色或其背景色。 9.css中文字的水平垂直居中？ line-height 設置為盒子高度 text-align center; 10.垂直居中一個浮動元素？
px和em都是長度單位。
px的值是固定的，指定多少就是多少，容易計算。em的值不是固定的，並且em會繼承父級元素的字體大小。
瀏覽器默認字體高都是16px。在默認情況下都是：1em=16px。12px=0.75em。 12.css的content屬性？有什麽作用與應用？ css的content屬性專門應用在before/after偽元素上，用來插入生成內容。 常用偽類清除浮動：
2、結尾處加空div標簽clear：both；
3、父級元素定義偽類：如上；
4、父級元素定義overflow：hidden；
5、父級元素定義overflow：auto；
6、父級元素也浮動,需要定義寬度；
7、父級元素定義display：table； 8、結尾處加br標簽clear：both； 第三種：after偽元素方法清理浮動，文檔結構更加清晰 13.box-sizing 常用的屬性？分別有什麽作用？
box-sizing：content-box|border-box|inherit；
content-box：寬、高應用到元素的內容框。在高、寬之外繪制元素的內邊距和邊框（默認效果）；
border-box：元素的任何內邊距和邊框都在已設定的寬度和高度內進行繪制。
此時的寬高=content+padding+border； （完）
外部樣式表，引入一個外部css文件
內部樣式表，將css代碼放在<head>標簽內部
內聯樣式，將css樣式直接定義在html元素內部 2.css有哪些選擇器？
id選擇器
類選擇器
標簽選擇器 又可以細分為：
派生選擇器（包括後代選擇器、子元素選擇器、相鄰兄弟選擇器）
偽元素選擇器
屬性選擇器
群組選擇器
通配符選擇器 css優先級定義？
計算方法：
標簽選擇器優先級為1
類選擇器優先級為10
id選擇器優先級為100
行內樣式優先級為1000
！important 無限大； 3.css中屬性定義，使得dom元素不顯示在瀏覽器可視範圍內？
1.display屬性為none、visibility設為hidden（但是仍然占據頁面空間）
display：隱藏對應的元素不占據原來的空間。visibility：隱藏對應的元素仍占據空間位置。 4.超鏈接訪問過後hover樣式就不出現？如何解決？
改變css屬性的排列順序（LVHA）link visited hover active 5.css hack的原理？
由於不同的瀏覽器和瀏覽器各版本對css的支持及解析結果不一樣，以及css優先級對瀏覽器展現效果的影響，我們可以據此針對不同瀏覽器情景來應用不同的css。
css hack有三種表現形式，css屬性前綴法、選擇器前綴法以及ie條件註釋法（即頭部引用if ie）。實際項目中css hack大部分是針對ie瀏覽器不同版本之間的表現差異而引入的。 5.1屬性前綴法：
例：ie6能識別下劃線“_”和星號“*”，ie7能識別星號“*”（以上版本並不支持），但不能識別下劃線“_”，ie6~ie10都認識“\9”，但是其他瀏覽器不能支持
5.2選擇器前綴法（選擇器hack）
例：ie6能識別*html .class{},ie7能識別*+html .class{} 或者*:first-child+html .class{};
5.3ie條件註釋法：
針對所有ie（ie10+已經不再支持條件註釋）：<!--[if IE]>ie瀏覽器顯示的內容<![endif]-->，針對ie6及以下版本：<!--[if lte IE 6]>只在ie6及以下顯示的內容<![endif]-->.這類hack不僅針對css生效，對寫在判斷語句裏面的所有代碼都會生效。 css hack書寫順序：
一般將適用範圍廣，能識別能力強的css定義在前面。因為寫在後面代碼如果被識別會覆蓋前面識別的。 6.行內元素和塊級元素的具體區別？行內元素的padding和margin可設置嗎？
塊級元素：總是獨占一行，寬、高、內邊距、外邊距都可以控制。
內聯元素：和相鄰的內聯元素在同一行，寬、高、上下內邊距、上下外邊距都不可變。
塊級元素：
div、p、h1~h6、hr、ul、ol、li、dl、dt、dd、form、table、tbody、tfoot、thead、（header、article、footer、nav）
內聯元素：
span、a、b、br、em、strong、img、input、abbr、button、label、textarea
（拓展：瀏覽器默認的inline-block元素） <input>、<img>、<button>、<textarea>、<label> （附：行內塊元素的兼容性使用？）
div｛
display:inline-blcok; //觸發ie的hasLayout
display:inline;
｝
div｛
*display：inline；*zoom：1;
｝
7:外邊距重疊是什麽？導致的結果是什麽？
在css當中兩個（普通文檔流）豎直方向上的毗鄰（沒有被非空內容、padding、border 或 clear 分隔開）盒子的外邊距可以結合成一個單獨的外邊距。這種合並外邊距的方式被稱為折疊，所結合而成的外邊距成為折疊外邊距。
註意：父塊級盒子與子塊級盒子在垂直方向上毗鄰也會導致外邊距重疊； 計算規則：
兩個豎直方向上相鄰的外邊距都是正數，折疊結果是他們兩者之間較大的值。
兩個豎直方向上相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
兩個豎直方向上相鄰的外邊距一正一負時，折疊結果是兩者的相加的和； (附：如何使元素上下margin不折疊？)
1、浮動、inline-block、絕對定位；
2、創建塊級格式化上下文（BFC）的元素，不和它的子元素發生margin折疊； 8.rgba()和opacity()的透明效果的區別？ rgba()和opacity都能實現透明效果，但最大的不同是opacity作用於元素，以及元素內的所有內容的透明度，而rgba()只作用於元素的顏色或其背景色。 9.css中文字的水平垂直居中？ line-height 設置為盒子高度 text-align center; 10.垂直居中一個浮動元素？
.son{ background-color:#ff0000; width:200px; height:200px; position:absolute; top:50%; left:50%; margin-left:-100px; margin-top:-100px; } .son{ width: 200px; height: 200px; background-color: #ff0000; margin:auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } 附： .father{ display:flex; justify-content:center; align-items:center; } (詳解c3div水平垂直居中：http://www.cnblogs.com/shenxiaolin/p/5387623.html) 如何垂直居中一個<img>？ .father{ display:table-cell; text-align:center; vertical-align:middle; }
11.px和em的區別
px和em都是長度單位。
px的值是固定的，指定多少就是多少，容易計算。em的值不是固定的，並且em會繼承父級元素的字體大小。
瀏覽器默認字體高都是16px。在默認情況下都是：1em=16px。12px=0.75em。 12.css的content屬性？有什麽作用與應用？ css的content屬性專門應用在before/after偽元素上，用來插入生成內容。 常用偽類清除浮動：
.clearfix:after{ content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix{ *zoom:1; }(附：清除浮動的方式？) 1、給父元素定義height
2、結尾處加空div標簽clear：both；
3、父級元素定義偽類：如上；
4、父級元素定義overflow：hidden；
5、父級元素定義overflow：auto；
6、父級元素也浮動,需要定義寬度；
7、父級元素定義display：table； 8、結尾處加br標簽clear：both； 第三種：after偽元素方法清理浮動，文檔結構更加清晰 13.box-sizing 常用的屬性？分別有什麽作用？
box-sizing：content-box|border-box|inherit；
content-box：寬、高應用到元素的內容框。在高、寬之外繪制元素的內邊距和邊框（默認效果）；
border-box：元素的任何內邊距和邊框都在已設定的寬度和高度內進行繪制。
此時的寬高=content+padding+border； （完）
前端css知識總結整理