概述：
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明:
CSS聲明總是以分號(;)結束，聲明組以大括號({})括起來:
一、注釋：
CSS注釋以 "/*" 開始, 以 "*/" 結束
eg: /*p{color:red;text-align:center;}*/
二、插入css樣式表的方式？link 和@import 的區別是?
1.外部樣式：使用 標簽鏈接到樣式表。 標簽在（文檔的）頭部
eg : <link rel="stylesheet" type="text/css" href="index.css">
2.內部樣式表:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
</style>
</head>
3.內聯樣式表：
<p style="color:sienna;margin-left:20px">這是一個段落。
4.導入(@import)
link和@import的區別：
link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務；
@import屬於CSS范疇，只能加載CSS。link引用CSS時，在頁面載入時同時加載；
@import需要頁面網頁完全載入以后加載。link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
link支持使用Javascript控制DOM去改變樣式；而@import不支持。
一般情況下，三種的優先級如下：
（內聯樣式） > （內部樣式） >（外部樣式） > 瀏覽器默認樣式
三、CSS 背景
1.background-color： 背景顏色
CSS中，顏色值通常以以下方式定義:
十六進制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
顏色名稱 - 如："red"；
其它屬性值：
inherit指定背景顏色，應該從父元素繼承
transparent（透明）
如： body {background-color:#b0c4de;}
2.background-image：背景圖像
默認情況下，背景圖像進行平鋪重復顯示，以覆蓋整個元素實體.
如:body {background-image:url('a.jpg');}
3.background-repeat:設置背景圖像是否及如何重復。
屬性值：
repeat 背景圖像將向垂直和水平方向重復。這是默認
repeat-x 只有水平位置會重復背景圖像
repeat-y 只有垂直位置會重復背景圖像
no-repeat 背景圖片不會重復
inherit 指定背景圖片屬性設置應該從父元素繼承
4.background-attachment：背景圖像是否固定或者隨着頁面的其余部分滾動。
屬性值：
scroll 背景圖片隨頁面的其余部分滾動。這是默認
fixed 背景圖像是固定的
inherit 指定background-attachment的設置應該從父元素繼承
5.background-position：設置背景圖像的起始位置。
屬性值一般設置：left top bottom right x% 0px
四、CSS 文本格式
1. color：文本顏色：
十六進制值 - 如: ＃FF0000
一個RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red
2.text-align：文本的對齊方式
left 把文本排列到左邊。默認值：由瀏覽器決定。
right 把文本排列到右邊。
center 把文本排列到中間。
justify 實現兩端對齊文本效果。
3.text-decoration:文本修飾，主要是用來刪除鏈接的下划線
none 默認。定義標准的文本。
underline 定義文本下的一條線。
overline 定義文本上的一條線。
line-through 定義穿過文本下的一條線。
4.text-transform: 文本轉大小寫（控制元素中的字母）
none 默認。定義帶有小寫字母和大寫字母的標准的文本。
capitalize 文本中的每個單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義僅有小寫字母。
5.text-indent： 文本縮進屬性是用來指定文本的第一行的縮進。
如：p {text-indent:50px;}
6.direction: 設置文本方向。
ltr默認。文本方向從左到右。
rtl文本方向從右到左。
7.letter-spacing: 設置字符間距
8. line-height 設置行高
9. vertical-align: 設置元素的垂直對齊
middle把此元素放置在父元素的中部。
sub垂直對齊文本的下標。
super垂直對齊文本的上標
top把元素的頂端與行中最高元素的頂端對齊
bottom把元素的底端與行中最低的元素的頂端對齊。
text-bottom把元素的底端與父元素字體的底端對齊。
10. word-spacing: 設置字間距
11. text-shadow ： 如： text-shadow: 2px 2px #ff0000;
五、CSS 文字
1.font-style： 斜體文字的字體樣式屬性
font-style:normal; 正常 - 正常顯示文本
font-style:italic; 斜體 - 以斜體字顯示的文字
2.font-family : 屬性設置文本的字體系列。
p{font-family:"Times New Roman", Times, serif;}
3.font-size : 屬性設置文本的大小。
4.font-weight : 指定字體的粗細。
六、鏈接樣式
a:link {color:#000000;} /* 未訪問鏈接*/
a:visited {color:#00FF00;} /* 已訪問鏈接 */
a:hover {color:#FF00FF;} /* 鼠標移動到鏈接上 */
a:active {color:#0000FF;} /* 鼠標點擊時 */
七、CSS 列表(ul)
list-style 簡寫屬性。用於把所有用於列表的屬性設置於一個聲明中
list-style-image 將圖象設置為列表項標志。
list-style-position 設置列表中列表項標志的位置。
list-style-type 設置列表項標志的類型。
none無標記。
disc默認。標記是實心圓
circle標記是空心圓。
square標記是實心方塊。
八、CSS 表格
border-collapse : 表格邊框(常用的)
table{border-collapse:collapse;}
table,th, td{border: 1px solid black;}
九.CSS 邊框屬性
1. border 簡寫屬性，用於把針對四個邊的屬性設置在一個聲明。
2.border-width 用於為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬
3. border-style 用於設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式
border-style:dotted solid double dashed
dotted 上邊框是點狀
solid 右邊框是實線
double 下邊框是雙線
dashed 左邊框是虛線
4.border-color 設置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色。
十、CSS 尺寸
1.height 設置元素的高度。
2.line-height 設置行高。
3.max-height 設置元素的最大高度。
4.max-width 設置元素的最大寬度。
5.min-height 設置元素的最小高度。
6.min-width 設置元素的最小寬度。
7.width 設置元素的寬度。
十一、px，em，rem 的區別
px像素(Pixel)。絕對單位。像素 px 是相對於顯示器屏幕分辨率而言的，是一個虛擬長度單位，是計算 機系統的數字化圖像長度單位，如果 px 要換算成物理長度，需要指定精度 DPI。
em是相對長度單位，相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置， 則相對於瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，因此並不是一個固定的值。
rem是 CSS3 新增的一個相對單位(root em，根 em)，使用 rem 為元素設定字體大小時，仍然是相對大小， 但相對的只是HTML根元素。
十二、position 幾個屬性的作用
position 的常見四個屬性值: relative，absolute，fixed，static。一般都要配合"left"、“top”、“right” 以及 “bottom” 屬性使用。
static:默認位置。在一般情況下，我們不需要特別的去聲明它，但有時候遇到繼承的情況，我們不願意見到元素所繼承的屬性影響本身，從而可以用Position:static取消繼承，即還原元素定位的默認值。設置為 static 的元素，它始終會處於頁面流給予的位置(static 元素會忽略任何 top、 bottom、left 或 right 聲明)。一般不常用。
relative:相對定位。相對定位是相對於元素默認的位置的定位，它偏移的 top，right，bottom，left 的值都以它原來的位置為基准偏移，而不管其他元素會怎么 樣。注意 relative 移動后的元素在原來的位置仍占據空間。
absolute:絕對定位。設置為 absolute 的元素，如果它的 父容器設置了 position 屬性，並且 position 的屬性值為 absolute 或者 relative，那么就會依據父容器進行偏移。如果其父容器沒有設置 position 屬性，那么偏移是以 body 為依據。注意設置 absolute 屬性的元素在標准流中不占位置。
fixed:固定定位。位置被設置為 fixed 的元素，可定位於相對於瀏覽器窗口的指定坐標。不論窗口滾動與否，元素都會留在那個位置。它始終是以 body 為依據的。 注意設置 fixed 屬性的元素在標准流中不占位置。
十三、盒子模型（box-sizing）
設置CSS盒模型為標准模型或IE模型。標准模型的寬度只包括content，二IE模型包括border和paddingbox-sizing屬性可以為三個值之一：
content-box，默認值，只計算內容的寬度，border和padding不計算入width之內
padding-box，padding計算入寬度內
border-box，border和padding計算入寬度之內
十四、 display有哪些值？說明他們的作用?
inline（默認）–內聯
none–隱藏
block–塊顯示
table–表格顯示
list-item–項目列表
inline-block
十五、 margin屬性和padding屬性？
margin：外邊距； padding：內邊距；屬性值可以 有四個，如下：
margin:25px 50px 75px 100px;
上邊距為25px
右邊距為50px
下邊距為75px
左邊距為100px
margin:25px 50px 75px;
上邊距為25px
左右邊距為50px
下邊距為75px
margin:25px 50px;
上下邊距為25px
左右邊距為50px
margin:25px;
所有的4個邊距都是25px
十六.CSS隱藏元素的常見的幾種方式及區別
1. display:none
元素在頁面上將徹底消失，元素本來占有的空間就會被其他元素占有，也就是說它會導致瀏覽器的重排和重繪。
不會觸發其點擊事件
2.visibility:hidden
和display:none的區別在於，元素在頁面消失后，其占據的空間依舊會保留着，所以它只會導致瀏覽器重繪而不會重排。
無法觸發其點擊事件
適用於那些元素隱藏后不希望頁面布局會發生變化的場景
3. opacity:0
將元素的透明度設置為0后，在我們用戶眼中，元素也是隱藏的，這算是一種隱藏元素的方法。
和visibility:hidden的一個共同點是元素隱藏后依舊占據着空間，但我們都知道，設置透明度為0后，元素只是隱身了，它依舊存在頁面中。
可以觸發點擊事件
十七、漸進增強和優雅降級
關鍵的區別是他們所側重的內容，以及這種不同造成的工作流程的差異
優雅降級觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。
漸進增強觀點則認為應關注於內容本身，優先考慮低版本。
十八、重繪和重排
重繪：當盒子的位置、大小以及其他屬性，例如顏色、字體大小等都確定下來之后，瀏覽器便把這些原色都按照各自的特性繪制一遍，將內容呈現在頁面上。重繪是指一個元素外觀的改變所觸發的瀏覽器行為，瀏覽器會根據元素的新屬性重新繪制，使元素呈現新的外觀。觸發重繪的條件：改變元素外觀屬性。如：color，background-color等。注意：table及其內部元素可能需要多次計算才能確定好其在渲染樹中節點的屬性值，比同等元素要多花兩倍時間，這就是我們盡量避免使用table布局頁面的原因之一。
重排：當渲染樹中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建, 這就稱為回流。每個頁面至少需要一次回流，就是在頁面第一次加載的時候。
重繪和重排的關系：在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程稱為重繪。
所以，重排必定會引發重繪，但重繪不一定會引發重排。
十九、怎么讓一個不定寬高的 DIV，垂直水平居中?
1.使用Flex：只需要在父盒子設置：display: flex; justify-content: center;align-items: center;
2.使用 CSS3 transform：父盒子設置:position:relative
Div 設置:transform:translate(-50%，-50%);position:absolute;top:50%;left:50%;
3.使用 display:table-cell 方法：父盒子設置:display:table-cell;text-align:center;vertical-align:middle;
Div 設置:display:inline-block;vertical-align:middle;
二十、BFC相關知識（塊級格式化上下文）
定義：BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有 Block-level box 參 與， 它規定了內部的 Block-level Box 如何布局，並且與這個區域外部毫不相干。
BFC布局規則BFC 就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
BFC這個元素的垂直方向的邊距會發生重疊，垂直方向的距離由margin決定，取最大值
BFC 的區域不會與浮動盒子重疊（清除浮動原理）。
計算 BFC 的高度時，浮動元素也參與計算。
哪些元素會生成 BFC
根元素
float 屬性不為 none
position 為 absolute 或 fixed
display 為 inline-block， table-cell， table-caption， flex， inline-flex
overflow 不為 visible
二十一、浮動與清除浮動
1.浮動相關知識
float屬性的取值：
left：元素向左浮動。
right：元素向右浮動。
none：默認值。元素不浮動，並會顯示在其在文本中出現的位置。
浮動的特性：
浮動元素會從普通文檔流中脫離，但浮動元素影響的不僅是自己，它會影響周圍的元素對齊進行環繞。
不管一個元素是行內元素還是塊級元素，如果被設置了浮動，那浮動元素會生成一個塊級框，可以設置它的width和height，因此float常常用於制作橫向配列的菜單，可以設置大小並且橫向排列。
浮動元素的展示在不同情況下會有不同的規則：
浮動元素在浮動的時候，其margin不會超過包含塊的padding。PS：如果想要元素超出，可以設置margin屬性
如果兩個元素一個向左浮動，一個向右浮動，左浮動元素的marginRight不會和右浮動元素的marginLeft相鄰。
如果有多個浮動元素，浮動元素會按順序排下來而不會發生重疊的現象。
如果有多個浮動元素，后面的元素高度不會超過前面的元素，並且不會超過包含塊。
如果有非浮動元素和浮動元素同時存在，並且非浮動元素在前，則浮動元素不會高於非浮動元素
浮動元素會盡可能地向頂端對齊、向左或向右對齊
重疊問題
行內元素與浮動元素發生重疊，其邊框，背景和內容都會顯示在浮動元素之上
塊級元素與浮動元素發生重疊時，邊框和背景會顯示在浮動元素之下，內容會顯示在浮動元素之上
clear屬性clear屬性：確保當前元素的左右兩側不會有浮動元素。clear只對元素本身的布局起作用。取值：left、right、both
2. 父元素高度塌陷問題
為什么要清除浮動，父元素高度塌陷解決父元素高度塌陷問題：一個塊級元素如果沒有設置height，其height是由子元素撐開的。對子元素使用了浮動之后，子元素會脫離標准文檔流，也就是說，父級元素中沒有內容可以撐開其高度，這樣父級元素的height就會被忽略，這就是所謂的高度塌陷。
3. 清除浮動的方法
方法1：給父級div定義 高度原理：給父級DIV定義固定高度（height），能解決父級DIV 無法獲取高度得問題。優點：代碼簡潔缺點：高度被固定死了，是適合內容固定不變的模塊。（不推薦使用）
方法二：使用空元素，如(.clear{clear:both})原理：添加一對空的DIV標簽，利用css的clear:both屬性清除浮動，讓父級DIV能夠獲取高度。優點：瀏覽器支持好缺點：多出了很多空的DIV標簽，如果頁面中浮動模塊多的話，就會出現很多的空置DIV了，這樣感覺視乎不是太令人滿意。（不推薦使用）
方法三：讓父級div 也一並浮起來這樣做可以初步解決當前的浮動問題。但是也讓父級浮動起來了，又會產生新的浮動問題。 不推薦使用
方法四：父級div定義 display:table原理：將div屬性強制變成表格優點：不解缺點：會產生新的未知問題。（不推薦使用）
方法五：父元素設置 overflow：hidden、auto；原理：這個方法的關鍵在於觸發了BFC。在IE6中還需要觸發 hasLayout（zoom：1）優點：代碼簡介，不存在結構和語義化問題缺點：無法顯示需要溢出的元素（亦不太推薦使用）
方法六：父級div定義 偽類:after 和 zoom
.clearfix:after{
content:'.';
display:block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {zoom:1;}
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題優點：結構和語義化完全正確,代碼量也適中，可重復利用率（建議定義公共類）缺點：代碼不是非常簡潔（極力推薦使用）
經益求精寫法
.clearfix:after {
content:”\200B”;
display:block;
height:0;
clear:both;
}
.clearfix { *zoom:1; } 照顧IE6，IE7就可以了
二十二、 用純CSS創建一個三角形的原理是什么
首先，需要把元素的寬度、高度設為0。然后設置邊框樣式。
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
二十三、 常見的兼容性問題
1.不同瀏覽器的標簽默認的margin和padding不一樣。*{margin:0;padding:0;}
2.IE6雙邊距bug：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大。hack：display:inline;將其轉化為行內屬性。
3.漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9”這一標記，將IE瀏覽器從所有情況中分離出來。接着，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
{
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
4.設置較小高度標簽（一般小於10px），在IE6，IE7中高度超出自己設置高度。hack：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小於你設置的高度。
5.IE下，可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性；Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法:統一通過getAttribute()獲取自定義屬性。
6.Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
7.超鏈接訪問過后hover樣式就不出現了，被點擊訪問過的超鏈接樣式不再具有hover和active了。解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
二十四、 瀏覽器是怎樣解析CSS選擇器的
CSS選擇器的解析是從右向左解析的。若從左向右的匹配，發現不符合規則，需要進行回溯，會損失很多性能。若從右向左匹配，先找到所有的最右節點，對於每一個節點，向上尋找其父節點直到找到根元素或滿足條件的匹配規則，則結束這個分支的遍歷。兩種匹配規則的性能差別很大，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點（葉子節點），而從左向右的匹配規則的性能都浪費在了失敗的查找上面。
而在 CSS 解析完畢后，需要將解析的結果與 DOM Tree 的內容一起進行分析建立一棵 Render Tree，最終用來進行繪圖。在建立 Render Tree 時（WebKit 中的「Attachment」過程），瀏覽器就要為每個 DOM Tree 中的元素根據 CSS 的解析結果（Style Rules）來確定生成怎樣的 Render Tree。
移動端頁面頭部必須聲明有meta聲明的viewport:
26 、移動端頁面頭部必須有meta聲明的viewport
<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>
二十七、 position:fixed;在android下無效怎么處理
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
二十八、如果需要手動寫動畫，你認為最小時間間隔是多久，為什么
多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms。
二十九、 li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
行框的排列會受到中間空白（回車空格）等的影響，因為空格也屬於字符,這些空白也會被應用樣式，占據空間，所以會有間隔，把字符大小設為0，就沒有空格了。
解決方法：
可以將 ： 代碼全部寫在一排
浮動li中float：left
在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px
三十、 png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過webp？
png是便攜式網絡圖片（Portable Network Graphics）是一種無損數據壓縮位圖文件格式.優點是：壓縮比高，色彩好。 大多數地方都可以用。
jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及顏色平滑變化做的不錯。在www上，被用來儲存和傳輸照片的格式。
gif是一種位圖文件格式，以8位色重現真色彩的圖像。可以實現動畫效果.
webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。缺點是壓縮的時間更久了，兼容性不好，目前谷歌和opera支持。
三十一、CSS屬性overflow屬性定義溢出元素內容區的內容會如何處理?
參數是scroll時候，必會出現滾動條。
參數是auto時候，子元素內容大於父元素時出現滾動條。
參數是visible時候，溢出的內容出現在父元素之外。
參數是hidden時候，溢出隱藏。
作者：進入web前端
鏈接：https://www.jianshu.com/p/0b27eab7cffb
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。