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等