前端—每天5道面试题

Posted 2021-08-10 每天都在慢慢进步的王同学

前端—每天5道面试题（九）

每天进步1% 不多 就1%

一、overflow 有哪些属性值？

• Visible：默认值，内容不会被修剪，会呈现在元素框之外。

• Hidden：内容会被修剪，并且其余内容是不可见的。

• Scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

• Auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

• Inherit：规定应该从父元素继承 overflow 属性的值

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

• rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度

• rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果）

三、行内元素有哪些？块级元素有哪些？空(void)元素有那些？样式之间的转换和区别

• CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display值，比如 div 默认display 属性值为“block”，成为“块级”元素；span 默认 display 属性值为“inline”， 是“行内”元素。

• 行内元素有：a b span img input select strong（强调的语气）

• 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

• 空标签：没有闭合的标签称为空标签，如：<br />和<img />等。

• 他们不存在成对的情况（除外）反之具有成对性质的例如：<div></div>、<form></form>就不是空标签。 在html中，在空标签上使用闭标签是无效的，例如：。这样的情况是无效的HTML。

常见有以下标签为空标签

<area>
<base>
<br>
<col>
<colgroup> 
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>

（4）样式转换：

• display:block 行内元素转换为块级元素

• display:inline 块级元素转换为行内元素

• display:inline-block 转为内联元素

区别：

• 块级元素独占一行，行内元素在同一行显示

• 块级元素默认为宽度为100%，行内元素默认宽度由内容撑开

• 块级元素可以设置宽高，行内元素设置宽高不生效

• 块级元素可以设置margin和padding的四周，而行内元素只能设置margin和padding的左右

• 布局时，块级元素可以包含行内元素和块级元素，而行内元素一般不包含块级元素

四、怎么让一个不定宽高的 DIV，垂直水平居中？

1）使用 CSS 方法：

父盒子设置：display：table-cell； text-align：center；vertical-align：middle；
Div 设置： display：inline-block；vertical-align：middle；

2）使用 CSS3 transform：

父盒子设置：display：relative
Div 设置： transform： translate(-50%，-50%)；position： absolute；top： 50%；left：
50%；

五、position 几个属性的作用？

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

1）Static：默认位置，设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。一般不常用。

2）Relative：位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，意思就是如果设置了relative 值，那么，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，而不管其他元素会怎么样。注意 relative 移动后的元素在原来的位置仍占据空间。

3）Absolute：位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。意思就是如果它的父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移。如果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。

4）Fixed：位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。 注意设置 fixed 属性的元素在标准流中不占位置。