CSS常见面试题(持续更新)
文章目錄
- div高度永遠是寬度的一半
- 大小為父元素寬度一半的正方形
- 實現單行文字、多行文字的垂直居中
- 1.利用line-height和vertical-align
- 2.利用display:table-cell
- 3.利用flex布局align-items:center;
- CSS常見布局的幾種實現方式
- Flex(彈性布局)實現五大常用布局
- html標簽分類
- 閉合標簽和空標簽（閉合標簽和空標簽）
- 位置特性（塊級元素，行內元素，行級塊元素）
- 塊級元素（block）
- 行級元素(inline)
- 行內塊元素（inline-block）
- 元素之間的轉化
- 浮動以及清除浮動
- 屬性繼承性
- 一、無繼承性的屬性
- 1、display：規定元素應該生成的框的類型
- 2、文本屬性：
- 3、盒子模型的屬性
- 4、背景屬性
- 5、定位屬性
- 6、生成內容屬性
- 7、輪廓樣式屬性：
- 8、頁面樣式屬性
- 9、聲音樣式屬性
- 二、有繼承性的屬性
- 1、字體系列屬性
- 2、文本系列屬性
- 3、元素可見性：visibility
- 4、表格布局屬性
- 5、列表布局屬性
- 6、生成內容屬性：quotes
- 7、光標屬性：cursor
- 8、頁面樣式屬性
- 9、聲音樣式屬性
- 三、所有元素可以繼承的屬性
- 四、內聯元素可以繼承的屬性
- 五、塊級元素可以繼承的屬性
- CSS盒子模型
- W3C盒子模型（標準盒子模型）
- IE盒子模型（怪異盒模型）
- 盒模型相互轉換(box-sizing)
- CSS中 a標簽的4個偽類
- CSS實現單行文本、多行文本溢出顯示省略號（…）
- 單行
- 多行
- CSS選擇器
- 權重計算規則
- 選擇器
- 優先級
- display:none和visibility:hidden兩者的區別
- 渲染機制
div高度永遠是寬度的一半
<h1>高度永遠為寬度一半</h1> <div class="height-half-width-wrap"><div class="outer"><div class="inner"><div class="box">hello</div></div></div> </div> .height-half-width-wrap .outer {width: 400px;height: 100%;background: blue;margin: 0 auto;display: flex;align-items: center; }.height-half-width-wrap .inner {position: relative;width: 100%;height: 0;padding-bottom: 50%;background: red; }.height-half-width-wrap .box {position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center; }- margin-top、margin-bottom、padding-top、padding-bottom的百分數值是相對于父元素內容區的寬度計算的。
- 將height設置為 0，這是為了將元素高度完全交給padding負責。
- 元素的height為 0，導致該元素里面再有子元素的時候，就無法正常設置高度。所以我們需要用到position: absolute。
- 據W3C文檔，當子元素使用absolute定位時，寬高設定百分比的參考量是其第一個非static祖先元素的padding box寬高，即width/height + padding
大小為父元素寬度一半的正方形
<div class="half-square-wrap"><div class="outer"><div class="inner"></div></div> </div> .half-square-wrap .outer {width: 400px;height: 600px;background: red; }.half-square-wrap .inner {width: 50%;padding-bottom: 50%;background: blue; }- padding-bottom的百分數值是相對于父元素內容區的寬度計算的
實現單行文字、多行文字的垂直居中
1.利用line-height和vertical-align
<div class="word-vertically-center1"><div><span>測試文字測試文字</span></div><div><span>測試文字 <br /> 測試文字<br /> 測試文字<br /> 測試文字<br /> 測試文字<br /> 測試文字</span></div> </div> .word-vertically-center1 div {float: left;width: 200px;height: 200px;margin: 10px;border: 1px solid #000;line-height: 200px; }.word-vertically-center1 span {display: inline-block;vertical-align: middle;line-height: 22px; }2.利用display:table-cell
<div class="word-vertically-center2"><div><span>測試文字測試文字</span></div><div><span>測試文字 <br /> 測試文字<br /> 測試文字<br /> 測試文字<br /> 測試文字<br /> 測試文字</span></div> </div> .word-vertically-center2 div {display: table-cell;width: 200px;height:150px;border:1px solid blue;vertical-align: middle; }3.利用flex布局align-items:center;
<div class="word-vertically-center3"><div><span>測試文字測試文字</span></div><div><span>測試文字 <br /> 測試文字<br /> 測試文字<br /> 測試文字<br /> 測試文字<br /> 測試文字</span></div> </div> .word-vertically-center3 div{float: left;width: 200px;height:150px;border: 1px solid #000;display: flex;align-items:center; }CSS常見布局的幾種實現方式
- 兩欄布局(左邊固定右邊自適應)
- 三欄布局(左右固定中間自適應)
- 流體布局（浮動）
- BFC三欄布局
- 雙飛翼布局
- 圣杯布局
- flex
- table布局
- 絕對定位布局
- 網格布局(Grid布局)
具體文章見：https://blog.csdn.net/qq_39903567/article/details/114751532
Flex(彈性布局)實現五大常用布局
上中下布局、左側定寬右側自適應、頂部欄固定、左側固定可滾動等
具體文章見：https://blog.csdn.net/qq_39903567/article/details/114754898
html標簽分類
閉合標簽和空標簽（閉合標簽和空標簽）
HTML中的標簽從閉合的角度可以分為閉合標簽和空標簽。而HTML中大部分標簽都是閉合標簽，其他少數為空標簽，常見的空標簽有
<input />、 <img />、 <area />、 <base />、 <link />等。
位置特性（塊級元素，行內元素，行級塊元素）
位置特性進行分類的，它將元素分為三類：塊級元素，行內元素，行級塊元素（也稱塊級行元素）。
塊級元素（block）
**特點： **
- 可以設置寬高、內、外邊距；
- 獨占一行（即前后均有換行）；
- 塊級元素如果不設置寬度和高度，則寬度默認為父級元素的寬度。高度則根據內容大小自動填充。
常見的塊級元素：
div、p、h1、h2…hn，ol、ul、dl、li、form、table
行級元素(inline)
特點：
- 不可設置寬高、上下內、外邊距。（左右內、外邊距設置有效）
- 其寬度和高度由其內容自動填充。
- 其他行級元素共處一行 ；
常見的行級元素：
- a(錨點)
- b(加粗)
- i(斜體)
- span(常用內聯容器，定義文本內區塊)
- lable(input 元素定義標注（標記）)
行內塊元素（inline-block）
特點：
- 可以設置寬高、內外邊距；
- 可以與其他行內元素、內聯元素共處一行；
常見的內聯元素：
input、img
元素之間的轉化
可以在行內樣式或css樣式中改變元素的display將三種元素進行轉換。
- display:block；(將元素變為塊級元素)
- display:inline； (將元素變為行級元素)
- display：inline-block；（將元素變為行級塊元素）
浮動以及清除浮動
浮動特征，清除浮動的方法：clear清除浮動、BFC清除浮動等。
具體文章見：https://blog.csdn.net/qq_39903567/article/details/114946607
屬性繼承性
一、無繼承性的屬性
1、display：規定元素應該生成的框的類型
2、文本屬性：
vertical-align：垂直文本對齊
text-decoration：規定添加到文本的裝飾
text-shadow：文本陰影效果
white-space：空白符的處理
unicode-bidi：設置文本的方向
3、盒子模型的屬性
：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
4、背景屬性
：background、background-color、background-image、background-repeat、background-position、background-attachment
5、定位屬性
：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6、生成內容屬性
：content、counter-reset、counter-increment
7、輪廓樣式屬性：
outline-style、outline-width、outline-color、outline
8、頁面樣式屬性
：size、page-break-before、page-break-after
9、聲音樣式屬性
：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
二、有繼承性的屬性
1、字體系列屬性
font：組合字體
font-family：規定元素的字體系列
font-weight：設置字體的粗細
font-size：設置字體的尺寸
font-style：定義字體的風格
font-variant：設置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。
font-stretch：對當前的 font-family 進行伸縮變形。所有主流瀏覽器都不支持。
font-size-adjust：為某個元素規定一個 aspect 值，這樣就可以保持首選字體的 x-height。
2、文本系列屬性
text-indent：文本縮進
text-align：文本水平對齊
line-height：行高
word-spacing：增加或減少單詞間的空白（即字間隔）
letter-spacing：增加或減少字符間的空白（字符間距）
text-transform：控制文本大小寫
direction：規定文本的書寫方向
color：文本顏色
3、元素可見性：visibility
4、表格布局屬性
：caption-side、border-collapse、border-spacing、empty-cells、table-layout
5、列表布局屬性
：list-style-type、list-style-image、list-style-position、list-style
6、生成內容屬性：quotes
7、光標屬性：cursor
8、頁面樣式屬性
：page、page-break-inside、windows、orphans
9、聲音樣式屬性
：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
三、所有元素可以繼承的屬性
1、元素可見性：visibility
2、光標屬性：cursor
四、內聯元素可以繼承的屬性
1、字體系列屬性
2、除text-indent、text-align之外的文本系列屬性
五、塊級元素可以繼承的屬性
1、text-indent、text-align
CSS盒子模型
W3C盒子模型（標準盒子模型）
在標準盒子模型的情況下，元素的內容占據的空間是由width屬性設置的，而內容周圍的padding和border值是另外計算的，即在標準模式下的盒模型，盒子實際內容（content）的width/height=我們設置的width/height;盒子總寬度/高度=width/height+padding+border+margin。
標準模式下總寬度=width+margin（左右）+padding（左右）border（左右）
IE盒子模型（怪異盒模型）
在怪異盒模型的情況下，瀏覽器的width屬性不是內容的寬度，而是內容，內邊距和邊框的寬度的總和，即使在怪異模式下的盒模型，盒子的（content）寬度+內邊距padding+邊框border 寬度= 我們設置的width（height也是如此）。盒子總寬度/高度=width/height +margin = 內容區寬度/高度+padding+border+margin.
怪異模式下總寬度=width+margin（左右）（就是說width已經包含了padding和border值）
盒模型相互轉換(box-sizing)
在css3中新增了box-sizing屬性
box-sizing : content-box || border-box || inherit;
當為content-box時，將采取標準模式進行解析計算
當為border-box時，將采取怪異模式解析計算
CSS中 a標簽的4個偽類
有時候在瀏覽一些網站時會發現，當你把鼠標放在鏈接上時，它的顏色就會變，這就是用了css控制了它的四種狀態，
大家都知道a標簽可以用來實現超鏈接，
- 第一種狀態： link （默認）正常狀態（初始狀態，不用鼠標去觸碰）
- 第二種狀態： hover 鼠標放上去的時候（但不點擊）
- 第三種狀態： active 點擊的時候（鼠標還沒放開）
- 第四種狀態： visited 點擊之后（）
使用時注意：
- active 一般不必寫
- 四種狀態控制一定要按照 LVHA 的順序寫
- link 可以省略
CSS實現單行文本、多行文本溢出顯示省略號（…）
<div class="word-long"><div class="one-line"><span>測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字</span></div><div class="lines"><span>測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字1 <br /></span></div> </div>單行
如果實現單行文本的溢出顯示省略號用text-overflow:ellipsis屬性來，當然還需要加寬度width屬來兼容部分瀏覽。
實現方法：
overflow: hidden; text-overflow:ellipsis; white-space: nowrap;多行
實現方法：
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;-webkit-line-clamp CSS 屬性 可以把 塊容器 中的內容限制為指定的行數.
CSS選擇器
1、ID #id
2、class .class
3、標簽 p
4、通用 *
5、屬性 [type=“text”]
6、偽類 ：hover
7、偽元素 ::first-line
8、子選擇器、相鄰選擇器
權重計算規則
特等： ！important
第一等：代表內聯樣式，如: style=””，權值為1000。
第二等：代表ID選擇器，如：#content，權值為0100。
第三等：代表類，偽類和屬性選擇器，如.content，權值為0010。
第四等：代表類型選擇器和偽元素選擇器，如div p，權值為0001。
通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值為0000。
- .father>son (直接后代)
- .brother1+brother2(緊跟后面的兄弟)
選擇器
- * 選擇所有元素
- p 選擇所有 <p> 元素。
- div,p 選擇所有 <div> 元素和所有 <p> 元素。
- div p 選擇 <div> 元素內部的所有 <p> 元素。
- div>p 選擇父元素為 <div> 元素的所有 <p> 元素。
- div+p 選擇緊接在 <div> 元素之后的所有 <p> 元素。
優先級
-
常用選擇器權重優先級：!important > id > class > tag
-
!important可以提升樣式優先級，但不建議使用。如果!important被用于一個簡寫的樣式屬性，那么這條簡寫的樣式屬性所代表的子屬性都會被應用上!important。 例如：background: blue !important;
-
如果兩條樣式都使用!important，則權重值高的優先級更高
-
在css樣式表中，同一個CSS樣式你寫了兩次，后面的會覆蓋前面的
-
樣式指向同一元素，權重規則生效，權重大的被應用
-
樣式指向同一元素，權重規則生效，權重相同時，就近原則生效(就近指的是標簽之間)，后面定義的被應用
-
樣式不指向同一元素時，權重規則失效，就近原則生效，離目標元素最近的樣式被應用
-
!important > 行內樣式 > 內聯樣式 and 外聯樣式(內聯樣式和外聯樣式的優先級和加載順序有關)
display:none和visibility:hidden兩者的區別
display:none是徹底消失，不在文檔流中占位，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了，可以理解為透明度為0的效果，在文檔流中占位，瀏覽器會解析該元素；
使用visibility:hidden比display:none性能上要好，display:none切換顯示時visibility，頁面產生回流（當頁面中的一部分元素需要改變規模尺寸、布局、顯示隱藏等，頁面重新構建，此時就是回流。所有頁面第一次加載時需要產生一次回流），而visibility切換是否顯示時則不會引起回流。
其他隱藏操作：
background: transparent;//設置為透明css3中
opacity:0;//設置不透明度為0，透明渲染機制
1、HTML的加載
HTML是一個網頁的基礎，下載完成后解析
2、其他靜態資源加載
解析HTML時，發現其中有其他外部資源鏈接比如CSS、JS、圖片等，會立即啟用別的線程下載。
但當外部資源是JS時，HTML的解析會停下來，等JS下載完執行結束后才繼續解析HTML，防止JS修改已經完成的解析結果
3、DOM樹構建
在HTML解析的同時，解析器會把解析完成的結果轉換成DOM對象，再進一步構建DOM樹
4、CSSOM樹構建
CSS下載完之后對CSS進行解析，解析成CSS對象，然后把CSS對象組裝起來，構建CSSOM樹
5、渲染樹構建
當DOM樹和CSSOM樹都構建完之后，瀏覽器根據這兩個樹構建一棵渲染樹
6、布局計算
渲染樹構建完成以后，瀏覽器計算所有元素大小和絕對位置
7、渲染
布局計算完成后，瀏覽器在頁面渲染元素。經過渲染引擎處理后，整個頁面就顯示出來
構建DOM樹->構建渲染樹->布局渲染樹：計算盒模型位置和大小->繪制渲染樹
后續將持續更新…
本文鏈接：https://blog.csdn.net/qq_39903567/article/details/114951168
總結
以上是生活随笔為你收集整理的CSS常见面试题(持续更新)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： UGMT buildingEXODUS
- 下一篇： CSS面试题汇总（三）