盒模型、页面重构【前端面试问题（二）】

一、盒模型

什么是盒模型？

盒模型的组成由里向外是content,padding,border,margin.
盒模型是有两种标准的，一个是标准模型，一个是IE模型。

css如何设置两种模型？

这里用到了CSS3 的属性 box-sizing

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

JS获取盒模型对应的宽和高有哪几种方法？

为了方便书写，以下用dom来表示获取的HTML的节点。

1. dom.style.width/height

这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。

2. dom.currentStyle.width/height

这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。但这种方式只有IE浏览器支持。

3. window.getComputedStyle(dom).width/height

这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。

4. dom.getBoundingClientRect().width/height

这种方式是根据元素在视窗中的绝对位置来获取宽高的

5.dom.offsetWidth/offsetHeight

这个就没什么好说的了，最常用的，也是兼容最好的。

什么是边距重叠?

边距重叠分为两种情况

1.父子重叠

父元素没有设置margin-top，而子元素设置了margin-top：20px;可以看出，父元素也一起有了边距

上图的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .demo{
            height:100px;
            background: #eee;
        }
        .parent{
            height:200px;
            background: #88f;
        }
        .child{
            height:100px;
            margin-top:20px;
            background: #0ff;
            width:200px;
        }
    </style>
</head>
<body>
    <section class="demo">
        <h2>此部分是能更容易看出让下面的块的margin-top。</h2>
    </section>
    <section class = "parent">
        <article class="child">
            <h2>子元素</h2>
            margin-top:20px;
        </article>
        <h2>父元素</h2>
            没有设置margin-top
    </section>
</body>
</html>

2.兄弟重叠

当两个元素的垂直边距相互接触时，两者边距会发生合并，合并的规则为，

如果是正数比大小，大的覆盖小的
都为负数比绝对值大小，大的覆盖小的
正负都有取其差
其实兄弟重叠完全可以设置一个最大值的边距就可达到想要的效果，完全没有必要去使用上面的两个方法

怎么解决边距重叠？

元素绝对定位postion:absolute;一般用在内层元素
内层元素加float:left;或display:inline-block;
外层元素用padding增加边距
外层元素设置overflow:hidden;
内层元素透明边框border:1px solid transparent;

二、页面重构

什么是页面重构？

对原来的网页重新设计，使其更语义化、让浏览器更快的解析以及更利于SEO优化出发

都有哪些实现的方面？

包括设计稿的重构、过时页面的重构、功能不全页面的重构、代码重构。

设计稿的重构：设计师的设计稿可能不是特别符合页面效果，当拿到设计稿时需要通过二次重构和修改达到预期效果。
功能不全页面的重构：页面功能不符合用户体验、用户交互。
过时页面的重构：使用的是过时的代码和标签，跟不上时代的发展。
代码重构：代码质量、SEO优化、页面性能、更好的语义化、浏览器兼容、CSS优化

页面重构的基本要求是什么？

1.需要使用合理的标签进行语义化；
2.可扩展性，在页面的某个标签内增加新的内容（文字或标签），不会对原有内容造成影响。
3.当页面接受后台数据时，标签内容替换后，页面布局与样式不会受到影响。
4.兼容性（根据项目需要）