目录

简介

盒子模型组成

内容区

内边距

边框

border-width

border-color

border-style

border

外边距

负值

auto

简写属性

垂直外边距的重叠

浏览器默认设置

内联元素的盒子

---

简介

在网页中，一切都是可以看作为“盒子”。

在css处理网页的时候，我们认为每一个元素都是包含在一个看不见的盒子里面

盒子模型组成

由里到外盒子模型依次包含：

内容区（content）

内边距（padding）

边框（border）

外边距（margin）

如下图所示，可以很形象的让我们理解各个部分：

内容区

内容区具体指的是盒子中放置内容的那么一块区域，也就是元素中的文本内容，子元素都是存在于内容区之内的。

假如我们没有为元素去设置内边距还有边框，则内容区大小 默认和盒子大小是一致的。

通过width来设置我们盒子内容区的宽度，height来设置盒子内容区的高度。（记住这里的两个属性仅仅是用爱设置盒子内容区的大小，盒子的大小还要加上边框的宽度）

width和height属性只适用于块元素

内边距

内边距：指的是盒子的内容区与盒子的边框之间的距离

一共4个方向的内边距，可以通过以下4个属性来分别设置4个方向的属性：

padding-top：

padding-right：

padding-bottom：

padding-left：

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

盒子的大小是有内容区、内边距以及边框共同决定的。

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

盒子可见框的高度公式同上

边框

为元素设置边框，则必须指定下面的这三个样式：

border-width

        边框的宽度

        他可以粉笔指定4个边框的宽度；如果我们指定了4个值，则4个值分别设置给了 上 右 下 左 ，这是按照顺时针方向设置的；如果指定3个值，则这三个值会分别设置给 上 左右  下；如果是指定2个值，则两个值会分别设置给上下  左右；如果制定1个值，则4个方向边框都是1个值

也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。

border-color

        边框的颜色

        和宽度一样，color也提供了4个方向的样式粉笔指定颜色的

border-style

        边框的样式

        可选值：

                none：默认值，没有边框

                solid：实线

                dotted：点状块

                dashed：虚线

                double：定义双线

        style也可以粉笔指定4个边框样式，规定和width一致，同时他也提供了border-xxx-style分别设置4个边框的样式。

border

        边框的简写样式；他可以同事设置4个边框的样式，宽度，颜色

        并且他没有任何的树勋要求；border指定则是同事指定4个边框，不能分别指定4个边

        同时，也提供了boder-top、boder-right、boder-bottom、boder-left

外边距

外边距：他指的是当前的盒子与其他的盒子之间的距离（盒子与盒子见得距离）

他不会影响我们可见框的大小，只会影响盒子的位置

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

margin-top：        上外边距，盒子上边框和其他盒子的距离

margin-right：        右外边距，盒子右边框和其他盒子的距离

margin-bottom：        下外边距，盒子下边框和其他盒子的距离

margin-left：                左外边距，盒子左边框和其他盒子的距离

由于页面中的元素全部都是靠左靠上去摆放的。因此设置外边距会影响到自身或者其他盒子的位置问题：

设置上或者左外边距的时候，会影响盒子自身的位置发生变化；

设置下或者右外边距的时候，会影响其他盒子的位置发生变化

负值

外边距他其实是可以设置一个负值的，如果外边距设置的是负值，那么他会向相反的方向移动      

auto

margin他还可以设置auto，其一般只会设置水平方向的margin。

如果仅仅指定左或者右外边距的margin为auto属性，则会将我们盒子的外边距设置为最大值

如果左右都设置了auto属性，则外边距会设置相同的值，则就相当于在父元素中居中显示。

垂直方向外边距设置为auto，则相当于设置了0。

简写属性

外边距同样可以使用简写属性：magrin，并且也可以同时设置4个方向的外边距，规则和padding一样，都是顺时针设置的——上 右 下 左

垂直外边距的重叠

在网页中垂直方向的相邻外边距会发生外边距重叠

从上面这段话，我们可以看出来，垂直外边距构成的条件有两个，分别是：

1、垂直的外边距；2相邻的

垂直外边距重叠：指的是兄弟元素之间的相邻外边距会取最大值而不是取和

如果父子元素的垂直边距相邻，给子外边距设置了的属性会传递到父元素身上，就相当于设置给了父元素

浏览器默认设置

浏览器为了在没有样式的时候，有个比较美观的显示，会有一个默认的样式。

都会设置默认的margin和padding，然而他的默认样式，我们一般不会使用，所以我们在编写样式之前，需要将浏览器中的默认样式全部去掉。

所以我们一般会使用通配选择器清除默认样式

*{

        margin:0;

        padding:0;

}

内联元素的盒子

内联元素不能设置width和height属性

内联元素可以设置水平方向的内边距（影响布局）、垂直方向内边距（但是不会影响页面的布局）

内联元素可以设边框属性，水平方向边框影响布局、垂直方向边框不会影响页面布局

内联元素可以设置水平方向的外边距

        （1、不会重叠，会求和。2、影响布局）

内联元素不支持设置垂直外边距

好了，关于盒子模型就先了解到这里！

欢迎大家点击下方卡片，关注《coder练习生》