CSS面试题

本文链接：https://blog.csdn.net/LongIvan/article/details/83832049
1、权重计算
important > 行间样式 > id > class | 属性 > 标签选择器 > 通配符
css权重
important Infinity
行间样式 1000
id 100
class |属性| 伪类 10
标签选择器| 伪元素 1
通配符 0
2、css选择器
基本选择器
通用元素选择器，ID选择器，类选择器，标签选择器，属性选择器
组合选择器
分组选择器：用逗号连接
后代选择器：用空格分开连接
子元素选择器：用>号连接
毗邻元素选择器：用 + 连接
伪类选择器：http://www.runoob.com/css/css-pseudo-classes.html
：first-child，：link，：visited，：active，：hove，：focus
伪元素选择器：http://www.runoob.com/css/css-pseudo-classes.html
：first-line，：first-letter，：before，：after
3、行级元素与块级元素
行级元素(inline, css display属性)：span， strong， em， a ，del，i，code，
内容决定元素所占位置
不可以通过css改变宽高
块级元素(block，css display属性)：div， p, ul, li ,ol, form, address，h1~h6，table > tr > th, td
独占一行
可以通过css改变宽高
行级块元素(inline-block，css display属性)：img， input，select，button，textarea
内容决定大小
可以更改宽高
两者的关系
行级元素只能嵌套行级元素
块级元素元素可以嵌套任何元素

标签不可以嵌套

,

会被分成两个
标签不可以嵌套标签
4、盒模型
盒模型组成部分：外边距 + 盒壁 border + 内边距 padding + 盒子内容 width + height
标准盒模型: 盒子width = content的宽度
IE盒模型： 盒子width = content宽度 + border左右宽度 + padding左右宽度
box-sizing：content-box（设置为标准盒模型），border-box（设置为IE盒模型）
5、层模型
absolute
脱离原来位置进行定位
相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位
relative
保留原来位置进行定位
相对于自己于原来的位置进行定位
fixed
固定在屏幕的位置上
6、margin塌陷和BFC
父子嵌套的margin，在垂直方向取两者的最大值，子元素会带动父元素的变化
解决办法：触发bfc
margin合并：兄弟元素在margin-top和margin-bottom上会重叠合并
解决办法：只设置一个元素的margin，或者触发bfc
BFC (Block formatting context) “块级格式化上下文”：它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。
block format context 触发方法
position: absolute或fixed
display: inline-block、table-cell
float: left/right
overflow: hidden
7、浮动模型
任何定义为float的元素都会自动被设置为一个块状元素显示，相当于被定义display：block；声明
浮动元素产生了浮动流
所有产生了浮动流的元素，块级元素看不到他们
产生了bfc的元素和文本类属性（带有inline属性）的元素以及文本都能看到浮动元素
clear可以清除浮动，其属性值有四个：
left：清除左边的浮动对象，如果左边存在浮动对象，则当前元素会在浮动对象底下显示。
right：清除右边的浮动对象，如果右边存在浮动对象，则当前元素会在浮动对象底下显示。
both：清除两边的浮动对象，不管哪边存在浮动对象，则当前元素都会在浮动对象底下显示。
none：默认值。允许两边都可以有浮动对象，当前元素、浮动元素不会换行显示。
清除浮动的方法
在浮动元素下面添加一个

元素，设置css属性clear： both，border：0 solid black清除浮动流，让父级元素的高度随着浮动元素自适应
利用伪元素清除浮动， 设置伪元素为块级元素，并且添加clear属性
触发bfc，让父元素看到浮动流
position：absolute (内部把元素转换成inline-block)
float： right/left (内部把元素转换成inline-block)
display: inline-block
8、伪元素
before（在元素之前）和after（在元素之后）两个伪元素
每个标签都存在，可以通过css选中伪元素进行修改，
必须加上css content属性
默认是行级元素
可以当作正常元素使用
9、文本处理
单行文本处理
单行显示： white-space： nowrap
溢出隐藏： overflow： hidden
溢出显示：text-overflow：ellipsis(省略号)
多行文本处理：使用webkit的扩展属性，适用于webkit浏览器和移动端
dispaly:-webkit-box
-webkit-box-orient: vertical
-webkit-line-clamp: 3
overflow: hidden
10、水平居中和垂直居中
水平居中
行级元素：对父元素设置text-align：center
flex布局
flex布局，对父元素设置display:flex;justify-content:center;
display: flex实现css水平居中；父元素“display:flex; flex-direction:column;"，子元素"align-self:center";
定宽块级元素：主要通过margin
设置左右margin为auto
通过display：table-cell和margin-left实现css水平居中
position：absolute; 子元素给剩余元素宽度一半的margin-left
position: relative,float:left 和margin-left实现水平居中
不定宽块级元素：
width:fit-content实现水平居中，需要配合“margin: 0 auto; text-align: center”使用
设置子元素为display:inline,然后在父元素上设置text-align:center;
垂直居中
父元素固定，子元素为单行内联文本：设置父元素的height等于line-height
父元素固定，子元素为单行或者多行内联文本：设置父元素的display:table-cell，在设置vertical-align:middle
块状元素:设置子元素position:fixed（absolute），然后设置margin:auto; top: 0; left: 0; bottom: 0; right: 0;
通用方案: flex布局，给父元素设置{display:flex; align-items:center;}。
10、css布局
单列布局
一种是header、content、footer宽度都相同，其一般不会占满浏览器的最宽宽度，但当浏览器宽度缩小低于其最大宽度时，宽度会自适应。
一种是header、footer宽度为浏览器宽度，但content以及header和footer里的内容却不会占满浏览器宽度。
圣杯布局和双飞翼布局

双飞翼和圣杯布局.png

Flex布局
设为Flex布局以后，子元素的float、clear、vertical-align属性将失效
容器的属性
flex-direction: 决定主轴的方向
flex-wrap:是否换行，换行的方式
flex-flow: 前两者的缩写形式
justify-content:主轴的对齐方式
align-items:交叉轴的对齐方式
align-content：多轴线的对齐方式
项目属性
order：项目排列顺序
flex-grow:项目的放大比例，默认为0
flex-shrink:项目的缩小比例，默认为1
flex-basis：项目占据的空间大小
flex：前三者的合并
align-self：允许单个项目与其他项目对齐方式不一样，可覆盖align-items属性

clipboard-7.png

display: none; 与 visibility: hidden; 的区别

联系：它们都能让元素不可见
区别：
display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘
读屏器不会读取display: none;元素内容；会读取visibility: hidden元素内容
css hack原理及常用hack

原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。
常见的hack有
属性hack
选择器hack
IE条件注释
link 与 @import 的区别

link 是HTML方式， @import 是CSS方式
link最大限度支持并行下载，@import 过多嵌套导致串行下载，出现FOUC
link 可以通过 rel="alternate stylesheet" 指定候选样式
浏览器对 link 支持早于@import ，可以使用 @import 对老浏览器隐藏样式
@import 必须在样式规则之前，可以在css文件中引用其他文件
总体来说：link优于@import
CSS有哪些继承属性

关于文字排版的属性如：
font
word-break
letter-spacing
text-align
text-rendering
word-spacing
white-space
text-indent
text-transform
text-shadow
line-height
color
visibility
cursor
display,float,position的关系

如果 display 为none，那么position和float都不起作用，这种情况下元素不产生框
否则，如果position值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整
否则，如果float不是none，框是浮动的，display根据下表进行调整
否则，如果元素是根元素，display根据下表进行调整
其他情况下display的值为指定值 总结起来：绝对定位、浮动、根元素都需要调整 display
外边距折叠(collapsing margins)

毗邻的两个或多个 margin 会合并成一个margin，叫做外边距折叠。规则如下：
两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
浮动元素或inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
元素自身的margin-bottom和margin-top相邻时也会折
介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

有两种， IE 盒子模型、W3C 盒子模型；
盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
区 别： IE的content部分把 border 和 padding计算了进去;
CSS选择符有哪些？哪些属性可以继承？

id选择器（ # myid）

类选择器（.myclassname）

标签选择器（div, h1, p）

相邻选择器（h1 + p）

子选择器（ul > li）

后代选择器（li a）

通配符选择器（ * ）

属性选择器（a[rel = "external"]）

伪类选择器（a:hover, li:nth-child）

可继承的样式： font-size font-family color, UL LI DL DD DT

不可继承的样式：border padding margin width height

CSS优先级算法如何计算？

优先级就近原则，同权重情况下样式定义最近者为准
载入样式以最后载入的定位为准
优先级为: !important > id > class > tag important 比 内联优先级高
CSS3新增伪类有那些？

p:first-of-type 选择属于其父元素的首个

元素的每个

元素。
p:last-of-type 选择属于其父元素的最后

元素的每个

元素。
p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。
p:only-child 选择属于其父元素的唯一子元素的每个

元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容
:enabled
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中
如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
居中一个浮动元素
//确定容器的宽高 宽500 高 300 的层
//设置层的外边距

.div {
width:500px ; height:300px;//高度可以不设
margin: -150px 0 0 -250px;
position:relative; //相对定位
background-color:pink; //方便看效果
left:50%;
top:50%;
}
让绝对定位的div居中
position: absolute;
width: 1200px;
background: none;
margin: 0 auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
display有哪些值？说明他们的作用

block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承 display 属性的值
position的值relative和absolute定位原点是？

absolute
生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
生成相对定位的元素，相对于其正常位置进行定位。
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right - z-index 声明）。
inherit
规定从父元素继承 position 属性的值
CSS3有哪些新特性？

新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
圆角 （border-radius:8px）
多列布局 （multi-column layout）
阴影和反射 （Shadow\Reflect）
文字特效 （text-shadow、）
文字渲染 （Text-decoration）
线性渐变 （gradient）
旋转 （transform）
增加了旋转,缩放,定位,倾斜,动画，多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
用纯CSS创建一个三角形的原理是什么？

// 把上、左、右三条边隐藏掉（颜色设为 transparent）

demo {

width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
一个满屏 品 字布局 如何设计?

简单的方式：
上面的div宽100%，
下面的两个div分别宽50%，
然后用float或者inline使其不换行即可
经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一

IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;

Firefox下,只能使用getAttribute()获取自定义属性。

解决方法:统一通过getAttribute()获取自定义属性
IE下,even对象有x,y属性,但是没有pageX,pageY属性

Firefox下,event对象有pageX,pageY属性,但是没有x,y属性

li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了
为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异
对BFC规范(块级格式化上下文：block formatting context)的理解？

一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型
不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响
css定义的权重

// 以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下/// 例子是演示各种定义的权重值：

/权重为1/
div{
}
/权重为10/
.class1{
}
/权重为100/

id1{

}
/权重为100+1=101/

id1 div{

}
/权重为10+1=11/
.class1 div{
}
/权重为10+10+1=21/
.class1 .class2 div{
}

// 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现
display:inline-block 什么时候会显示间隙？(携程)

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing
谈谈浮动和清除浮动

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上
介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

盒子模型构成：内容(content)、内填充(padding)、 边框(border)、外边距(margin)
IE8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会包含内填充和边框，称为怪异盒模型(IE盒模型)
标准(W3C)盒模型：元素宽度 = width + padding + border + margin
怪异(IE)盒模型：元素宽度 = width + margin
标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高
box-sizing 常用的属性有哪些？分别有什么作用？

box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果
box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果
box-sizing: inherit; // 继承父元素 box-sizing 属性的值
CSS选择器有哪些？

id选择器 #id
类选择器 .class
标签选择器 div, h1, p
相邻选择器 h1 + p
子选择器 ul > li
后代选择器 li a
通配符选择器 *
属性选择器 a[rel='external']
伪类选择器 a:hover, li:nth-child
CSS哪些属性可以继承？哪些属性不可以继承？

可以继承的样式：font-size、font-family、color、list-style、cursor
不可继承的样式：width、height、border、padding、margin、background
CSS如何计算选择器优先？

相同权重，定义最近者为准：行内样式 > 内部样式 > 外部样式
含外部载入样式时，后载入样式覆盖其前面的载入的样式和内部样式
选择器优先级: 行内样式[1000] > id[100] > class[10] > Tag[1]
在同一组属性设置中，!important 优先级最高，高于行内样式
CSS3新增伪类有哪些？

:root 选择文档的根元素，等同于 html 元素

:empty 选择没有子元素的元素

:target 选取当前活动的目标元素

:not(selector) 选择除 selector 元素意外的元素

:enabled 选择可用的表单元素

:disabled 选择禁用的表单元素

:checked 选择被选中的表单元素

:after 在元素内部最前添加内容

:before 在元素内部最后添加内容

:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n

:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数

:nth-child(odd)

:nth-child(even)

:nth-child(3n+1)

:first-child

:last-child

:only-child

:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n

:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数

:nth-of-type(odd)

:nth-of-type(even)

:nth-of-type(3n+1)

:first-of-type

:last-of-type

:only-of-type

::selection 选择被用户选取的元素部分

:first-line 选择元素中的第一行

:first-letter 选择元素中的第一个字符

请列举几种隐藏元素的方法

visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在
opacity: 0; CSS3属性，设置0可以使一个元素完全透明
position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外
display: none; 元素会变得不可见，并且不会再占用文档的空间。
transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留