CSS常見面試題

#CSS引入
一、行內式，二、內部樣式表，三、外部樣式表

link @import
a. link屬於HTML標籤，而@import是CSS提供的，只能載入CSS

b. 頁面被載入時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載

c. import只在IE5以上才能識別，而link是HTML標籤，無相容問題

d. link方式的樣式的權重高於@import的權重

e. 當使用Javascript 控制DOM 去改變樣式的時候，只能使用link 方式，因為@import 眼裡只有CSS ，不是DOM 可以控制

CSS基礎選擇器：
1.標籤選擇器element
2.類別選擇器（多類別名稱選擇器）.
3.id選擇器四
#4.通配符選擇器*

專題推薦：2020年CSS面試題總結（最新）

CSS複合選擇器：
後代選擇器 E>F
子元素選擇器
交集選擇器
並集選擇器,
連結偽類選擇器lvha
單冒號( :)用於CSS3偽類，雙冒號(::)用於CSS3偽元素

<ul> 
<p>111</p> 
<span>222</span> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul>

li:nth-of-type(2):表示ul下的第二個li元素
li :nth-child(2)：表示既是li元素又是在ul下的第二個元素（找不到）。
建議一般使用nth-of-type，不容易出問題。
css三大特性：CSS層疊性、CSS繼承性、CSS優先權
談談你對CSS佈局的理解

盒模型

#清楚浮動的方式：
一、額外標籤法，

<p style="clear:both"></p>

二、父級新增overflow屬性方法
三、使用after偽元素清除浮動

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {*zoom: 1;}   /* IE6、7 专有 */。

四、使用雙偽元素清除浮動

定位模式與邊偏移：

元素的顯示與隱藏：
display:none;
overflow:hidden

滑鼠樣式cursor
default小白 默認，pointer小手，move移動，text文本，not-allowed禁止
vertical-align 垂直對齊

溢出的文字省略號顯示
1.white-space:nowrap強製文本在一行上顯示
2.overflow: hidden超出部分隱藏
3.text-overflow：ellipsis當物件內文字溢出時顯示省略標記

常見的佈局方式：
固定佈局、
串流式（%）佈局、
彈性（flex）佈局、
rem佈局
浮動佈局、清除浮動
定位佈局、
margin和padding

區塊級元素垂直置中
如何讓一個p 上下左右居中
1.
left:50%;   top:50%
transform: translate(-50%,-50%)
2 .
left:0;  top: 0;  bottom: 0;  right: 0;  margin: auto
3.px
CSS三大特性：層疊繼承優先權
可繼承的屬性
文字相關：font-family，font-size， font-style，font-variant，font-weight， font，letter-spacing，line-height，color

清單相關：list-style-image， list-style-position，list-style-type， list-style

CSS3新特性
實現圓角（border-radius），陰影（box-shadow），對文字加特效（text- shadow），線性漸變（gradient），變形（transform）

增加了更多的CSS選擇器多背景rgba，在CSS3中唯一引入的偽元素是::selection，媒體查詢，多欄佈局

CSS引入
一、行內式，二、內部樣式表，三、外部樣式表

link @import
a. link屬於HTML標籤，而@import是CSS提供的，只能載入CSS

b. 頁面被載入時，link會同時被加載，而@import引用的CSS會等到頁面被載入完再載入

c. import只在IE5以上才能識別，而link是HTML標籤，無相容問題

d. link方式的樣式的權重高於@import的權重

e. 當使用Javascript 控制DOM 去改變樣式的時候，只能使用link 方式，因為@import 眼裡只有CSS ，不是DOM 可以控制

CSS基礎選擇器：
1.標籤選擇器element
2.類別選擇器（多類別名稱選擇器）.
3.id選擇器四
#4.通配符選擇器*

CSS複合選擇器：
後代選擇器 E>F
子元素選擇器
交集選擇器
並集選擇器,
連結偽類選擇器lvha
冒號(:)用於CSS3偽類，雙冒號(::)用於CSS3偽元素

<ul> 
<p>111</p> 
<span>222</span> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul>

li:nth-of-type(2):表示ul下的第二個li元素
li:nth-child(2)：表示既是li元素又是在ul下的第二個元素（找不到）。
建議一般使用nth-of-type，不容易出問題。
css三大特性：CSS層疊性、CSS繼承性、CSS優先權
談談你對CSS佈局的理解

盒模型

#清楚浮動的方式：
一、額外標籤法，

<p style="clear:both"></p>

二、父級新增overflow屬性方法
三、使用after偽元素清除浮動

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {*zoom: 1;}   /* IE6、7 专有 */。

四、使用雙偽元素清除浮動

定位模式與邊偏移：

元素的顯示與隱藏：
display:none;
overflow:hidden

滑鼠樣式cursor
default小白 默認，pointer小手，move移動，text文本，not-allowed禁止
vertical-align 垂直對齊

溢出的文字省略號顯示
1.white-space:nowrap強製文本在一行上顯示
2.overflow: hidden超出部分隱藏
3.text-overflow：ellipsis當物件內文字溢出時顯示省略標記

常見的佈局方式：
固定佈局、
串流式（%）佈局、
彈性（flex）佈局、
rem佈局
浮動佈局、清除浮動
定位佈局、
margin和padding

區塊級元素垂直置中
如何讓一個p 上下左右居中
1.
left:50%;   top:50%
transform: translate(-50%,-50%)
2 .
left:0;  top: 0;  bottom: 0;  right: 0;  margin: auto
3.px
CSS三大特性：層疊繼承優先權
可繼承的屬性
文字相關：font-family，font-size， font-style，font-variant，font-weight， font，letter-spacing，line-height，color

清單相關：list-style-image， list-style-position，list-style-type， list-style

CSS3新特性
實現圓角（border-radius），陰影（box-shadow），對文字加特效（text- shadow），線性漸變（gradient），變形（transform）

增加了更多的CSS選擇器多背景rgba，在CSS3中唯一引入的偽元素是::selection，媒體查詢，多欄佈局

相關教學推薦：CSS影片教學

以上是CSS常見面試題的詳細內容。更多資訊請關注PHP中文網其他相關文章！