前端—每天3道面试题(一)

每天进步一点点,成长足迹看得见!

一、overflow 有哪些属性值？

• Visible：默认值，内容不会被修剪，会呈现在元素框之外。
• Hidden：内容会被修剪，并且其余内容是不可见的。
• Scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• Auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
• Inherit：规定应该从父元素继承 overflow 属性的值。

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

• rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度
• rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果）

例子:

.box{width: 200px;height: 200px;background: red;opacity: 0.5;}

.box{width: 200px;height: 200px;background: rgba(255,0,0,0.5);}

三、position 几个属性的作用？

position 的常见四个属性值： relative，absolute，fixed，static。一般都要配合"left"、“top”、“right” 、“bottom” 属性使用。

定位要始终记住一句话:子绝父相

• Static：默认位置，设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。一般不常用。
• Relative：相对定位,位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，意思就是如果设置了relative 值，那么，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，而不管其他元素会怎么样。relative 移动后的元素在原来的位置仍占据空间。(不脱离文档流)
• Absolute：绝对定位,位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。意思就是如果它的父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移。如果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。(脱离文档流)
• Fixed：固定定位,位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。 注意设置 fixed 属性的元素在标准流中不占位置。