2024年Web前端最新前端—每天5道面试题（九），食堂大妈看完都会了

最后

喜欢的话别忘了关注、点赞哦~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

---

（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 属性的元素在标准流中不占位置。

读者福利

========

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）