CSS之盒子模型

盒子模型

网页布局的本质：摆放盒子。

所谓盒子模型：就是把HTML页面中的布局元素看做一个矩形的盒子，也就是盛装内容的容器。

CSS盒子模型本质是一个盒子，封装周围的HTML元素，它包括：边框(border)、外边距(margin)、内边距(padding)和实际内容(content)。

边框（border）

1）边框由三部分组成：边框宽度（粗细）边框样式 边框颜色
语法：
border : border-width || border-style|| border-color

属性	作用
border-width	定义边框粗细，单位px
border-style	边框样式
border-color	边框颜色

border-style: none | hidden | dotted | dashed | solid
              groove | ridge | inset | outset| double

重点：
solid:实线边框 默认颜色为黑色
dashed：虚线边框
dotted:  点线边框

    div{
            width: 300px;
            height:200px;
            border-width:5px;
            border-style: dashed;
            border-color: red;
        }

边框的简写：

border :1px solid red; 没有顺序

边框修改：

border-top: 1px solid red; /*只设定了边框 其余同理*/

                注意层叠性的使用！

2）表格的细线边框

语法：
border-collapse:collapse 合并相邻的边框

3）边框会影响盒子实际的大小

  边框会额外增加盒子的实际大小，解决方案如下：
  1.测量盒子大小的时候，不测边框
  2.如果测量的时候包含了边框，则需要width/height减去边框宽度

内边距（padding）

用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距
padding简写：
值的个数	表达意思
:--------:	:--------
padding:npx	1个值，代表上下左右都有n像素内边距
padding:npx mpx	2个值，代表上下内边距n像素 左右内边距m像素
padding:apx bpx cpx	3个值，代表上内边距a像素 左右内边距b像素 下内边距c像素
padding:apx bpx cpx dpx	4个值，代表上a像素 下b像素 左c像素 右d像素 顺时针
当我们给盒子指定padding值之后:
1、内容和边框有了距离，添加了内边距。
2、padding影响了盒子实际大小。

 也就是说，如果盒子已经有了宽度和高度，此时在指定边框，会撑大盒子。

解决方案：
width/height减去多出来的内边距大小

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子。

外边距（margin）

用于设置外边距，控制盒子和盒子之间的距离。

属性	作用
margin-left	左外边框
margin-right	右外边框
margin-top	上外边框
margin-bottom	下外边框
margin简写与padding类似

外边距应用：
让盒子水平居中，但必须满足：
1）盒子必须指定宽度（width）
2）盒子左右外边距都设置为auto

.header{ width:960px ; margin:0 ; auto;}
常见写法：
~1 margin-left: auto;margin-right：auto;
~2 margin: auto;
~3 margin:0 auto;
以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center

外边距的合并

1)相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有外边距margin-bottom,下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top的和。取两个值中的较大者这种现象被称为相邻元素垂直外边距的合并。
解决方案:

 尽量只给一个盒子添加margin值。

2）嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：

~可以为父元素定义上边框(border)
~可以为父元素定义上内边框（padding）
~可以为父元素添加overflow：hidden
还有其他方法：比如浮动、固定、绝对定位的盒子不会有塌陷问题

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前，首先要清除下网页元素的内外边距。

*{
padding:0;  /* 清除内边距 */
margin:0；/* 清除外边距 */
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。