CSS面试题相关知识点整理（1）

目录

一、CSS选择器及优先级

二、display

2.1 display的属性值及其作用

2.2 display的block、inline和inline-block的区别

2.3 隐藏元素的方法有哪些

2.4 display:none与visibility:hidden的区别

三、 对盒子模型的理解

四、CSS3中有哪些新特性

五、单行、多行文本溢出隐藏

---

一、CSS选择器及优先级

选择器及优先级

选择器名称	优先级	举例
行内样式	1000	style={}
id选择器	100	#id
类选择器	10	.className
伪类选择器	10	:hover
属性选择器	10	a[href]、*[title]
标签选择器	1	p、div
伪元素选择器	1	::before、::after
兄弟选择器	0	+
子选择器	0	>
后代选择器	0	div p
通配符	0	*

css选择器优先级规则：

• css属性后面添加 !important 声明，为绝对优先级
• css选择器权重相同时，后定义的规则优先
• css选择器权重不相同时，权重高的优先

二、display

2.1 display的属性值及其作用

• none：元素不显示，并且从文档流中删除
• block：块类型，默认宽度为父元素宽度，可设置高度，换行显示
• inline：行内元素类型，默认宽度为内容宽度，不可设置高度，同行显示
• inline-block：行内块元素类型，默认宽度为内容宽度，可设置高度，同行显示（有间隙）
• list-item：像块元素类型一样显示，并添加样式列表标记
• table：此元素作为块级表格来显示
• inherit：规定应该从父元素继承display属性值

2.2 display的block、inline和inline-block的区别

• block：块元素类型，独占一行，换行显示；可设置宽度、高度、padding、margin、border
• inline：行内元素类型，一行显示多个，默认宽度为内容宽度，不可设置高度；仅可设置水平方向的padding、margin
• inline-block：行内块元素类型，一行内显示多个，且有间隙，默认宽度为内容宽度，可设置宽度和高度

2.3 隐藏元素的方法有哪些

隐藏元素的方法

方法	备注
display:none	渲染树不会包含该渲染对象，该元素不会在页面中占据空间
visibility:hidden	元素不显示，元素在页面中仍占据空间
opacity:0	将元素透明度设置为0，以此来实现元素的隐藏。元素在页面中仍占据空间
z-index:负值	用其他元素来遮挡该元素，来实现隐藏效果
position:absolute	通过使用绝对定位将元素移除可视区域内，来实现隐藏效果
clip/clip-path	使用元素裁剪的方法来实现元素隐藏，元素在页面中仍占据空间
transform:scale(0,0)	将元素缩放为0来实现元素隐藏，元素在页面中仍占据空间

2.4 display:none与visibility:hidden的区别

两者都是让元素隐藏不可见，主要区别如下：

1. 渲染树中：
   1. display:none会让元素完全从渲染树中消失，渲染时不会占据空间；
   2. visibility:hidden不会让元素从渲染书中消失，渲染的元素仍占据相应的空间，仅是内容不可见
2. 是否继承属性：
   1. display:none是非继承属性，子孙节点会随着父节点从渲染树中消失，即使修改子孙节点的属性也无法显示；
   2. visibility:hidden是继承属性，子孙节点的消失是由于继承了hidden，通过修改visibility:visible可以让子孙节点显示
3. 修改display属性通常会造成文档的重排；修改visibility属性只是会造成本元素的重绘
4. 使用读屏器，设置display:none的内容不会被读取；设置visibility:hidden的内容会被读取

三、 对盒子模型的理解

css3中可以通过设置box-sizing来指定盒子模型，有两个值：content-box、border-box

• box-sizing:content-box 盒子大小为width + padding + border（会撑大盒子）
• box-sizing:border-box 盒子大小为width（padding、border不会撑大盒子，在padding、border不会超过width的前提下）

四、CSS3中有哪些新特性

• 新增选择器：属性选择器、结构伪类选择器、伪元素选择器
• 2D转换transform：位移transform:translate(20px,20px)；缩放transform:scale(1,1)；旋转transform:rotate(45deg)
• 3D转换transform：位移transform:translate(20px,20px,20px)；旋转transform:rotate(0,0,1,45deg)；3D呈现transform-style:preserve-3d 子元素开启3d空间（flat：子元素不开启3d空间）
• 动画：@keyframes 动画名称{0% {width:100px} 100% {width: 200px}} 
• CSS3过渡 transition
• 渐变背景 background:linear-gradient(red, green, blue);
• 弹性盒模型 display: flex
• 阴影 box-shadow、text-shadow
• 圆角 border-radius

五、单行、多行文本溢出隐藏

• 单行文本溢出：
  • white-space：nowrap；
  • overflow：hidden；
  • text-hidden：ellipsis；
• 多行文本溢出：
  • overflow：hidden；
  • text-hidden：ellipsis；
  • display:-webkit-box;（作为弹性伸缩盒子模型显示）
  • -webkit-box-orient:vertical; （ 设置伸缩盒子的子元素排列方式：从上到下垂直排列）
  • -webkit-line-clamp:3;       （ 显示的行数）