九、如何水平垂直居中布局
.center-flex {
? ? display:flex;
? ? justify-content:center;
? ? align-items:center;
}
<div class="parent"><span></span></div>
.parent{
position:relative
}
.parent span{
width:50px;
height:50px;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}
1. CSS選擇器以及優(yōu)先級
!important>行內(nèi)>id>類>標簽>通配符>繼承>瀏覽器同一級別
2. display的屬性值及其作用
(none 控制元素不顯示 不保留元素空間? visibility：hidden 可以保留元素空間)
(block 塊級元素 元素顯示 獨占一行 可以設置寬高)
(inline 默認值 行內(nèi)元素 不可以設置寬高)
(inline-block 行內(nèi)塊元素 既是行內(nèi) 又是塊 可以設置寬高)
3. display的block、inline和inline-block的區(qū)別
4.隱藏元素的方法
（opacity：0）設置元素透明度
（display：none）不保留元素空間
（visibility：hidden）保留元素空間
5. link和@import的區(qū)別
6.偽元素和偽類的區(qū)別
(偽元素是添加一個沒有的元素 通常使用兩個冒號 例如 ::before ::after)
(偽類是像存在的元素添加一個類 通常有一個冒號組成 例如 :active :hover :link)
(都是被添加到選擇器末尾的關鍵字)
7.對盒子模型的區(qū)別
（標準盒模型 content padding margin border 寬度=width+margin+padding+border）
（怪異盒模型 寬度包含了padding和border）
8. CSS3新特性
transform（translate平移 scale縮放 rotate旋轉(zhuǎn)）
屬性選擇器（nth-type-of）
邊框的圓角（border-raduis）
flex布局（flex-flow justify-content）
transition（transition-property 過度的屬性 ）（transition-duration 過度的時間）（transition-delay 過度延遲幾秒執(zhí)行）
9.單行、多行文本溢出隱藏
overflow:hidden,white-space:nowrap,text-overflow:ellipsis
/* 多行文本溢出隱藏 省略號代替*/
? overflow: hidden;
? text-overflow: ellipsis;
? display: -webkit-box;
? -webkit-box-orient: vertical; /*設置對其模式，縱向?qū)R*/
? -webkit-line-clamp: 2; /*設置多行的行數(shù)*/
10.兩欄布局的實現(xiàn)
左側(cè)設置固定寬度，左浮動，右側(cè)寬度auto，右側(cè)margin-left
11.三欄布局的實現(xiàn)
使用flex實現(xiàn)三欄布局：布局分left、center、right，外層套一個content，給content設置display：flex，給left，center、right設置order：1/2/3 進行排序，給left和right設置flex-shrink:0 防止收縮
13.對flex布局的理解以及使用場景
（網(wǎng)頁布局中，需要高保真還原設計稿，能夠適應不同機型設備，用float和position比較繁瑣，不易維護，逐漸出現(xiàn)了響應式布局 flex）
（flex-direction 排列方式 屬性：column，row）
（flex-warp 超過寬度 重新起一行排列 wrapper nowrapper?）
（flex-flow 是direction和warp的和? row no-wrapper? row wrapper）
（justify-content 主軸對齊方式 flex-start flex-end center space-between space-around）
（align-items 定義了元素在縱軸上的對齊方式 flex-start flex-end center?stretch??baseline）
（align-content 定義了元素多個軸線上的對齊方式 flex-start flex-end?center space-between space-around）
14.為什么需要清除浮動？清除浮動的方式
（因為浮動脫離了標準文檔流，會對下面的元素排版產(chǎn)生影響）
（clear：both）
16. position的屬性有哪些？區(qū)別？（static:默認 沒有定位 出現(xiàn)在正常流中 relative:相對于正常元素 absolute:相對于父元素 fixed:相對于瀏覽器）
17.實現(xiàn)一個三角形
.div{
width:50px;
height:50px;
border-top:50px solid green;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid transparent;
}
18.畫一個 0.5px 的線
19.如何解決1px的問題（移動端問題）
20. CSS中可繼承與不可繼承的屬性
22. CSS 優(yōu)化和提高性能的方法有哪些？
22.1.樣式復用，提取公共樣式減少代碼量?
22.2.少用*號?
22.3.單一樣式-margin-top：0改為margin-top：top
22.4.少使用后代選擇器，降低選擇器的權重值?
22.5.慎重使用高性能屬性 浮動 定位
24. display:inline-block 什么時候會顯示間隙？
元素之間的空格/換行都會產(chǎn)生間隙
處理方法：
移除空格
使? margin 負值
使? font-size:0
letter-spacing
word-spacing
25. 對媒體查詢的理解?
（自適應布局，一套代碼多個設備應用，合理布局、頭部《meta》）
26.對css工程化的理解
27. z-index屬性在什么情況下會失效
（1.無定位 2.父標簽屬性為relative 3.含有float）
28.常見的CSS布局單位
（固定布局盒子的寬高固定、響應式布局媒體查詢、彈性布局flex、浮動布局float、定位布局position）
30. display、float、position的執(zhí)行優(yōu)先級？
如果display的值為none，則float和position無效
如果position的值為absolution或fixed，則float無效
31.css的行內(nèi)元素、塊級元素、空元素
行內(nèi)元素：span、a、img、input、strong、select、button
塊級元素：div、p、ul、li、h1-h6
空元素：meat、link、input、img、br
32.em和rem的區(qū)別
em相對于父元素
rem相對于根元素
r表示root
