CSS面試題
CSS3新增了那些特性？
-
CSS3實現圓角:border-radius
-
漸變：gradient
-
新增加很多CSS偽類選擇器
：not選擇器
：empty選擇器
：root選擇器
：target選擇器
：selection選擇器
以下的選擇器的說明介紹里有個詞叫“一組”。他的意思就是同一父元素下所有元素及文本節點，即為一組。
：nth-of-type(n)
：nth-last-of-type(n)
：first-of-type
：last-of-type
：only-of-type
：only-child
：nth-child()
：nth-last-child()
：enabled
: disabled
：checked
新增CSS3選擇器
: element1~element2選擇器
：[attribute*=value]選擇器
：[attribute^=value]選擇器
：[attribute$=value]選擇器 -
多背景及背景屬性
| 屬性 | 作用 |
|---|---|
| background-image | 添加背景圖片，可以放多張，用逗號隔開 |
| background-size | 控制背景圖的大小 |
| background-origin | 指定背景圖像的位置區域 |
| background-clip | 指定背景圖從什么位置開始繪制 |
-
rgba() 函數使用紅(R)、綠(G)、藍(B)、透明度(A)的疊加來生成各式各樣的顏色。
-
border-image屬性是速記屬性用於設置border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值。
-
媒體查詢可以檢測很多內容，其中包括：viewport（視窗）的寬度與高度、設備的寬度與高度、朝向（智能手機橫屏，豎屏）、分辨率。
-
多列布局
| 屬性 | 說明 |
|---|---|
| column-count | 指定需要分割的列數 |
| column-gap | 指定列與列直接的間隙 |
| column-rule-style | 指定列與列之間的邊框樣式 |
| column-rule-width | 指定了倆列的邊框厚度 |
| column-rule-color | 指定了倆列的邊框顏色 |
| column-rule | 是上方三個屬性的簡寫 |
| column-span | 一般用於文章頭，指定元素跨多少列 |
| column-width | 指定列的寬度 |
- Animation
- @keyframes規則
- Text-overflow
- @font-face
| 屬性 | 描述 |
|---|---|
| font-family | 設置文本的字體名稱 |
| font-style | 設置文本的樣式 |
| font-variant | 設置文本是否大小寫 |
| font-weight | 設置文本的粗細 |
| font-stretch | 設置文本是否橫向的拉伸變形 |
| font-size | 設置文本的大小 |
| src | 設置自定義字體的相對路徑或者絕對路徑。 |
-
Flex彈性盒
彈性盒布局功能主要具有以下幾點：屏幕和瀏覽器窗口大小發生變化時也可以靈活調整布局。
指定伸縮項目沿着主軸或側軸按比例分配空余空間從而調整伸縮項目的大小。
指定伸縮項目沿着主軸或側軸將伸縮容器額外空間分配到項目之前、之后或之間。
指定如何將垂直於元素布局軸的額外空間分布到該元素周圍。
控制元素在頁面上的布局方向。
按照不同標准流所指定的排序方式對屏幕上的元素重新排序。
彈性盒模型中的專業術語：
a. 主軸和側軸
b. 主/側軸方向
c. 主/側軸起點，主/側軸終點
d. 主側軸長度
e. 伸縮容器（外層）和伸縮項目（子元素或內容）
彈性盒的使用：
彈性容器通過設置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內包含了一個或多個彈性子元素。
效果參考圖
H5自適應方案
H5自適應方案大家在網速能找到很多，我個人推薦一種我非常喜歡的方式，就是rem. rem是一種相對單位，它基於html的font-size值來進行調整。
通常我們以750為基准，我們會在header中嵌套一段js腳本，獲取手機網頁分辨率尺寸除以375，為了方便計算，我們假設750像素下1rem = 100px；所以 我們除以375后需要乘以50.
BFC布局與普通文檔流布局區別:
BFC布局規則:
浮動的元素會被父級計算高度(父級元素觸發了BFC)
非浮動元素不會覆蓋浮動元素的位置(非浮動元素觸發了BFC)
margin不會傳遞給父級(父級觸發BFC)
屬於同一個BFC的兩個相鄰元素上下margin會重疊
普通文檔流布局:
浮動的元素是不會被父級計算高度
非浮動元素會覆蓋浮動元素的位置
margin會傳遞給父級元素
兩個相鄰元素上下的margin會重疊
水平居中
-
行內元素
首先看它的父元素是不是塊級元素，如果是，則直接給父元素設置text-align: center;<style> #father { width: 500px; height: 300px; background-color: skyblue; text-align: center; } </style> <div id="father"> <span id="son">我是行內元素</span> </div>如果不是，則先將其父元素設置為塊級元素，再給父元素設置 text-align: center;
<style> #father { display: block; width: 500px; height: 300px; background-color: skyblue; text-align: center; } </style> <span id="father"> <span id="son">我是行內元素</span> </span> -
塊級元素
方案一：(分寬度定不定兩種情況)
定寬度：需要誰居中，給其設置 margin: 0 auto;<style> #father { width: 500px; height: 300px; background-color: skyblue; } #son { width: 100px; height: 100px; background-color: green; margin: 0 auto; } </style> <div id="father"> <div id="son">我是塊級元素</div> </div>
不定寬度：默認子元素的寬度和父元素一樣，這時需要設置子元素為display: inline-block; 或 display: inline;即將其轉換成行內塊級/行內元素，給父元素設置 text-align: center;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
text-align: center;
}
#son {
background-color: green;
display: inline;
}
</style>
<div id="father">
<div id="son">我是塊級元素</div>
</div>
方案二：使用定位屬性
首先設置父元素為相對定位，再設置子元素為絕對定位，設置子元素的left:50%，即讓子元素的左上角水平居中；
定寬度：設置絕對子元素的 margin-left: -元素寬度的一半px; 或者設置transform: translateX(-50%);
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 50%;
margin-left: -50px;
}
</style>
<div id="father">
<div id="son">我是塊級元素</div>
</div>
不定寬度：利用css3新增屬性transform: translateX(-50%);
方案三：使用flexbox布局實現（寬度定不定都可以）
使用flexbox布局，只需要給待處理的塊狀元素的父元素添加屬性 display: flex; justify-content: center;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
display: flex;
justify-content: center;
}
#son {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<div id="father">
<div id="son">我是塊級元素</div>
</div>
垂直居中
-
單行的行內元素
只需要設置單行行內元素的“行高等於盒子的高”即可；<style> #father { width: 500px; height: 300px; background-color: skyblue; } #son { background-color: green; height: 300px; } </style> <div id="father"> <span id="son">我是單行的行內元素</span> </div> -
多行的行內元素
使用給父元素設置display:table-cell;和vertical-align: middle;屬即可；<style> #father { width: 500px; height: 300px; background-color: skyblue; display: table-cell; vertical-align:middle; } #son { background-color: green; } </style> <div id="father"> <span id="son">我是多行的行內元素我是多行的行內元素我是多行的行內元素我是多行的行內元素我是多行的行內元素我是多行的行內元素我是多行的行內元素我是多行的行內元素</span> </div>
水平垂直居中
-
已知高度和寬度的元素
方案一：設置父元素為相對定位，給子元素設置絕對定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;<style> #father { width: 500px; height: 300px; background-color: skyblue; position: relative; } #son { width: 100px; height: 100px; background-color: green; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } </style> <div id="father"> <div id="son">我是塊級元素</div> </div>
方案二：設置父元素為相對定位，給子元素設置絕對定位，left: 50%; top: 50%; margin-left: --元素寬度的一半px; margin-top: --元素高度的一半px;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
<div id="father">
<div id="son">我是塊級元素</div>
</div>
- 未知高度和寬度的元素
方案一：使用定位屬性
設置父元素為相對定位，給子元素設置絕對定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
background-color: green;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
<div id="father">
<div id="son">我是塊級元素</div>
</div>
方案二：使用flex布局實現
設置父元素為flex定位，justify-content: center; align-items: center;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
}
#son {
background-color: green;
}
</style>
<div id="father">
<div id="son">我是塊級元素</div>
</div>
清除浮動的幾種方式，各自的優缺點？
①給父元素單獨定義高度
優點：簡單快速、代碼少。
缺點：無法進行響應式布局。
②在標簽結尾處加空div標簽<div style="clear: both"></div>
優點：簡單快速、代碼少，兼容性較高。
缺點：增加空標簽，不利於頁面優化。
③父級定義overflow:hidden
優點：簡單快速、代碼少，兼容性較高。
缺點：超出部分被隱藏了，在布局的時候要注意。
④父級定義class="clearfix"，使用after偽類和zoom
.clearfix:after{content:"";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clearfix{zoom:1;}
優點：寫法固定，沒有多余結構，兼容性高。
缺點：代碼多。
用純CSS創建一個三角形的原理是什么
.box{
width:0px;
height:0px;
border: 50px solid transparent;
border-left:50px solid #ef4848;
}
三欄布局的方法有哪些分別描述一下
-
Flex 布局
<style> .container{ display:flex; justify-content: center; height: 200px; background: #eee; } .left { width: 200px; background-color: red; height: 100%; } .main { background-color: yellow; flex: 1; } .right { width: 200px; background-color: green; } </style> <div class="container"> <div class="left">1</div> <div class="main">2</div> <div class="right">3</div> </div> -
float布局
<style> .left { float: left; width: 100px; height: 200px; background-color: red; } .right { float: right; width: 100px; height: 200px; background-color: yellow; } .main { background-color: green; height: 200px; margin-left: 120px; margin-right: 120px; } .container { border: 1px solid black; } <div class="container"> <div class="left"></div> <div class="right"></div> <div class="main"></div> </div>
優勢：簡單
劣勢：中間部分最后加載，內容較多時影響體驗
- BFC規則
BFC(塊格式化上下文)規則規定：BFC不會和浮動元素重疊。所以如果將main元素設定為BFC元素即可：
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
overflow: hidden;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
-
聖杯布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>聖杯布局</title> <style type="text/css"> body { margin: 0; padding: 0; } header, footer { height: 100px; width: 100%; background-color: #bbbbbb; } .container { height: 300px; padding-left: 200px; padding-right: 300px; } .container div{ float: left; /* 聖杯布局 */ position:relative; } .left { width: 200px; height: 300px; background-color: #DC698A; margin-left: -100%; /* 聖杯布局 */ left:-200px; } .middle { width: 100%; height: 300px; background-color: #3EACDD; } .right { width: 300px; height: 300px; background-color: #8CB08B; margin-left: -300px; /* 聖杯布局 */ right:-300px; } </style> </head> <body> <header>頭部</header> <div class="container"> <div class="middle">中間欄</div> <div class="left">左欄</div> <div class="right">右欄</div> </div> <footer>底部</footer> </body> </html> -
雙飛翼布局
<!DOCTYPE html> <html lang="en"> <head> <style> .main { float: left; width: 100%; } .content { height: 200px; margin-left: 110px; margin-right: 220px; background-color: green; } .main::after { display: block; content: ''; font-size: 0; height: 0; clear: both; zoom: 1; } .left { float: left; height: 200px; width: 100px; margin-left: -100%; background-color: red; } .right { width: 200px; height: 200px; float: left; margin-left: -200px; background-color: blue; } </style> </head> <body> <div class="main"> <div class="content"></div> </div> <div class="left"></div> <div class="right"></div> </body> </html> -
絕對定位
<style type="text/css"> .container { } .middle { position: absolute; left: 200px; right: 200px; height: 300px; background-color: yellow; } .left { position: absolute; left: 0px; width: 200px; height: 300px; background-color: red; } .right { position: absolute; right: 0px; width: 200px; background-color: green; height: 300px; } </style> </head> <body> <div class="container"> <div class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</div> <div class="left"></div> <div class="right"></div> </div> </body>
css3實現0.5px的細線
<style>
.line {
position: relative;
}
.line:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
background-color: #000000;
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
}
</style>
<div class="line"></div>
盒模型
·標准盒模型 margin, border, padding, content
·IE盒模型 border, padding, content
·通過 box-sizing屬性改變元素的盒模型
CSS如何設置這兩種模型：
box-sizing:content-box;
box-sizing:border-box; /IE模型/
js如何設置獲取盒模型對應的寬和高
1、dom.style.width/height // 只能取到內聯樣式
2、dom.currentStyle.width/height // 取到渲染后的樣式（只有IE支持）
3、window.getComputedStyle(dom).width/height // 兼容firefox，chrome，兼容性更好
4、dom.getBoundingClientRect().width/height // 運行后的寬度。
CSS選擇器
·id選擇器（#myId）
·類選擇器（.myClassName）
·標簽選擇器（div, h1, p）
·后代選擇器（h1 p）
·相鄰后代選擇器（子）選擇器（ul > li）
·兄弟選擇器（li~a）
·相鄰兄弟選擇器（li+a）
·屬性選擇器（a[rel="external"]）
·偽類選擇器（a:hover, li:nth-child）
·偽元素選擇器（::before, ::after）
·通配符選擇器（*）
[詳細解釋]:(https://www.runoob.com/cssref/css-selectors.html)
::before 和 :after 中雙冒號和單冒號的區別？這2個偽元素的作用？
·在 CSS3 中 : 表示偽類， :: 表示偽元素
·想讓插入的內容出現在其他內容前，使用::befroe。否則，使用::after
CSS中哪些屬性可以繼承？
·每一個屬性在定義中都給出了這個屬性是否具有繼承性，一個具有繼承性的屬性會在沒有指定值的時候，會使用父元素的同屬性的值
來作為自己的值。
·一般具有繼承性的屬性有，字體相關的屬性，font-size和font-weight等。
·文本相關的屬性，color和text-align等。
·表格的一些布局屬性、列表屬性如list-style等。
·還有光標屬性cursor、元素可見性visibility。
·當一個屬性不是繼承屬性的時候，我們也可以通過將它的值設置為inherit來使它從父元素那獲取同名的屬性值來繼承。
瀏覽器兼容性有哪些？
① 瀏覽器默認的 margin 和 padding 不同
解決：加一個全局 *{ margin: 0; padding: 0; }來統一
② 谷歌中文界面下默認會將小於12px 的文本強制按照12px顯示
解決：使用-webkit-transform:scale(.75);收縮的是整個span盒子大小，這時候，必須將span准換成塊元素。
③ 超鏈接訪問過后hover樣式就不會出現了，被點擊訪問過的超鏈接樣式不再具有hover 和active 了
解決：改變css 屬性的排列順序L-V-H-A
CSS優化，提高性能的方法有哪些？
·加載性能：
① CSS 壓縮：將寫好的CSS 進行打包壓縮，可以減少很多的體積。
② CSS單一樣式：當需要下邊距和左邊距的時候，很多時候選擇：margin: top 0 bottom 0;
但margin-top: top;margin-bottom: bottom;執行的效率更高。
·選擇器性能：
① 關鍵選擇器。選擇器的最后面的部分為關鍵選擇器（即用來匹配目標元素的部分）。
src與href的區別？
1、href 是指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用於超鏈接。
2、src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。
stylus/sass/less區別
均具有“變量”、“混合”、“嵌套”、“繼承”、“顏色混合”五大基本特性
Scss和LESS語法較為嚴謹，LESS要求一定要使用大括號“{}”，Scss和Stylus可以通過縮進表示層次與嵌套關系
Scss無全局變量的概念，LESS和Stylus有類似於其它語言的作用域概念
Sass是基於Ruby語言的，而LESS和Stylus可以基於NodeJS NPM下載相應庫后進行編譯；