css样式隔离面试,css 面试

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一道CSS面试题,求解

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title交叉重叠层/title

style type="text/css"

html{ color:#f00;}

#top{width:200px;height:300px; background-color:#fff;position:absolute;top:50px;left:50px;}

#bottom{width:300px;height:400px; background-color:#000; z-index:-100;position:absolute;top:0;left:0;}

/style

/head

body

div id="top"上面层/div

div id="bottom"下面层/div

/body

/html

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

相关问答

Q1: 2021 css 面试题

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

dom结构发生改变就会触发重排；重排一定会触发重绘；改变背景颜色会触发重绘

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

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

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

思路：统一向左浮动，中间的放在最前面浮动顺序中间-左边-右边，浮动后因为中间的宽度为100%；所有中间的占据一行；

左边的和右边的按顺序排列在下面；如果中间的不为100%的话，三者应该在同一条线上，向让左边的移动到中间的左边上面去可以给左边的加margin-left: 负中间的宽度的值；因为左边已经移动到中间的左边了，所以中间的右边紧挨着右边的；然后右边的在中间的右边的话只需要给右边margin-left:负右边自己的宽度的值；这样就把左边和右边分别放在了中间的左边和右边的位置；会遮挡中间部分内容；这是给外层container加padding: 0 右边宽度 0 左边宽度；这时中间左右会有空白，接下来我们只需要给左右 position: relative;定位，然后左边left:自己的宽度；右边right: 自己的宽度就可以了

Q2: 面试题之基础的html/css面试题，来挑战吗

测试候选人的CSS3技能的一个强大的测试例子。这个按钮具有很多样式，我们一起来看看：

他们是如何处理多边框的？在这里，box-shadow可能是最好的办法。

他们是使用text-transform:uppercase;将文本转换成大写吗？这将是最好的。

他们是如何处理星星？伪元素将是一种很好的候选方法。他们是使用了"unicode"还是字体图标？

他们有没有使用text-shadow做微妙的处理？

他们是怎么把按钮的主要背景制作出来？使用linear-gradient技巧将会是一个好技巧，或者box-shadow。

他们是使用嵌套来实现的圆角吗？

我希望我没有破坏Mobify的招聘过程！但老实说，我认为这些东西是假装不出来的。你可以做它，讨论它，或者你可以不做任何事情。

Q3: div+css面试技巧

面试技巧到没什么，有工作经验就行。

技术