前端面试题目系列六

今日份前端面试可能出现的五道题，可以看看，留个印象，以后说不定能用上🐒

1. 比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

opacity: 0、visibility: hidden 和 display: none 都是用于控制元素在页面上的可见性，比较如下：

1. display: none-不占空间，不能点击（响应式交互），会引起回流，子元素不受影响。适合在响应式设计中隐藏某些元素
2. visibility: hidden-占据空间，不能点击，引起重绘，子元素可设置 visible 进行显示。动画效果中需要暂时隐藏元素的场景，例如，滑动或淡出动画
3. opacity: 0-占据空间，可以点击，引起重绘，子元素不影响。适合当需要通过动画或过渡效果隐藏元素，例如，淡出动画

2. 简述一下CSS盒模型

CSS盒模型是由margin、padding、border、context组成，这些部分加在一起决定了元素的总宽度和高度

3. 说说伪类和伪元素的区别

• 伪类（:）： 用于选择元素的特定状态或条件,如:hover（鼠标悬停）、:focus（获得焦点），并为这些状态应用样式
• 伪元素（::）:伪元素用于创建一些原本不在文档树中的元素，并为其添加样式,例如：::before,用户可以看见，但其实不在文档树中
• 区别：CSS规范中用双冒号 :: 表示伪元素，用一个冒号 : 表示伪类。

4. 行内元素的margin 和 padding

行内元素（如 <span>, <a>, <strong> 等）在 CSS 中与块级元素有一些不同之处，特别是在 margin 和 padding 的处理上，

行内元素的高度由其内容决定，宽度可以受margin和padding的影响，

• 在水平方向上，margin-left(right)和padding-left(right)都可以改变行内元素的宽度
• 在垂直方向上，都无效（padding-top 和 padding-bottom 会显示出效果，但是高度不会撑开，不会对周围元素有影响）

5. min-width/max-width 和 min-height/max-height 属性间的覆盖规则？

1. max-width 会覆盖 width，即使 width 是行内样式或者设置了 !important
2. min-width 会覆盖 max-width，此规则发生在 min-width 和 max-width 冲突的时候