前端面试题（css）

css 

基础面试题

css 面试题

js 面试题

1、介绍下CSS的盒子模型    介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

css 是如何设置这两种模型的

box-sizing: border-box;   width 不包含padding 和border

box-sizing: content-box;

css 3 伸缩盒模型弹性盒模型

27 base64的原理及优缺点

• 优点可以加密，减少了HTTTP请求
• 缺点是需要消耗CPU进行编解码

45 水平居中的方法

• 元素为行内元素，设置父元素text-align:center
• 如果元素宽度固定，可以设置左右margin为auto;
• 如果元素为绝对定位，设置父元素position为relative，元素设left:0;right:0;margin:auto;
• 使用flex-box布局，指定justify-content属性为center
• display设置为tabel-ceil

#

46 垂直居中的方法

• 将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle
• 使用flex布局，设置为align-item：center
• 绝对定位中设置bottom:0,top:0,并设置margin:auto
• 绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值
• 文本垂直居中设置line-height为height值

#

47 如何使用CSS实现硬件加速？

硬件加速是指通过创建独立的复合图层，让GPU来渲染这个图层，从而提高性能，

• 一般触发硬件加速的CSS属性有transform、opacity、filter，为了避免2D动画在 开始和结束的时候的repaint操作，一般使用tranform:translateZ(0)

#

48 重绘和回流（重排）是什么，如何避免？

• DOM的变化影响到了元素的几何属性（宽高）,浏览器重新计算元素的几何属性，其他元素的几何
• 属性和位置也会受到影响，浏览器需要重新构造渲染树，这个过程称为重排，浏览器将受到影响的部分
• 重新绘制到屏幕上的过程称为重绘。引起重排的原因有
• 添加或者删除可见的DOM元素，
• 元素位置、尺寸、内容改变，
• 浏览器页面初始化，
• 浏览器窗口尺寸改变，重排一定重绘，重绘不一定重排，

减少重绘和重排的方法：

• 不在布局信息改变时做DOM查询
• 使用cssText或者className一次性改变属性
• 使用fragment
• 对于多次重排的元素，如动画，使用绝对定位脱离文档流，让他的改变不影响到其他元素

 如何实现小于12px的字体效果

transform:scale()这个属性只可以缩放可以定义宽高的元素，而行内元素是没有宽高的，我们可以加上一个display:inline-block;

如何获取dom对应的宽和高

dom.style.width/height;//设置获取的是内联样式

dom.currentStyle.width/height;//只有IE支持

window.getComputedStyle(dom).width/height;//兼容性好

dom.getBoundingClientRect().width/height;//适用场所：计算一个元素的绝对位置

如何解决边距重叠问题

CSS选择器有哪些？哪些属性可以继承？

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

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

优先级（就近原则）：!important > [ id > class > tag ]

!important 比内联优先级高

 ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

伪类更偏向于匹配元素的状态

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

display有哪些值？说明他们的作用?

inline（默认）--内联

none--隐藏

block--块显示

table--表格显示

list-item--项目列表

inline-block

position的值？

static（默认）：按照正常文档流进行排列；

relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；

absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；

fixed(固定定位)：所固定的参照对像是可视窗口。

display:none与visibility：hidden的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）

visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

rgba() 和 opacity 的透明效果有什么不同？

• opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
• rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

如果需要手动写动画，你认为最小时间间隔是多久？

16.7ms 多数显示器默认频率是 60Hz，即 1 秒刷新 60 次，所以理论上最小间隔: 1s / 60 * 1000 ＝ 16.7ms

常见的媒体查询

CSS : @media only screen and (max-device-width:480px) {/css样式/}

媒体查询的原理

元素上下居中，有几种方式？

margin和padding分别适合什么场景使用？

何时使用margin：

需要在border外侧添加空白

空白处不需要背景色

上下相连的两个盒子之间的空白，需要相互抵消时。

何时使用padding：

需要在border内侧添加空白

空白处需要背景颜色

png、jpg、gif  svg 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

为什么要初始化CSS样式

不同浏览器对有些标签的默认值是不同的，不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}

如果没对CSS初始化往往会出现浏览器之间的页面显示差异。