CSS常见面试题-百分百源码网

CSS常见面试题

发布时间：09/01 来源：未知浏览：关键词：

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，媒体查询，多栏规划