整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
端開發(fā)經(jīng)典面試題及答案——CSS篇
一、CSS選擇器的優(yōu)先級排序，怎么計(jì)算權(quán)值？
二、display：none和visibility：hidden的區(qū)別
三、CSS的引用方式有哪些？它們的區(qū)別？
四、CSS有哪些選擇符？可繼承的屬性有哪些？
CSS選擇符：
可繼承和不可繼承的屬性：
五、fixed和absolute的區(qū)別？
六、如何實(shí)現(xiàn)水平、垂直居中？
1、利用定位+margin:auto
2、利用定位+margin:負(fù)值
3、利用定位+transform
4、table布局
5、flex布局
6、gird布局
七、如何實(shí)現(xiàn)左側(cè)邊欄固定，其他內(nèi)容自適應(yīng)?
1、左側(cè)固定寬度，右側(cè)flex自適應(yīng) flex：1，占據(jù)剩余空間；
2、左側(cè)固定寬度，右側(cè)flex自適應(yīng) flex：1， 占據(jù)剩余空間；
3、左側(cè)固定寬度左浮動，右側(cè)設(shè)margin-left等于左側(cè)寬度；
4、左側(cè)固定寬度、固定定位，右側(cè)寬度100%；
5、左側(cè)寬度固定、固定定位，右側(cè)左邊距等于左側(cè)寬度；
6、雙左浮動，右側(cè)計(jì)算屬性計(jì)算寬度；
7、左側(cè)左浮，右側(cè)右浮動，右側(cè)計(jì)算寬度；
8、左側(cè)固定寬度，display:inline-block，右側(cè)右浮動，計(jì)算寬度。
八、css3的新特性
1、CSS3新特性之選擇器
2、CSS3新特性之樣式
3、CSS3新特性之transition 過渡
4、CSS3新特性之transform 轉(zhuǎn)換
5、CSS3新特性之a(chǎn)nimation 動畫
6、CSS3新特性之漸變
九、了解過哪些頁面布局？
十、Sass寫一個數(shù)組？
十一、什么時候用less
1、函數(shù)式編程css
2、自定義變量用于整體主題調(diào)整
3、嵌套語法簡化開發(fā)復(fù)雜度
4、頁面層級結(jié)構(gòu)多，重復(fù)使用的css代碼較多時
十二、animation和transition
十三、盒子模型概念
十四、px、em、rem、%、vm、vh
十五、display的值和作用
十六、列舉兩種清除浮動的方法
1、父元素添加overflow:hidden
??通過觸發(fā)BFC方式，實(shí)現(xiàn)清除浮動
??優(yōu)點(diǎn)：代碼簡潔
??缺點(diǎn)：內(nèi)容增多的時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示要溢出的元素。
2、使用after偽元素清除浮動
??優(yōu)點(diǎn)：符合閉合浮動思想，結(jié)構(gòu)語義化正確。
??缺點(diǎn)：ie6-7不支持偽元素：after，使用zoom:1觸發(fā)hasLayout。
以上就是霸哥今日整理的前端經(jīng)典面試題及答案CSS篇，如有疑問，歡迎私信霸哥！
SS(Cascading Style Sheets) ，層疊樣式表（級聯(lián)樣式表），用于設(shè)置HTML頁面中的文本內(nèi)容的字體、大小、對齊方式等，圖片的寬高、邊框樣式、邊距等以及頁面的布局排版等各種外觀顯示樣式。
CSS以HTML為基礎(chǔ)，可以針對不同的瀏覽器設(shè)置不同的樣式。CSS的出現(xiàn)可以說拯救了我們的頁面，讓HTML 專注去做結(jié)構(gòu)呈現(xiàn)， 而樣式全部交給 CSS來美化。
CSS樣式規(guī)則，具體格式如下：
CSS語法由兩部分組成：選擇器和聲明。 聲明包括：屬性和屬性值
選擇符 {屬性: 屬性值 ; 屬性:屬性值}
規(guī)則：
CSS放到什么位置呢？ 怎么讓它跟我們的HTML文件關(guān)聯(lián)起來呢？
內(nèi)聯(lián)樣式，又稱行內(nèi)樣式、行間樣式、內(nèi)嵌樣式。是通過標(biāo)簽的style屬性來設(shè)置元素的樣式。
<標(biāo)簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內(nèi)容 </標(biāo)簽名>
<h2 style="color:red;">
紅色標(biāo)題
</h2>
內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的head頭部標(biāo)簽中，并且用style標(biāo)簽定義
當(dāng)我們頁面比較復(fù)雜，大量的內(nèi)部樣式，會導(dǎo)致頁面看上去不美觀，而且不利于維護(hù)。這時我們通常將所有的樣式放在一個或多個以 .CSS 為擴(kuò)展名的外部樣式表文件中，通過link標(biāo)簽將外部樣式表文件鏈接到HTML文檔中。
樣式表 | 特點(diǎn) | 使用 | 控制范圍 | 優(yōu)先級 |
行內(nèi)樣式表 | 書寫方便，權(quán)重高 | 較少 | 控制單個標(biāo)簽（小） | 高 |
內(nèi)部樣式表 | 結(jié)構(gòu)和樣式部分分離 | 較多 | 控制一個頁面（中） | 與書寫的順序有關(guān)，后書寫的高 |
外部樣式表 | 結(jié)構(gòu)和樣式完全分離，需要引入 | 最多，推薦使用 | 控制整個網(wǎng)站（多） | 與書寫的順序有關(guān)，后書寫的高 |
網(wǎng)頁中的標(biāo)簽很多，為了更好的完成我們的網(wǎng)頁布局，我們需要在不同地方會放不同類型的標(biāo)簽。
根據(jù)標(biāo)簽在網(wǎng)頁中的顯示模式，可以將HTML標(biāo)簽一般分為塊級標(biāo)簽和行內(nèi)標(biāo)簽兩種類型，即塊元素和行內(nèi)元素。
鏈接里面不能再放鏈接！
通過設(shè)置display的值，改變元素的顯示模式。
CSS 是一種基于 CSS 的預(yù)編譯器，使用于增強(qiáng) CSS 的可重用性、可維護(hù)性和可讀性。它是現(xiàn)代 web 開發(fā)中使用最廣泛的預(yù)編譯器之一。
SCSS 的優(yōu)勢
* 可重用性：SCSS 提供了變量、混合物和函數(shù)等功能，以提高 CSS 代碼的可重用性。
* 可維護(hù)性：嵌套選擇器和命名類名等功能可以簡化代碼結(jié)構(gòu)，提高可維護(hù)性。
* 可讀性：SCSS 的語法類似于 CSS，但更易于閱讀和理解。
* 增強(qiáng)功能：SCSS 提供了許多增強(qiáng)功能，例如自動前綴和變量。
SCSS 的核心概念
1. 變量
* 允許在 CSS 代碼中定義可重用的值。
* 可以使用變量來存儲顏色、尺寸和任何其他值。
2. 混合物
* 允許組合多個選擇器以創(chuàng)建新的選擇器。
* 可以使用混合物來簡化和組織 CSS 代碼。
3. 嵌套選擇器
* 允許將選擇器嵌套在彼此內(nèi)。
* 可以使用嵌套選擇器來組織代碼并提高可讀性。
4 vicisslet
* 允許在 CSS 代碼中定義函數(shù)。
* 可以使用變量和混合物來定義函數(shù)。
工具和集成
* Sass 編譯器：用于將 SCSS 代碼轉(zhuǎn)換為 CSS。
* 各種集成：有許多工具可用于將 SCSS 與其他工具集成。例如，Sass 可以與 gulp 或 grunt 集成。
使用 SCSS 的優(yōu)點(diǎn)
* 提高 CSS 代碼的可重用性。
* 提高 CSS 代碼的可維護(hù)性。
* 提高 CSS 代碼的可讀性。
* 增強(qiáng) CSS 功能。
結(jié)論
SCSS 是一種強(qiáng)大的 CSS 預(yù)編譯器，可以提高 CSS 代碼的可重用性、可維護(hù)性和可讀性。它是現(xiàn)代 web 開發(fā)中使用最廣泛的預(yù)編譯器之一。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
