CSS常见面试题

b. 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载

c. import只在IE5以上才能识别，而link是HTML标签，无兼容问题

d. link方式的样式的权重 高于@import的权重

e. 当使用 Javascript 控制 DOM 去改变样式的时候，只能使用 link 方式，因为 @import 眼里只有 CSS ，不是 DOM 可以控制

CSS基础选择器：1.标签选择器 element2.类选择器（多类名选择器）.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>

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

四、使用双伪元素清除浮动

定位模式与边偏移：

元素的显示与隐藏：display:none;overflow:hidden

鼠标样式cursordefault小白 默认，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: auto3.pxCSS三大特性：层叠 继承 优先级可以继承的属性文本相关：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

增加了更多的CSS选择器 多背景 rgba，在CSS3中唯一引入的伪元素是::selection，媒体查询，多栏布局

b. 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载

c. import只在IE5以上才能识别，而link是HTML标签，无兼容问题

d. link方式的样式的权重 高于@import的权重

e. 当使用 Javascript 控制 DOM 去改变样式的时候，只能使用 link 方式，因为 @import 眼里只有 CSS ，不是 DOM 可以控制

CSS基础选择器：1.标签选择器 element2.类选择器（多类名选择器）.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>

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

四、使用双伪元素清除浮动

定位模式与边偏移：

元素的显示与隐藏：display:none;overflow:hidden

鼠标样式cursordefault小白 默认，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: auto3.pxCSS三大特性：层叠 继承 优先级可以继承的属性文本相关：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

增加了更多的CSS选择器 多背景 rgba，在CSS3中唯一引入的伪元素是::selection，媒体查询，多栏布局

相关教程推荐：CSS视频教程

以上就是CSS常见面试题的详细内容，更多内容请关注技术你好其它相关文章！