前端開發經典面試題及答案-CSS篇

端開發經典面試題及答案——CSS篇

一、CSS選擇器的優先級排序，怎么計算權值？

二、display：none和visibility：hidden的區別

三、CSS的引用方式有哪些？它們的區別？

四、CSS有哪些選擇符？可繼承的屬性有哪些？

CSS選擇符：

可繼承和不可繼承的屬性：

五、fixed和absolute的區別？

六、如何實現水平、垂直居中？

1、利用定位+margin:auto

2、利用定位+margin:負值

3、利用定位+transform

4、table布局

5、flex布局

6、gird布局

七、如何實現左側邊欄固定，其他內容自適應?

1、左側固定寬度，右側flex自適應 flex：1，占據剩余空間；

2、左側固定寬度，右側flex自適應 flex：1，占據剩余空間；

3、左側固定寬度左浮動，右側設margin-left等于左側寬度；

4、左側固定寬度、固定定位，右側寬度100%；

5、左側寬度固定、固定定位，右側左邊距等于左側寬度；

6、雙左浮動，右側計算屬性計算寬度；

7、左側左浮，右側右浮動，右側計算寬度；

8、左側固定寬度，display:inline-block，右側右浮動，計算寬度。

八、css3的新特性

1、CSS3新特性之選擇器

2、CSS3新特性之樣式

3、CSS3新特性之transition 過渡

4、CSS3新特性之transform 轉換

5、CSS3新特性之animation 動畫

6、CSS3新特性之漸變

九、了解過哪些頁面布局？

十、Sass寫一個數組？

十一、什么時候用less

1、函數式編程css

2、自定義變量用于整體主題調整

3、嵌套語法簡化開發復雜度

4、頁面層級結構多，重復使用的css代碼較多時

十二、animation和transition

十三、盒子模型概念

十四、px、em、rem、%、vm、vh

十五、display的值和作用

十六、列舉兩種清除浮動的方法

1、父元素添加overflow:hidden

??通過觸發BFC方式，實現清除浮動

??優點：代碼簡潔

??缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢出的元素。

2、使用after偽元素清除浮動

??優點：符合閉合浮動思想，結構語義化正確。

??缺點：ie6-7不支持偽元素：after，使用zoom:1觸發hasLayout。

以上就是霸哥今日整理的前端經典面試題及答案CSS篇，如有疑問，歡迎私信霸哥！

SS(Cascading Style Sheets) ，層疊樣式表（級聯樣式表），用于設置HTML頁面中的文本內容的字體、大小、對齊方式等，圖片的寬高、邊框樣式、邊距等以及頁面的布局排版等各種外觀顯示樣式。

CSS以HTML為基礎，可以針對不同的瀏覽器設置不同的樣式。CSS的出現可以說拯救了我們的頁面，讓HTML 專注去做結構呈現，而樣式全部交給 CSS來美化。

CSS樣式規則，具體格式如下：

CSS語法由兩部分組成：選擇器和聲明。聲明包括：屬性和屬性值
選擇符 {屬性: 屬性值 ; 屬性:屬性值}

規則：

每個CSS樣式由兩部分組成，即選擇器和聲明。選擇器用于指定CSS樣式作用的HTML對象，聲明又分為屬性和屬性值；
屬性是對選擇器選定的對象設置的樣式屬性，例如字體大小、文本顏色等。必須放在花括號中，屬性與屬性值用英文冒號連接，以“鍵值對”的形式出現。
每條聲明用英文分號結束。當一個屬性有多個屬性值的時候，屬性值與屬性值不分先后順序。在書寫樣式過程中，空格、換行等操作不影響屬性顯示。

注釋規則

注釋規則
/* 需要注釋的內容 */
示例
p { color: red; /* 所有段落標簽字體顏色是紅色*/ }

三、CSS樣式表引入方法

CSS放到什么位置呢？怎么讓它跟我們的HTML文件關聯起來呢？

內聯樣式（行內式）

內聯樣式，又稱行內樣式、行間樣式、內嵌樣式。是通過標簽的style屬性來設置元素的樣式。

語法

<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名>

<h2 style="color:red;">
    紅色標題
</h2>

說明
（1）style是標簽的屬性，任何HTML標簽都有style屬性，用來設置行內樣式。
（2）屬性和值的書寫規范與CSS樣式規則相同。
注意
行內樣式只對其所在的標簽及嵌套在其中的子標簽起作用。

內部樣式表

內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標簽中，并且用style標簽定義

語法
<head> <style type="text/CSS"> 選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;} p{ color:#000;font-size:14px;} </style> </head>
說明
（1）style標簽一般位于head標簽中title標簽之后，也可以把他放在HTML文檔的任何地方。
（2）type=“text/CSS” 在html5中可以省略，寫上也比較符合規范，所以這個地方可以寫也可以省略。

外部樣式表（外鏈式）

當我們頁面比較復雜，大量的內部樣式，會導致頁面看上去不美觀，而且不利于維護。這時我們通常將所有的樣式放在一個或多個以 .CSS 為擴展名的外部樣式表文件中，通過link標簽將外部樣式表文件鏈接到HTML文檔中。

格式
<head> <link rel="stylesheet" type="text/CSS" href="CSS文件的路徑" /> </head>
說明
（1）rel：用于定義文檔關聯（當前文檔與被鏈接文檔之間的關系），在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件，表示關聯樣式表。
（2）type：用于定義文檔類型，通常指定為“text/css”，表示鏈接的外部文件為CSS樣式表。
（3）href：用于定義所鏈接外部樣式表文件的URL，通常是相對路徑。
注意
link 是單標簽哦 _！
使用link元素導入外部樣式表時，需將該元素寫在文檔頭部，即與之間。

三種樣式表總結

樣式表	特點	使用	控制范圍	優先級
行內樣式表	書寫方便，權重高	較少	控制單個標簽（小）	高
內部樣式表	結構和樣式部分分離	較多	控制一個頁面（中）	與書寫的順序有關，后書寫的高
外部樣式表	結構和樣式完全分離，需要引入	最多，推薦使用	控制整個網站（多）	與書寫的順序有關，后書寫的高

四、標簽的類型(顯示模式)

網頁中的標簽很多，為了更好的完成我們的網頁布局，我們需要在不同地方會放不同類型的標簽。

根據標簽在網頁中的顯示模式，可以將HTML標簽一般分為塊級標簽和行內標簽兩種類型，即塊元素和行內元素。

塊級元素(block-level)

說明
每個塊元素通常都會獨自占據一行或多行，可以設置其寬度、高度、對齊方式等屬性，常用于網頁布局和網頁結構的搭建。
舉例
常見的塊元素有：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標簽是最典型的塊元素，非常適合布局，所以我們常稱之為 “CSS+DIV布局”。
特點

塊元素總是從新行開始，寬度是容器的100%。
塊狀元素都可以定義自己的寬度、高度、外邊距以及內邊距。
兩個相鄰塊元素不會出現并列顯示的現象；默認，塊元素會按自上而下順序排列。
塊級元素一般可以容納內聯元素和其他塊元素，故將其比喻為一個盒子。

注意
文字類塊級標簽，里面不能放其他塊級元素。比如，只有文字才能組成段落因此 p 里面不能放塊級元素，同理還有這些標簽h1,h2,h3,h4,h5,h6,dt。

行內元素(inline-level 或內聯元素)

說明
行內元素（內聯元素）不占獨立的區域，僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度、高度、對齊等屬性，常用于控制頁面中文本的樣式。
舉例
常見的行內元素有<a>、<b>、<span>、<strong>、<em>、<i>、<del>、<s>、<ins>、<u>等，其中<span>標簽最典型的行內元素。
特點

和相鄰行內元素在一行上顯示
設置寬、高無效，可設置水平方向的padding和margin，但垂直方向的無效。
默認寬度就是它本身內容的寬度。
行內元素只能容納文本或其他行內元素。（a除外）

注意

鏈接里面不能再放鏈接！

行內塊元素（inline-block）

說明
在行內元素中有幾個特殊的標簽，比如<img />、<input />、<td>，可以設置它們的寬、高和對齊方式，故稱之為行內塊元素。
特點
可同相鄰行內元素（行內塊）顯示在一行上，但之間會有空白縫隙
默認寬度就是它本身內容的寬度
可設置高度，行高、外邊距以及內邊距

元素顯示模式轉變（display）

通過設置display的值，改變元素的顯示模式。

屬性值
block、inline、inline-block、none
說明

行內轉塊：display:block;
將元素轉為塊狀元素，使該元素擁有塊狀元素的特點；
顯示：
類似在元素后面添加換行符，也就是說其他元素不能在其后面并列顯示。
塊轉行內：display:inline;
將元素轉換為內聯元素，使該元素擁有行內元素的特點；
顯示：
在元素后面刪除換行符，多個元素可以在一行內并列顯示。
塊、行內元素轉換為行內塊： display: inline-block;
只有這一個元素類型支持vertical-align屬性，img,input（行內塊元素）。
顯示：
元素的內容以塊狀顯示，行內的其他元素顯示在同一行。
none 此元素不會被顯示

CSS 是一種基于 CSS 的預編譯器，使用于增強 CSS 的可重用性、可維護性和可讀性。它是現代 web 開發中使用最廣泛的預編譯器之一。

SCSS 的優勢

* 可重用性：SCSS 提供了變量、混合物和函數等功能，以提高 CSS 代碼的可重用性。

* 可維護性：嵌套選擇器和命名類名等功能可以簡化代碼結構，提高可維護性。

* 可讀性：SCSS 的語法類似于 CSS，但更易于閱讀和理解。

* 增強功能：SCSS 提供了許多增強功能，例如自動前綴和變量。

SCSS 的核心概念

1. 變量

* 允許在 CSS 代碼中定義可重用的值。

* 可以使用變量來存儲顏色、尺寸和任何其他值。

2. 混合物

* 允許組合多個選擇器以創建新的選擇器。

* 可以使用混合物來簡化和組織 CSS 代碼。

3. 嵌套選擇器

* 允許將選擇器嵌套在彼此內。

* 可以使用嵌套選擇器來組織代碼并提高可讀性。

4 vicisslet

* 允許在 CSS 代碼中定義函數。

* 可以使用變量和混合物來定義函數。

工具和集成

* Sass 編譯器：用于將 SCSS 代碼轉換為 CSS。

* 各種集成：有許多工具可用于將 SCSS 與其他工具集成。例如，Sass 可以與 gulp 或 grunt 集成。

使用 SCSS 的優點

* 提高 CSS 代碼的可重用性。

* 提高 CSS 代碼的可維護性。

* 提高 CSS 代碼的可讀性。

* 增強 CSS 功能。

結論

SCSS 是一種強大的 CSS 預編譯器，可以提高 CSS 代碼的可重用性、可維護性和可讀性。它是現代 web 開發中使用最廣泛的預編譯器之一。

在線咨詢

上一篇：SpringBoot應用不能訪問項目靜態頁面html問題處理
下一篇：HTML打開神器，讓你秒懂！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商