[TOC=3,4]
****
### 盒模型
1. #### 原始布局
~~~
<style type="text/css">
html,
body{ font-size: 14px; } // 如果只設置body元素，字體大小無法被繼承
.container{
width: 100%;
background-color: #fedcbd;
}
</style>
~~~
~~~
<body>
<div class="container">
<h1>盒模型</h1>
</div>
</body>
~~~
:-: 
:-: 
>[danger] 這里我們看到如果不給body設置margin的話這里有瀏覽器給設定的默認外邊距，造成不可控，所以全局的css就應該設置
~~~
html,
body{
font-size: 14px; //為了使用rem設置尺寸
padding: 0; margin: 0; //消除不可控
}
~~~
* * * * * *
2. #### 布局中誤用內外邊距做位移
~~~
.div-1{
width: 100%;
height: 10rem;
padding: 1rem;
margin: 1rem;
background-color: yellow;
}
~~~
:-: 
> 瀏覽器的可顯示寬度為414，這里給元素設置了100%的寬度，這個寬度僅僅是內容區的寬度，不包含內外邊距和相對位移。如果不了解這個，給元素又設置了內外邊距，那么盒模型所占的寬度就會超過瀏覽區可視區寬度，從而出現滾動條。
> 雖然父包含框設置了小于等于可視區的寬度，但由于包含框里的內容寬度超過了可視區寬度，那在視覺上依然是溢出，有滾動條。解決辦法是設置父框的overflow屬性為 scroll / hidden。
>[danger] ***Tip：如果元素用于布局，謹慎使用margin和padding屬性！***
:-: 
* * * * *
3. #### 布局中位移的正確姿勢`position: relative;`
使用有 `position: relative;` 屬性的盒模型，為 left和top 屬性設置了值
~~~
.div-1{
position: relative;
left: 1rem;
top: 1rem;
width: 100%;
height: 10rem;
padding: 1rem;
margin: 1rem;
background-color: yellow;
}
~~~
:-: 
> 當去掉內外邊距，可觀測到雖然是發生了移動，但是沒有溢出現象，沒有滾動條出現。那么如果是布局上做移動，就不要用內外邊距，而是使用位置屬性。
:-: 
