css⾯试题总结1.null，undefined的区别？
null表⽰⼀个对象被定义了，但存放了空指针，转换为数值时为0。
undefined表⽰声明的变量未初始化，转换为数值时为NAN。
typeof(null) – object;
typeof(undefined) – undefined
2.CSS3新增伪类有那些？
p:first-of-type
选择属于其⽗元素的⾸个 <p> 元素的每个 <p> 元素。
p:last-of-type
选择属于其⽗元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type
选择属于其⽗元素唯⼀的 <p> 元素的每个 <p> 元素。
p:only-child
选择属于其⽗元素的唯⼀⼦元素的每个 <p> 元素。
p:nth-child(2)
选择属于其⽗元素的第⼆个⼦元素的每个 <p> 元素。
:after
在元素之前添加内容，也可以⽤来做清除浮动。
:before
在元素之后添加内容。
:enabled
已启⽤的表单元素。
:
disabled
已禁⽤的表单元素。
:checked
单选框或复选框被选中。
3.div⽔平垂直居中⼏种⽅式
<div class="parent">
<div class="child"></div>
</div>
1）使⽤position + transform，不定宽⾼时
.parent{
position: relative;
cssclass属性}
.child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
2）使⽤position + transform，有宽⾼时
.parent{
position: relative;
}
.
child{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
3）使⽤flex
.parent{
display: flex;
align-items: center;
justify-content: center;
}
或者
.parent{
display: flex;
align-items: center;
}
.child{
margin: 0 auto;
}
或者
.parent{
display: flex;
}
.child{
margin: auto;
}
4）使⽤position
.parent{
position: relative;
}
.child{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
5）使⽤flex;
div.parent{
display:flex;
}
div.child{
margin:auto;
}
4.什么是BFC
BFC，也叫块级格式化上下⽂，它是页⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦元素将如何定位，以及和其他元素的关系和相互作⽤。
具有 BFC 特性的元素可以看作是隔离了的独⽴容器，容器⾥⾯的元素不会在布局上影响到外⾯的元素。
通俗⼀点来讲，可以把 BFC 理解为⼀个封闭的⼤箱⼦，箱⼦内部的元素⽆论如何翻江倒海，都不会影响到外部。
此外，BFC 具有普通容器所没有的⼀些特性。诸如：同⼀个 BFC 下外边距会发⽣折叠、BFC 可以包含浮动的元素（清除浮动）、BFC
可以阻⽌元素被浮动元素覆盖。
只要元素满⾜下⾯任⼀条件即可触发 BFC 特性：
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
5.CSS单位有哪些？
px、%、em、rem、v系单位（vw、vh、vmin、vmax）、单位运算calc()
6.如何减少回流，重排?
浏览器本⾝的优化策略：
浏览器会维护1个队列，把所有会引起回流、重绘的操作放⼊这个队列，等队列中的操作到了⼀定的数量或者到了⼀定的时间间隔，浏览器就会flush队列，进⾏⼀个批处理。这样就会让多次的回流、重绘变成⼀次回流重绘。但有时候我们写的⼀些代码可能会强制浏览器提前flush队列，这样浏览器的优化可能就起不到作⽤了。当你请求向浏览器请求⼀些 style信息的时候，就会让浏览器flush队列。
减少对render tree的操作（合并多次多DOM和样式的修改），并减少对⼀些style信息的请求，尽量利⽤好浏览器的优化策略
1、将多次改变样式属性的操作合并成⼀次操作。
2、将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了⽂档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
3、在内存中多次操作节点，完成后再添加到⽂档中去。例如要异步获取表格数据，渲染到页⾯。可以先取得数据后在内存中构建整个表格的html⽚段，再⼀次性添加到⽂档中去，⽽不是循环添加每⼀⾏。
4、由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果
要对⼀个元素进⾏复杂的操作时，可以先隐藏它，操作完成后再显⽰。这样只在隐藏和显⽰时触发2次重排。
5、在需要经常取那些引起浏览器重排的属性值时，要缓存到变量。
7.什么是1px像素问题，如何解决?
原因：
我们做移动端页⾯时⼀般都会设置meta标签viewport的content=width=device-width，这⾥就是把html视窗⼤⼩设置等于设备的⼤⼩，⼤多数⼿机的屏幕设备宽度都差不多，以iphoneX为例，屏幕宽度375px。
⽽UI给设计图的时候基本上都是给的⼆倍图甚⾄三倍图，假设设计图是750px的⼆倍图，在750px上设计了1px的边框，要拿到375px宽度的⼿机来显⽰，就相当于缩⼩了⼀倍，所以1px的边框要以0.5px来呈现才符合预期效果，然⽽css⾥最低只⽀持1px⼤⼩，不⾜1px就
以1px显⽰，所以你看到的就显得边框较粗，实际上只是设计图整体缩⼩了，⽽边框粗细没有跟着缩⼩导致的。（ps：ios较新版已经⽀
持0.5px了，这⾥暂且忽略）
简⽽⾔之就是：多倍的设计图设计了1px的边框，在⼿机上缩⼩呈现时，由于css最低只⽀持显⽰1px⼤⼩，导致边框太粗的效果。
解决⽅法:
transform: scale(0.5) ⽅案 - 推荐: 很灵活
1.) 设置height: 1px，根据媒体查询结合transform缩放为相应尺⼨。
div{
height:1px;
background:#000;
-webkit-transform:scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
}
2.) ⽤::after和::befor，设置border-bottom：1px solid #000，然后在缩放-webkit-transform: scaleY(0.5)；可以实现两根边线的需求
div::after{
content:'';width:100%;
border-bottom:1px solid #000;
transform:scaleY(0.5);
}
3.) ⽤::after设置border：1px solid #000; width:200%; height:200%，然后再缩放scaleY(0.5); 优点可以实现圆⾓，京东就是这么实现的，缺点是按钮添加active⽐较⿇烦。
.div::after{
content:'';
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #bfbfbf;
border-radius: 4px;
-webkit-transform:scale(0.5,0.5);
transform:scale(0.5,0.5);
-webkit-transform-origin: top left;
}
⽅法⼆:
媒体查询 + transfrom 对⽅案1的优化
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0){
.border-bottom::after{
-webkit-transform:scaleY(0.5);
transform:scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0){
.border-bottom::after{
-
webkit-transform:scaleY(0.33);
transform:scaleY(0.33);
}
}
8.display有哪些值？说明他们的作⽤
none 元素不显⽰，并从⽂档流中移除。
inherit 从⽗元素继承 display 属性的值。
block块类型。默认宽度为⽗元素宽度，可设置宽⾼，换⾏显⽰。
line⾏内元素类型。默认宽度为内容宽度，不可设置宽⾼，同⾏显⽰。
list-item像块类型元素⼀样显⽰，并添加样式列表标记。
inline-block 默认宽度为内容宽度，可以设置宽⾼，同⾏显⽰。
table 作为块级表格来显⽰。
flex 弹性元素如何伸长或缩短以适应flex容器中的可⽤空间。
grid ⽹格布局
9.浏览器兼容性有哪些？
1.浏览器默认的 margin 和 padding 不同
解决：
加⼀个全局 *{ margin: 0; padding: 0; }来统⼀
2.⾕歌中⽂界⾯下默认会将⼩于12px 的⽂本强制按照12px显⽰
解决：
使⽤-webkit-transform:scale(.75)；收缩的是整个span盒⼦⼤⼩，这时候，必须将span准换成块元素。
3.超链接访问过后hover样式就不会出现了，被点击访问过的超链接样式不再具有hover 和active 了解决：改变css 属性的排列顺序L-V-H-A
10.：：before和：after的区别？
：
伪类,⽤于向某些选择器添加特殊的效果。(css2提出)
：：
伪元素,⽤于将特殊的效果添加到某些选择器（css3提出,⽬的是和伪类区分开）
常见伪类:
hover,
:link,
:active,
:target,
:not(),
:focus。
常见伪元素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。