HTML5+CSS——11盒子模型-边框、内边距、外边距

1.盒子简介：在CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里，那么网页布局就相当于摆放盒子

2.盒子模型组成部分：

内容区（content）

内边距（padding）

外框（border）

外边距（margin）

1.box的宽高可以用 width和heigh t来设置

注意，width和height只是设置盒子内容区大小，而不是盒子的整个大小，盒子可见框的大小由内容区，内边距和边框共同决定。因此计算 盒子大小=内容区+边框+内边距

2.为元素设置边框

要为一个元素设置红边框 必须指定三个样式（缺一不可）

border-width：边框的宽度

border-color：边框的颜色

border-style：边框的样式

使用border-width可以分别指定四个边框的宽度。

如果在border-width制定了四个值，则四个值会分别设置给 上右下左 ，按照顺时针的方向设置的。

如果指定三个值，则三个值会分别设置给 上 左右 下

如果当指定两个值，则两个值会分别设置给 上下 左右

如果当指定一个值，则四边 全都是该值

这个规律同时适用于border-color / style

除了border-width，CSS中还提供了四个 border-xxx-width

xxx的值可能是top right bottom left ， 专门用来设置指定边的宽度 。

和宽度一样，color也提供四个方向的样式，可以分别指定颜色。例如，border-xxx-color

style也可以分别指定4个边的边框样式，规则和width一样，同时它也提供border-xxx-style四个样式，来分别设置四个边。

border  的边框样式简写方式，通过它可以同时设置四个边框的样式，宽度，颜色， 而且没有任何的顺序要求。但是！border一指定就是同时指定四个边不能分别指定。

border-xxx ，例如border-top   border-right   border-bottom  border-left

可以单独设置四个边的样式，规则和border一样，只不过他只对一个边生效。

内边距（padding），指的是盒子的内容区域盒子边框之间的距离。

一共有四个方向的内边距，可以通过：

padding-top

padding-right

padding-left

padding-bottom

来设置四个方向的内边距

内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距。

盒子的大小由内容迹基区、内边距和边框共同决定。

盒子可见框的宽度=border-left-width + padding-left + width + padding-right + border-right-width

可见框的高度=border-top-width + padding-top + height + padding-bottom + border-bottom-width

使用padding可以同时设置四个边框的样式，规则和border-width一致

外边距指的是当前盒子与其他盒子之间的告亏距离，他不会影响可见袜州神框的大小，而是会影响到盒子的位置。

盒子有四个方向的外边距：

margin-top

margin-rigtht

margin-bottom

margin-left

由于页面中的元素都是靠左上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变。

而如果是设置右和下外边距会改变其他盒子的位置

外边距也可以指定一个负值，如果外边距设置的是负值，则元素会向反方向移动

margin还可以设置为auto，auto一般只设置给水平方向的margin

如果只指定，左外边距或者右外边距的margin为auto则会将外边距设置为最大值

垂直方向外边距如果设置为auto，则外边距默认就是0

如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto，以使元素在父元素中水平居中。

同时，外边距同样可以使用简写属性margin，可以同时设置四个方向的外边距，规则和padding一样。

网页布局的核心本质： 就是利用 CSS 摆盒子。

网页布局过程：

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

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

1、border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式 边框颜色；

2、语法：

边框样式 border-style 可以设置如下值：

3、边框的合写分写

边框简写：

边框分开写法：

1、border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

2、语法：

collapse 单词是合并的意思

border-collapse: collapse表示相邻边框合并在一起

边框会额外增加盒子的实际大小。因此我们有两种方案解决：

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

border-radius 属性用于设置元素的外边框圆角。

语法：

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。 语法：

在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。 语法：

1、padding 属性用于设置内边距，即边框与内容之间的距离。

2、语法：

合写属性：

分写属性：

1、当我们给盒子指定 padding 值之后，发生了 2 件事情：

2、内边距对盒子大小的影响：

3、解决方案：

如果保证数基盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

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

外边距可以让块级盒子水平居中的两个条件：

常见的写法，以下三种都可以：

注意：以上方法是让块级元素水平居中

注意：行内元素或者行内块元素让自己的子元素水平居中，只要给其父元素添加 text-align:center 即可。

text-align:center。可以让行内元素（例如：span）和行内块元素（例如：img），在父级盒子中居中

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

主要有两种情况:

1、相邻块元察毕凯素垂直外边距的合并

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

解决方案： 尽量只给一个盒子添加 margin 值。

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

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

第二种：对于两个嵌套关系（父子关系）的块元素，在子元素上设置margin-top:10px，此时会导致父div向下移动10px并不是子元素在父元素里面向下移动10px；

解决方案：

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

对于行内块元素 input button自带的默认边距，以上方法不生效。可以使用浮动来解决 *

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

---