[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;
}
~~~
:-: 
> 当去掉内外边距，可观测到虽然是发生了移动，但是没有溢出现象，没有滚动条出现。那么如果是布局上做移动，就不要用内外边距，而是使用位置属性。
:-: 
