一、盒模型
什么是盒模型？
盒模型的组成由里向外是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.兼容性（根据项目需要）
网友评论