2022前端面试题CSS(三)
一、用CSS这是div快速居中对齐
两行代码解决
body设置display:flex
div设置:margin:auto.
二、padding和margin有什么不同?
他们是盒型模型中的内边距和外边距，padding是施加给自身的，margin是施加给外部的。
三、vm和百分比的区别?
vm不管父元素的大小，百分比是根据父元素的大小计算的。百分比有继承关系，vm只和设备的宽度有关系。
四、行内和块级元素的区别?
行内元素的大小由内容决定，设置宽高没有用。块级元素宽度有继承关系。
五、如何让谷歌浏览器支持小字体?
谷歌最小支持12px,再小就没有用了。可以通过transform:scale(0.5)进行缩放。
六、CSS盒模型
就是用来装页面上的元素的矩形区域，从内到外的关上有content,padding,border,margin,以及height和width，标准的盒子模型width和height是content的大小。在IE盒子模型中width表示content+padding+border。
七、link和import标签的区别
1.link属于html标签，而@import是css提供的。
2.页面被加载时，link会同时被加载，而@import引用的css会等页面加载结束后加载。
3.link是html标签，不需要考虑兼容性，而@import只有IE5以上才能识别
八、flex布局
传统的布局方案，是基于盒状模型，依赖display+position+float属性 ，他对于一些特殊布局非常不方便，比如，垂直居中就不容易实现。
简单的可以分为容器属性和元素属性
容器的属性:
决定主轴的方向:flex-direction
决定换行规则:flex-wrap
水平轴对齐方式:justify-content
垂直轴线方向:align-items
元素的属性
排列顺序:order
放大比例:flex-grow
缩小比例:flex-shrink
九、BFC
块级格式化上下文，用于清除浮动，防止margin重叠。下列元素会生成BFC:
float不为none的元素
position为fixed和absolute的元素
display为inline-block，table-cell的元素
overflow不为visible的元素
十、怎么清除浮动
1.clear:both
2.overflow:hidden
十一、css3新特性
css3边框如border-radius,box-shadow等;
css3背景如background-size,background-origin等
css3 2D,3D转换如transform等
在选择器方面增加了first-of-type,nth-child等选择器
十二、CSS选择器有哪些，优先级呐
id选择器，class选择器，标签选择器，伪元素选择器，伪类选择器等
同一元素引用了多个样式时，排在后面的样式属性的优先级高;
样式选择器的类型不同时，优先级顺序为:id选择器＞class选择器＞标签选择器
带有!important标记的样式属性的优先级最高
十三、怎么样让一个元素消失
display:none;
visibility:hidden
十四、如何实现图片在某个容器中居中的?
1.利用flex布局
父元素设置为display:flex，子元素设置为margin:auto或者align-items为center,justify-content为center,
2.利用表格布局
父元素设置display:table，子元素设置为dispaly:table-cell
3.利用固定宽高
父元素固定宽高，利用定位及设置子元素margin值为自身的一半。
十五、如何实现元素的垂直居中?
1.父元素dispaly:flex,align-items:center
2.父元素table布局，子元素设置vertical-align为center。
十六、calc属性
calc用户动态计算长度值，任何长度值都可以使用calc()函数计算，需要注意的是，运算符前后都需要保留一个空格。
十七、line-height和height的区别
line-height一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的。height一般是指容器的整体高度。
十八、了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法
重排是dom的变化影响到了属性的宽高，浏览器重新计算元素的几何属性，其他元素也会受影响，浏览器需要重新构造渲染树。
重绘是浏览器将守到影响的部分重新绘制在屏幕上。
引起重排重绘的原因有:添加或者删除可见的DOM元素;元素尺寸位置的改变;浏览器页面初始化;浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排。
减少重排重绘的方法有:使用csstext,cssname一次性改变属性。
十九、display:none和visibilty:hidden的区别
visibility:hidden,该元素隐藏起来了，但不会改变页面布局
display:none,将元素隐藏起来，并且会改变页面布局。
二十、相对布局position:relative和绝对布局:obsolute.
相对定位relative:如果对一个元素进行相对定位，他将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素相对于他的起点进行移动，会导致他覆盖其他框。
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html，absolut定位使元素的位置和文档流无关，因此不占据空间，absolute定位的怨毒和其他元素重叠。
二十一、CSS预处理器有什么
less,sass等