前端面试题

以下是一些前端面试题：

一、HTML/CSS部分

1. 如何实现一个响应式的导航菜单，在移动设备上能够以汉堡菜单的形式展示？

   • 答案：
     • 使用CSS媒体查询来检测屏幕宽度。
       • 在HTML中，创建导航菜单结构，包含导航项和一个用于切换菜单显示的按钮（汉堡菜单图标）。
       • 在CSS中，对于较大屏幕（桌面端），正常显示导航菜单项，隐藏汉堡菜单按钮。
       • 当屏幕宽度小于某个阈值（如768px）时，隐藏导航菜单项，显示汉堡菜单按钮。通过JavaScript监听汉堡菜单按钮的点击事件，切换导航菜单项的显示状态（例如通过添加或移除一个类来控制display属性）。
     • 可以使用CSS的transform属性来实现汉堡菜单图标的动画效果，如点击时菜单图标旋转一定角度表示菜单展开或收起。

2. CSS中margin - collapse现象是什么？如何避免？

   • 答案：
     • margin - collapse是指在垂直方向上，相邻元素的外边距（margin）会合并为一个外边距的现象。
     • 避免方法：
       • 对于父子元素，可以在父元素上设置overflow: hidden;或者overflow: auto;，这样就可以阻止父子元素之间的margin - collapse。
       • 使用padding代替部分margin，或者调整元素的布局结构，避免相邻元素外边距直接接触。

3. 如何使用CSS实现一个渐变背景效果？

   • 答案：
     • 线性渐变：
       • 在CSS中，可以使用linear - gradient函数。例如，创建一个从蓝色到绿色的水平线性渐变背景：

       background: linear - gradient(to right, blue, green);
       

     • 径向渐变：
       • 使用radial - gradient函数。例如，创建一个从中心向四周扩散的径向渐变背景：