前端开发常见笔试/面试题总结HTML/CSS篇

2、使用hr，不建议直接使用size属性，因为新的标准里已经废弃直接使用标准的方式

如何实现垂直居中？

1. 绝对定位：

   main {
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
}

2. flexbox布局：

   display: flex, justify-content: center, align-items: center


3. box布局:

   box-align: center; box-pack: center


什么是标准模式和怪异模式？如何应对？

标准模式又称严格模式，浏览器使用 W3C 的标准解析渲染页面
怪异模式又称混杂模式，浏览器都按照自己的方式解析渲染页面，在不同的浏览器网页会显示不同的样式

最好的方法就是添加了文档类型声明，比如，浏览器会用W3C的标准来渲染网页

如何解决两个元素的重叠问题(外边距合并)？

外边距合并(叠加)：当两个垂直(不包含水平)外边距相遇时，它们将形成一个外边距。合并后的外边距的高度取外边距高度中的较大者。

• 一上一下会合并；
• 一内一外也会合并；
• 自身(没有边框或填充时)的margin-top和margin-bottom也会合并

方法：可以用BFC的方式解决，所谓的BFC就是css布局的一个概念，是一块区域，一个环境。

• margin穿透：可以将父级元素设置为一个独立的BFC，子级元素的margin值就不会溢出父级，我们这里对父级元素应用样式overflow: hidden
• margin重叠：也就是两个平级的元素发生重叠的情形，我们可以将两个div套上一个BFC的外壳，这样两个BFC的内部元素就不会互相影响了

在页面上实现一个圆形的可点击区域

1. SVG方式：同理类似的用的方式也可以
2. CSS方式：border-radius: 50%
3. JS方式：先绘制一个正方形，js检测鼠标位置是否在圆上

常见的SEO方法有哪些？

1. 页面布局， 重要的东西要提前。
2. 文章关键词的分布（ 在面包屑以及侧边栏适当的调用文章标题来提高关键词密度）
3. 文章内容可以在源码中写在侧边栏的前面， 之后用float: right浮动到右边即可
4. 图片处理（ 图片做压缩， 调用图片用div + css来调用， 同时添加alt属性。）
5. 图片添加alt属性，（ 搜索引擎蜘蛛无法抓取图片内容）
6. 页面的大小控制
7. 将脚本放在底部