一、CSS特性达传、塊級元素篙耗、行內(nèi)級元素迫筑、display
1、CSS的兩大特性是什么鹤树？并解釋其中含義铣焊？
- 【繼承】
- 【層疊】
image.png
image.png
image.png
image.png
2、對CSS元素進行劃分罕伯，塊級元素有什么特征曲伊？行內(nèi)級元素有什么特征？
image.png
3追他、CSS哪些元素不能設(shè)置寬高坟募？
- 行內(nèi)級非替換元素，無法隨意設(shè)置寬高
image.png
4邑狸、為什么div懈糯、p、li等標簽會在瀏覽器里面展示為塊級元素单雾？
- 因為瀏覽器默認情況會給這些元素加上
display: block屬性赚哗，所以這些元素就展示為塊級元素了。
image.png
5硅堆、display常用的四個值是什么屿储？分別代碼什么意思？
-
block渐逃、none够掠、inline、inline-block
image.png
6茄菊、CSS中隱藏元素的常見兩種方式是哪兩種疯潭？有什么區(qū)別？
- 【display: none】不僅元素看不見了面殖，而且元素的框也會被移除竖哩，不會占著任何位置
- 【visibility: hidden】雖然元素看不見了，但是元素框依舊還留著脊僚，還會占著原來的位置
二期丰、文檔流、position布局吃挑、float布局
1、請描述HTML中的文檔流（或者說標準流）街立？
image.png
2舶衬、利用CSS的position屬性可以對元素進行定位，常用取值有4個赎离，是哪四個逛犹？
- static 默認值
- relative 相對定位，相對于元素原本所在的位置進行定位
- absolute 絕對定位，相對于父元素（從父元素中找第一個非static的元素虽画，找不到就取視口）進行布局舞蔽，經(jīng)典應(yīng)用《子絕父相》
- fixed 固定布局，無論如何都相對于與瀏覽器視口進行布局
-【relative码撰、absolute渗柿、fixed】通常會結(jié)合 top、bottom脖岛、left朵栖、right四個值進行使用
3、position屬性static柴梆、relative陨溅、absolute、fixed詳解绍在？
image.png
image.png
image.png
image.png
image.png
4门扇、CSS哪些布局方式會脫離文檔流？脫離文檔流的元素偿渡，有什么特點臼寄？
- 脫離標準流的元素：position:fixed/absolute，float
image.png
5卸察、絕對定位的一些技巧脯厨？在CSS如何通過margin讓元素居中？
-
【magin: 0 auto】當margin-left和margin-right被設(shè)置成auto的時候坑质，默認會相等合武，讓元素居中
image.png
6、定位元素和非定位元素的層疊關(guān)系涡扼？
image.png
image.png
7稼跳、認識float的布局
- 【float出現(xiàn)的初衷】用于圖文環(huán)繞效果
- 【float發(fā)展】在很久以前被大量用于布局（但是float規(guī)則太多，太麻煩）
- 【float結(jié)局】被flex布局所替代
三吃沪、flex布局
1汤善、flex布局當前地位？認識flex布局票彪？
- 之前用float進行布局的東西红淡，出了圖文環(huán)繞效果外，全部都用flex布局代替了降铸。
image.png
2在旱、flex布局模型，要把圖中的基本概念默寫出來推掸！
image.png
3桶蝎、flex container 和 flex item上CSS屬性劃分驻仅？
- 【flex container】的屬性全部要掌握
- 【flex item】的屬性只要掌握 flex-grow、flex-shink即可
image.png
4登渣、【container屬性】flex-direction 決定主軸的方向
image.png
5噪服、【container屬性】justify-content 決定flex-item在主軸上的布局方式
image.png
6、【container屬性】align-items 決定flex-item在交叉軸上的對齊方式
image.png
7胜茧、【container屬性】flex-wrap 決定flex-item是否進行換行
image.png
- flex-flow 了解即可
8粘优、【container屬性】align-content 決定多行 flex items 在 cross axis 上的對齊方式，與justify-content類似竹揍。
image.png
9敬飒、【items屬性，就掌握這兩個即可】flex-grow 決定多余空間items如何占據(jù)芬位，flex-shink決定空間不足如何壓縮无拗？
image.png
image.png
10、【items屬性昧碉，僅供查資料用】order英染、align-self、flex-basic被饿、flex
image.png
image.png
image.png
image.png
四四康、偽類、偽元素
1狭握、什么是偽類闪金？
- 【偽類】（pseudo class）是選擇器的一種，它用于選擇處于特定狀態(tài)元素论颅。偽類是默認生成的哎垦，不需要額外定義的。
- 【作用】瀏覽器自動維護標簽里面的偽類狀態(tài)恃疯，幫助開發(fā)者在標記文本中減少多余的類漏设，讓代碼更加靈活、更加易于維護今妄。
2郑口、動態(tài)偽類？
- :link盾鳞、:visited犬性、:hover、:active腾仅、:focus
image.png
image.png
3仔夺、nth是什么意思？什么是結(jié)構(gòu)偽類攒砖？
-【nth】：第N個缸兔，比如 fourth
image.png
4、什么是偽元素吹艇？常用的兩個偽元素是哪兩個惰蜜？
- 【偽元素】以CSS類的方式表現(xiàn)，不過表現(xiàn)的更像你往標記文本中加入全新的HTML元素一樣受神，而不是向現(xiàn)有的元素上應(yīng)用類抛猖。
-【常用偽元素::before、::after】是元素+CSS樣式鼻听。其中content屬性一定不能省略
image.png
image.png
5财著、小技巧：如何在瀏覽器查看某個元素的hover狀態(tài)下的樣式？
image.png
五撑碴、SEO撑教、line-boxes、vertical-align醉拓、移動端布局rem
1伟姐、h1元素和SEO有什么關(guān)系？
- h1元素有助于網(wǎng)站的SEO（Search Engine Optimization）優(yōu)化亿卤，可以促進關(guān)鍵詞排名
- 建議在網(wǎng)頁中最多只有1個h1元素
- 亂用h1元素不僅不會給網(wǎng)站帶來好的權(quán)重愤兵，同時也有可能被搜索引擎認為作弊，最后導致K站
2排吴、一個有文字內(nèi)容的div秆乳，為什么會有高度？
- 因為有
line-boxes的存在钻哩，并且line-boxes有一個特性屹堰，包含每行的inline level - line-boxes行盒一定會想辦法包裹住當前行中的所有內(nèi)容。
image.png
3憋槐、理解 line-boxes各種情況下的表現(xiàn)双藕？
image.png
image.png
4、那么一個行盒內(nèi)的元素阳仔，依靠什么進行對其呢忧陪？
- 默認 base-line 基線對其
image.png
image.png
5、rem是依靠什么計算具體值的近范？
html標簽上的font-size === 1rem
6嘶摊、移動端適配的推薦方式是什么？
- ① js代碼動態(tài)獲取屏幕寬度评矩，然后設(shè)置
html標簽上的font-size - ② 利用 postcss-pxtorem 第三方庫來對我們打包生成的rem適配
