入门-css盒模型

引入：如下图所示，页面文字和左边区域有间距，未学习盒模型之前可以通过对文字进行首行缩进实现相应的效果，但对于布局来说是非常不方便的。在逆战班的学习过程中知道如果可以直接对元素之间的间距进行设置就可以很方便的进行布局操作。

盒模型：
作用：规定了网页元素如何显示以及元素间相互关系，可以控制元素和元素之间或者元素和内容之间的位置关系
概念：盒模型是css布局的基石。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。
盒模型组成：内容区（content）+补白（内填充padding）+边框（border）+边界(外边距margin)这就是盒模型。如下图所示

其中，content为元素的宽和高，border是盒子的边缘，重点为padding和margin。下面以例子说明，设置一个宽高均为200px的盒子，效果如下所示


padding表现形式
padding作用：用来控制父元素和子元素之间的位置关系；用来控制元素和内容之间的位置关系的。
padding的特点通过以下练习总结。给盒子设置padding值、边框border




由此可见在宽高不变的情况下，给盒子加padding后会把原有的盒子撑大，加上边框现在盒子的
宽度=左右padding+左右边框+原来元素宽度
高度=上下padding+上下边框+原来元素高度
如果保持元素大小不变，需要在原有的宽高上相应的减去所加的左右padding和上下padding
padding对背景图的影响


如上图所示没有添加padding时文字内容与背景图的位置显示，文字默认左上方显示。


如上图所示，添加padding之后文字内容向右下移动了设置的20px，背景图位置没有变化，同时还可以发现背景颜色随着padding值得变化而扩大了，即背景色延展到了padding区域。 综上所述，可以总结出padding的特点如下：
①添加了padding值之后，padding值会把元素原有的大小撑大；如果让元素原本大小不变，需要在元素的宽高上减掉所加的padding；
②padding属性对背景图片是不起作用的，可以说背景图片的位置，是不受padding影响的；
③背景色会延展到padding区域。
padding的设置形式
方法一 ： padding-top:30px; 上填充 padding-right:30px;右填充 padding-bottom:30px; 下填充 padding-left:30px;左填充
方法二 ：padding:10px 30px 50px 100px 上右下左
padding:10px 30px 50px 上 左右 下
padding:10px 30px; 上下 左右
padding:30px; 四周

margin表现形式
作用：控制同辈元素之间的位置关系。
特点： margin是显示在元素边框以外的空白区，不会撑大元素的大小
如下图所示


box1和box2默认情况下如上图显示，默认两个元素间是没有外间距的，添加margin值后下如图所示 ，box1和box2之间有了20px的间距


margin的设置形式
方法一 ： margin-top:30px; 上外边距 margin-right:30px;右外边距 margin-bottom:30px; 下外边距 margin-left:30px;左外边距 方法二 ：margin:10px 30px 50px 100px 上右下左
margin:10px 30px 50px 上 左右 下
margin:10px 30px; 上下 左右
margin:30px; 四周
实现元素水平居中的方法： margin：0 auto； 或 margin-left:auto; margin-right:auto;
注：margin 是可以写负值的，padding不可以写负值；margin不会影响元素的实际宽高，但是也会增加它的所占区域；
margin的bug:
①上下的两个元素之间的margin值会重叠显示；谁的值大 就以谁的margin值来显示。（BFC 解决）
②在当前元素没有添加边框和浮动的前提下，当父元素里的第一个子元素（块元素），添加margin-top的时候，会错误的把margin-top值添加给父元素。
解决方法： ① bfc，给父元素添加overflow：hidden；推荐使用 ②给父元素和子元素添加浮动属性；
③可以给父元素添加边框
④把margin改成padding
一般的，margin就是用来控制同辈元素之间的位置关系； padding就是用来控制父子元素之间的位置关系的。
盒模型的分类：
盒模型分为标准盒模型和怪异盒模型
标准盒模型的所占位置的组成：宽高（content）+padding+border+margin 元素宽度实际占有的位置大小： 宽+左右padding+左右border+左右margin 元素高度实际占有的位置大小： 高+上下padding+上下border+上下margin

怪异盒模型：比如提交按钮
元素的宽度：width（content+border+padding）+margin
通过box-sizing这个属性可以切换模型
box-sizing: border-box（怪异盒模型）/content-box（标准盒模型）