CSS常见面试题

html-css015

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，结合定位

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>交叉重叠层</title>

<style type="text/css">

html{ color:#f00}

#top{width:200pxheight:300pxbackground-color:#fffposition:absolutetop:50pxleft:50px}

#bottom{width:300pxheight:400pxbackground-color:#000z-index:-100position:absolutetop:0left:0}

</style>

</head>

<body>

<div id="top">上面层</div>

<div id="bottom">下面层</div>

</body>

</html>

可以用z-index来定义层的上下关系