一叁温、盒模型
什么是盒模型再悼？
盒模型的組成由里向外是content,padding,border,margin.
盒模型是有兩種標準的，一個是標準模型膝但，一個是IE模型冲九。
css如何設置兩種模型？
這里用到了CSS3 的屬性 box-sizing
/* 標準模型 */
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;
JS獲取盒模型對應的寬和高有哪幾種方法跟束？
為了方便書寫莺奸，以下用dom來表示獲取的HTML的節(jié)點。
1. dom.style.width/height
這種方式只能取到dom元素內(nèi)聯(lián)樣式所設置的寬高冀宴，也就是說如果該節(jié)點的樣式是在style標簽中或外聯(lián)的CSS文件中設置的話灭贷，通過這種方法是獲取不到dom的寬高的。
2. dom.currentStyle.width/height
這種方式獲取的是在頁面渲染完成后的結果花鹅，就是說不管是哪種方式設置的樣式氧腰，都能獲取到。但這種方式只有IE瀏覽器支持刨肃。
3. window.getComputedStyle(dom).width/height
這種方式的原理和2是一樣的古拴，這個可以兼容更多的瀏覽器，通用性好一些真友。
4. dom.getBoundingClientRect().width/height
這種方式是根據(jù)元素在視窗中的絕對位置來獲取寬高的
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.兄弟重疊
當兩個元素的垂直邊距相互接觸時挺尾，兩者邊距會發(fā)生合并，合并的規(guī)則為站绪，
- 如果是正數(shù)比大小遭铺，大的覆蓋小的
- 都為負數(shù)比絕對值大小，大的覆蓋小的
- 正負都有取其差
其實兄弟重疊完全可以設置一個最大值的邊距就可達到想要的效果，完全沒有必要去使用上面的兩個方法
怎么解決邊距重疊魂挂？
元素絕對定位postion:absolute;一般用在內(nèi)層元素
內(nèi)層元素 加float:left;或display:inline-block;
外層元素用padding增加邊距
外層元素設置overflow:hidden;
內(nèi)層元素透明邊框border:1px solid transparent;
二甫题、頁面重構
什么是頁面重構？
對原來的網(wǎng)頁重新設計涂召，使其更語義化坠非、讓瀏覽器更快的解析以及 更利于SEO優(yōu)化出發(fā)
都有哪些實現(xiàn)的方面？
包括設計稿的重構果正、過時頁面的重構炎码、功能不全頁面的重構、代碼重構秋泳。
- 設計稿的重構：設計師的設計稿可能不是特別符合頁面效果辅肾，當拿到設計稿時需要通過二次重構和修改達到預期效果。
- 功能不全頁面的重構：頁面功能不符合用戶體驗轮锥、用戶交互。
- 過時頁面的重構：使用的是過時的代碼和標簽要尔，跟不上時代的發(fā)展舍杜。
- 代碼重構：代碼質(zhì)量、SEO優(yōu)化赵辕、頁面性能既绩、更好的語義化、瀏覽器兼容还惠、CSS優(yōu)化
頁面重構的基本要求是什么饲握？
1.需要使用合理的標簽進行語義化；
2.可擴展性蚕键，在頁面的某個標簽內(nèi)增加新的內(nèi)容（文字或標簽）救欧，不會對原有內(nèi)容造成影響。
3.當頁面接受后臺數(shù)據(jù)時锣光，標簽內(nèi)容替換后笆怠，頁面布局與樣式不會受到影響。
4.兼容性（根據(jù)項目需要）
