CSS常见面试题

html-css011

CSS常见面试题,第1张

1.position:absolute+transform:translate(-50%,-50%)

2.position:absolute+margin-top:-100px+margin-left:-100px(需要直到div的宽高)

3.flex

4.绝对定位的top,left,bottom,right都设置为0,然后通过margin:auto实现水平垂直居中

5.display:table-cellvertical-align:middletext-align:center

6.calc函数计算实现

1. DOM结构 :元素不会渲染

2. 事件监听 :不能监听DOM事件

3. 继承 :子元素不会继承

4. 性能 :改变此属性会重排,性能较差

1. DOM结构 :元素会渲染

2. 事件监听 :能监听DOM事件

3. 继承 :子元素会继承,可以通过visibility:visible来取消继承

4. 性能 :改变此属性会重绘,性能较好

1. DOM结构 :元素会渲染

2. 事件监听 :能监听DOM事件

3. 继承 :子元素会继承,而且不能通过opcity:1来取消隐藏

4. 性能 :改变此属性会重绘,性能较好

window.divicePixelRatio=2(默认)

意思是:我们css中1px相当于实际移动端设备2px

1.border-width:0.5px

2.box-shadow内阴影模拟边框,

box-shadow:inset 0px -1px 1px 1px red

3.通过viewport设置rem的基准值,就可以直接写rem了,较好的解决方案

4.伪类+transform

通过:after或:before设置border,结合定位

两侧宽度固定,中间宽度自适应

所以我们要尽量少使用以上属性和方法

如果span 设置了 height

那么 直接 使用 line-height与设置的height 值相同即可以实现垂直居中,例如:

html中:

然后在css中:

即可实现span中,“这里是文字” 部分文字内容的垂直居中。

比使用padding-top 的兼容性和效果多要好很多。