盒子的模型_border="5px-CSDN博客

本文链接：https://blog.csdn.net/weixin_42012282/article/details/79978365

1.什么是盒子

2.盒子的种类

3.标准的盒子模型

4.盒子模型的属性

5.盒子的边框

6.盒子内边距

7.盒子外边距

8.标准盒子模型宽度计算方试

9.设置固定宽度

10.充满父级容器

11.包裹内容的情况下

12.怪异盒子模型

13 .盒子的元素

1 .盒子的特性

一个盒子中主要的属性就5个：width、height、padding、border、margin。

具备内容、填充、边框、边界这些属性，能包含其他元素的容器都是盒子。

2.盒子的种类

1.标准盒子模型

2.怪异盒子模型（IE盒子模型）

注意：根据盒子的尺寸计算方式分类，盒子的基本属性相同 </ p >

在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：内容、内边距、边框、外边距。 </ p >

3.标准的盒子模型

content-内容

padding-内边距(填充）

border-边框

margin-外边距

4.盒子模型的属性

1.边框(border):可以设置边框的宽窄、样式和颜色。

2.内边距(padding):可以设置盒子内容区与边框的间距，想像一下内边距是从边框向内推元素的内容。

3.外边距(margin):可以设置盒子与相邻元素的间距，想像一下外边距是边框向外推其他元素。

5.盒子的边框

边框有3个相关的属性:

宽度(border-width)

样式(border-style)

颜色(border-color)

6.盒子内边距

在显式设定了width的前提下，padding值的设定会加大盒子的占位宽度。

7.盒子外边距

样式表的第一条规则:* {margion:0 ;padding=0;}，所有元素默认的外边距和内边距都设定为零。

8.标准盒子模型宽度计算方试

设置固定宽度

充满父容器

包裹内容

9.设置固定宽度

width:200px;height: 200px;padding: 10px; margin: 50px;border: 5px ；

这种情况下，设置的200px为content的宽度;整个盒子的宽度是：（内容宽度 + border宽度 + padding宽度 + margin宽度）之和

10.充满父级容器

height: 200px;

这里可以看到不规定盒子宽度的话，盒子会自动充满一整行，这是块级元素的特性。

height: 200px;border: 50px solid red;background-color: black;padding: 50px;margin: 50px;

这种情况下，增加盒子的margin;border;padding;都会压缩内部contant的宽度

11.包裹内容的情况下

这种情况比较简单，内容的宽度按照内容计算，盒子的宽度将在内容宽度的基础上再增加（padding宽度 + border宽度 + margin宽度）之和。

12.怪异盒子模型

box-sizing:border-box;height: 200px;width:200px;border: 10px solid red;padding: 10px;margin: 10px;

当为盒子设置box-sizing:border-box时，就是怪异盒子模型

这个时候你会发现，盒子200px的宽度是内容 + border + 边框的宽度（不包括margin）

13.盒子的元素

1.块级元素

2.行内元素

1.块级元素(BLOCK ELEMENT)

1.没有显式地设置元素的width属性,默认值是auto. 元素始终会扩展到填满其父元素的宽度为止

2.为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。扩展量等于水平边框和内边距之和

1.行内元素(BLOCK ELEMENT)

1.inline元素会扩展到足以包裹其内容的宽度，添加内边距和水平边框会导致liline元素变宽，添加量等于水平边框和内边距的和。

行内元素+DISPLAY：BLOCK=块状元素

CSS3 BOX-SIZING属性

margin 负值会有什么影响

1.盒子模型尺寸基准有两种，分别是content-box和border-box （默认是content-box）

2.理论上说，content-box与border-box区别是两者的盒子的宽度是否包含表框和内边距。

3.新建两个不同背景填充的div,

能简单说说盒子margin重叠

1、水平边距永远不会重合。
2、在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下：
a、全部都为正值，取最大者；
b、不全是正值，则都取绝对值，然后用正值减去最大值；
c、没有正值，则都取绝对值，然后用0减去最大值。
注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。
3、相邻的盒模型中，如果其中的一个是浮动的（float），垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也是这样。
4、设置了overflow属性的元素和它的子元素之间的margin不被重叠（overflow取值为visible除外）。
5、设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，并且和他们的子元素之间也是一样。
6、设置了display:inline-block的元素，垂直margin不会重叠，甚至和他们的子元素之间也是一样。
7、如果一个盒模型的上下margin相邻，这时它的margin可能重叠覆盖（collapse through）它。在这种情况下，元素的位置（position）取决于它的相邻元素的margin是否重叠。
a、如果元素的margin和它的父元素的margin-top重叠在一起，盒模型border-top的边界定义和它的父元素相同。
b、另外，任意元素的父元素不参与margin的重叠，或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零，那么元素的border-top边界位置和原来一样。
一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom重叠。
注意，那些已经被重叠覆盖的元素的位置对其他已经重叠的元素的位置没有任何影响；只有在对这些元素的子元素定位时，border-top边界位置才是必需的。