1.行內元素和塊級元素
內聯元素(inline)：
a – 錨點
abbr – 縮寫
acronym – 首字
b – 粗體(不推薦)
big – 大字體
br – 換行
cite – 引用
code – 計算機代碼(在引用源碼的時候需要)
dfn – 定義字段
em – 強調
font – 字體設定(不推薦)
i – 斜體
img – 圖片
input – 輸入框
kbd – 定義鍵盤文本
label – 表格標籤
q – 短引用
s – 中劃線(不推薦)
samp – 定義範例計算機代碼
select – 項目選擇
small – 小字體文本
span – 常用內聯容器，定義文本內區塊
strike – 中劃線
strong – 粗體強調
sub – 下標
sup – 上標
textarea – 多行文本輸入框
tt – 電傳文本
u – 下劃線
塊級元素(block)：
address – 地址
blockquote – 塊引用
center – 舉中對齊塊
dir – 目錄列表
div – 常用塊級容易，也是CSS layout的主要標籤
dl – 定義列表
fieldset – form控制組
form – 交互表單
h1 – 大標題
h2 – 副標題
h3 – 3級標題
h4 – 4級標題
h5 – 5級標題
h6 – 6級標題
hr – 水平分隔線
menu – 菜單列表
ol – 有序表單
p – 段落
pre – 格式化文本
table – 表格
ul – 無序列表
li
內聯元素與塊級元素的區別
內聯元素：
1、內聯元素不會獨佔一行，相鄰的內聯元素會排在同一行。其寬度隨內容的變化而變化。
2、內聯元素不可以設置寬高
3、內聯元素可以設置margin，padding，但只在水平方向有效。
塊狀元素：
1、塊級元素會獨佔一行，默認情況下寬度自動填滿其父元素寬度
2、塊級元素可以設置寬高
3、塊級元素可以設置margin，padding
內聯塊狀元素inline-block：
簡單來說就是將對象呈現爲inline對象，但是對象的內容作爲block對象呈現（可以設置寬高和margin值）。之後的內聯對象會被排列在同一內聯。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
關聯：
可以通過修改display屬性來切換塊級元素和內聯元素
塊級：display:block;
內聯：display:inline;
2.CSS盒模型
標準盒模型下盒子的大小 = content + border + padding + margin
怪異盒模型下盒子的大小=width（content + border + padding） + margin
可以爲box-sizing賦三個值：
content-box： 默認值，border和padding不算到width範圍內，可以理解爲是W3c的標準模型(default)
border-box：border和padding劃歸到width範圍內，可以理解爲是IE的怪異盒模型
padding-box：將padding算入width範圍
當設置爲box-sizing:content-box時，將採用標準模式解析計算（默認模式）；
當設置爲box-sizing:border-box時，將採用怪異模式解析計算；
3.position
absolute：生成絕對定位的元素，相對於 static 定位以外的第一個祖先元素進行定位
#box_relative { position: absolute; left: 30px; top: 20px; }
fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。 （IE6不支持）
relative：生成相對定位的元素，相對於其在普通流中的位置進行定位
#box_relative { position: relative; left: 30px; top: 20px; }
static：默認值。沒有定位，元素出現在正常的流中
4.display
display 屬性規定元素應該生成的框的類型。
5.清除浮動float
https://blog.csdn.net/h_qingyi/article/details/81269667
1.額外標籤法（在最後一個浮動標籤後，新加一個標籤，給其設置clear：both；）（不推薦）
2.父級添加overflow屬性（父元素添加overflow:hidden）（不推薦）
3.使用after僞元素清除浮動（推薦使用）
4.使用before和after雙僞元素清除浮動
6.水平居中、垂直居中
https://blog.csdn.net/weixin_37580235/article/details/82317240
水平居中
行內元素
首先看它的父元素是不是塊級元素，如果是，則直接給父元素設置 text-align: center;
如果不是，則先將其父元素設置爲塊級元素，再給父元素設置 text-align: center;
塊級元素
方案一：（分寬度定不定兩種情況）
定寬度：需要誰居中，給其設置 margin: 0 auto; （作用：使盒子自己居中）
不定寬度：默認子元素的寬度和父元素一樣，這時需要設置子元素爲display: inline-block; 或 display: inline;即將其轉換成行內塊級/行內元
素，給父元素設置 text-align: center;
方案二：
首先設置父元素爲相對定位，再設置子元素爲絕對定位，設置子元素的left:50%，即讓子元素的左上角水平居中；
定寬度：設置絕對子元素的 margin-left: -元素寬度的一半px; 或者設置transform: translateX(-50%);
不定寬度：利用css3新增屬性transform: translateX(-50%);
方案三：
使用flexbox佈局，只需要給待處理的塊狀元素的父元素添加屬性 display: flex; justify-content: center;
垂直居中
行內元素
單行行內元素：只需要設置單行行內元素的"行高等於盒子的高"即可；line-height: 300px;
多行行內元素：使用給父元素設置display:table-cell;和vertical-align: middle;屬即可；
塊級元素
方案一：首先設置父元素爲相對定位，再設置子元素爲絕對定位，設置子元素的top: 50%，即讓子元素的左上角垂直居中；
定高度：設置絕對子元素的 margin-top: -元素高度的一半px; 或者設置transform: translateY(-50%);
不定高度：利用css3新增屬性transform: translateY(-50%);
方案二：使用flexbox佈局實現（高度定不定都可以）
使用flexbox佈局，只需要給待處理的塊狀元素的父元素添加屬性 display: flex; align-items: center;
7.BFC
https://blog.csdn.net/sinat_36422236/article/details/88763187
Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。
最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。
BFC是一個獨立的佈局環境，其中的元素佈局是不受外界的影響，並且在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿着其父元素的邊框排列。
BFC的佈局規則
1.內部的Box會在垂直方向，一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
3.每個盒子（塊盒與行盒）的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
4.BFC的區域不會與float box重疊。
5.BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
6.計算BFC的高度時，浮動元素也參與計算。
如何創建BFC
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
5、根元素自動形成BFC
BFC的作用
1.利用BFC避免margin重疊。
根據第二條，屬於同一個BFC的兩個相鄰的Box會發生margin重疊，所以我們可以設置，兩個不同的BFC，也就是我們可以讓把第二個p用div包起來，然後激活它使其成爲一個BFC
2.自適應兩欄佈局
BFC的區域不會重疊
3.清除浮動。
計算BFC的高度時，浮動元素也參與計算。
8.display：none；和 visibility：hidden區別 和透明度
display：none，若設置了此屬性，則該元素以及他的所有後代元素都會隱藏，佔據空間消失；
visibility：hidden，可以隱藏這個元素，但佔據空間仍不變，仍影響佈局。
其他區別：
1）visibility具有繼承性，父元素設置此屬性，子可繼承，若給子設置visibility：visible則子可以顯示出來；
2）visibility：hidden不會影響計數器的計數；
3）CSS3的transition支持visibility，但不支持display，由於transition可以延遲執行，所以可配合visibility使用純CSS實現hover延時顯示效果，提高用戶體驗。
opacity:檢索或設置對象的不透明度.當他的透明度爲0的時候,視覺上它是消失了,但是他依然佔據着那個位置,並對網頁的佈局起作用。它也將響應用戶交互。添加了該屬性的元素,它的背景和元素內容也是會跟着變化的.
9.css中實現動畫
@keyframes myfirst { from {background: red;} to {background: yellow;} }
div { animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ -o-animation: myfirst 5s; /* Opera */ }
transform ：2D轉換效果
- translate()：
- rotate()：
- scale()：
- skew()：
- matrix()：
transition：過渡效果
transition：是過渡屬性，強調過渡。他的實現需要觸發一個事件（如鼠標移上去，焦點點擊等）才執行動畫，他類似於flash的補間動畫，設置一個開始和一個結束關鍵幀。
animation：是動畫屬性。他的實現不需要觸發事件，設定好時間之後可以執行，且可循環一個動畫，也類似於flash的補間動畫，但可設置多個關鍵幀（用@keyframe定義）完成動畫。
先區分一下css中的幾個屬性：animation（動畫）、transition（過渡）、transform（變形）、translate（移動）。
CSS3中的transform(變形)屬性用於內聯元素和塊級元素，可以旋轉、扭曲、縮放、移動元素，
它的屬性值有以下五個：
旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix；
transform(變形)是CSS3中的元素的屬性，而translate只是transform的一個屬性值；
transform是transition（過渡動畫）的transition-property的一個屬性值。
animation（動畫）、transition（過渡）是css3中的兩種動畫屬性。animation強調流程與控制，
對元素的一個或多個屬性的變化進行控制，可以有多個關鍵幀（animation 和@ keyframes結合使用）；
transition強調過渡，是元素的一個或多個屬性發生變化時產生的過渡效果，
同一個元素通過兩個不同的途徑獲取樣式，而第二個途徑當某種改變發生（例如hover）時才能獲取樣式，
這樣就會產生過渡動畫。
可以認爲它有兩個關鍵幀（Transition ＋ Transform ＝ 兩個關鍵幀的Animation）。
10.flex
注意，設爲 Flex 佈局以後，子元素的
float、clear和vertical-align屬性將失效。https://www.jianshu.com/p/4290522e1560
flex:1指的是什麼？
讓所有彈性盒模型對象的子元素都有相同的長度，且忽略它們內部的內容
flex默認屬性是什麼？
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
flex-grow：放大屬性
flex-shrink：縮小屬性（當寬度不夠時，相對於其他子元素縮小的比例，值越大，縮小越大）
flex-basis：項目的長度：可以是px ，等各種單位，%等
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto
auto(1 1 auto) none(0 0 auto)
11.!DOCTYPE
<!DOCTYPE> 不是 HTML 標籤。它爲瀏覽器提供一項信息（聲明），即 HTML 是用什麼版本編寫的。
12.overflow
overflow 屬性規定當內容溢出元素框時發生的事情。
visible
默認值。內容不會被修剪，會呈現在元素框之外。
hidden
內容會被修剪，並且其餘內容是不可見的。
scroll
內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。
auto
如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容。
inherit
規定應該從父元素繼承 overflow 屬性的值。
13.消除margin重合
上下元素處理爲不同的BFC
14.div脫離文檔流
1.float
2.position:fixed
3.position:absolute
15.margin-top和padding-top百分比的時候，是依據什麼
相對最近父級塊級元素的width，相對最近父級塊級元素的width
16.數組的最大值和最小值
var a=[1,2,3,5];
alert(Math.max.apply(null, a));//最大值
alert(Math.min.apply(null, a));//最小值
17.css選擇器優先級順序
1.css中權重最高的樣式爲行內樣式
2.其次是ID選擇器
3.類、僞類和屬性選擇器
4.權重較低的是標籤選擇器和僞元素選擇器
18.爲何 float 會導致父元素塌陷？
float 的破壞性 —— float 破壞了父標籤的原本結構，使得父標籤出現了坍塌現象。導致這 一現象的最根本原因在於：被設置了 float 的元素會脫離文檔流。其根本原因在於 float 的 設計初衷是解決文字環繞圖片的問題。大家要記住 float 的這個影響。
19.如何理解 HTML 語義化？
所謂“語義”就是爲了更易讀懂，這要分兩部分：
讓人（寫程序、讀程序）更易讀懂
讓機器（瀏覽器、搜索引擎）更易讀懂
20. 重繪和迴流
https://www.jianshu.com/p/e081f9aa03fb
重繪：指的是當頁面中的元素不脫離文檔流，而簡單地進行樣式的變化，比如修改顏 色、背景等，瀏覽器重新繪製樣式
迴流：指的是處於文檔流中 DOM 的尺寸大小、位置或者某些屬性發生變化時，導致 瀏覽器重新渲染部分或全部文檔的情況
相比之下，迴流要比重繪消耗性能開支更大。另外，一些屬性的讀取也會引起迴流，比如 讀取某個 DOM 的高度和寬度，或者使用 getComputedStyle 方法。在寫代碼的時候要避免 迴流和重繪。比如在筆試中可能會遇見下面的題目：
var data = ['string1', 'string2', 'string3'];
for(var i = 0; i < data.length; i++){
var dom = document.getElementById('list');
dom.innerHTML += '<li>' + data[i] + '</li>';
}
//上面的代碼在循環中每次都獲取 dom ，然後對其內部的 HTML 進行累加 li ，每次都會操
作 DOM 結構，可以改成使用 documentFragment 或者先遍歷組成 HTML 的字符串，最後
操作一次 innerHTML 。