什么是盒模型

Posted 2023-05-01

参考技术A       在前端中盒模型可谓是十分重要的，它是CSS进行页面布局的基石，在页面CSS布局中盒模型规定了网页元素如何排列显示以及元素之间的相互关系。在H5中CSS样样式定义所有的元素都可以拥有像盒子一样的平面空间和外形。（如下图所示）整个盒模型包含了：内容区（content）、补白或填充（因叫法不同；padding）、边框（border）、边界或外边距（margin）这就是盒模型。

      从盒模型的定义中我们了解到了盒模型是由内容区（content）、填充区（padding）（注：在本文中就称填充区）、边框（border）及外边距（margin）（注：在本文中就称外边距）4个部分组成，那么它们是怎么来定义的，每个组成部分的属性用法又是什么？

      Content（内容区）：它是整个元素的宽和高，是属于元素内容的区域

      border（边框）：它是盒子的边缘既是边框

      Padding（填充区）：它是盒子边框与内容之间的间距，或者说是父元素与子元素之间的内边距

      Margin（外边距）：它是盒子边框以外的外边距，或者说是同辈元素之间的间距

      border-width:1px; ：设置边框的宽度的，在设置边框宽度时会用到此属性默认为1px，在网页中很多修饰性线条都是由边框来实现的，在给属性加值得时候需要加上单位，如px（像素），em...

      border-style:solid: ：设置边框的线型样式，边框线性也有多个值，如：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)...

      border-color:; ；设置边框的颜色，默认为黑色。

      Border-style:none; ；取消边框，在css样式中如盒子有单一方向用不到边框可用此属性取消边框

      扩展：border-style:none;的应用场景：加了超链接的插入图片，在IE低版本浏览器会出现边框。解决方法：给img 这个标签添加border-style:none;。

边框有四个方向，必要时可单独设置一方向边框属性，

      1：border-top:      上边框，可给边框设置宽度、线型、颜色。

      2：border-right:     右边框，可给边框设置宽度、线型、颜色。

      3：border-bottom:   底边框，可给边框设置宽度、线型、颜色。

      4：border-left:      左边框，可给边框设置宽度、线型、颜色。

      为盒子写边框属性时，为方便书写，有复合式写法：

      1：border-top-width:10px ;        上边框的宽度

      2：border-right-width:20px; 右边框的宽度

      3：border-bottom-width:30px;    下边框的宽度

      4：border-left-width: 40px;       左边框的宽度

      border-width:10px 20px 30px 40px;  border-width 的复合式写法

      1：border-top-style:solid;            上边框的线型

      2：border-right-style:dashed;         右边框的线型

      3：border-bottom-style:double;       下边框的线型

      4：border-left-style:dotted;           左边框的线型

      边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)可单独设置一方向边框

      border-style:solid dashed dotted double;    border-style 的复合式写法

      1：border-top-color:#f00;           上边框的颜色

      2：border-right-color:#ff0;           右边框的颜色

      3：border-bottom-color:#00f;        下边框的颜色

      4：border-left-color:#fff;           左边框的颜色

      border-color:#f00 #ff0 #00f #fff;  border-color 的复合式写法

      如果边框的属性值我用1、2、3、4、来代替，那么它们的复合式写法可有以下几种：

      1：border:1；2；3；4； ：1、上 ；2、右 ；3、下； 4、左

      2：border:1；2；3；    ：1、上；2、左和右3、下

      3：border:1；2；       ：1、上和下；2、左和右

      4：border:1；          ：1、上、下、左、右  

      复合式写法：分开设置每个边的边框样式

      1：border-top:#f00 solid 10px;   

      2：border-right:#0f0 dotted 20px;

      3：border-bottom:#00f dashed 30px;

      4：border-left:#fff double 40px;

      border：10px solid #ff0;      代表四个边框样式是统一的，最复合式的写法；

注：边框的大小，是会添加在元素原有大小之外的，会改变元素原本的大小；也就是说边框是占位置的（在标准盒模型的情况下）。

      可以用来控制父元素和子元素之间的位置关系

      可以用来控制元素和内容之间的位置关系

      再给盒子添加了padding值之后，padding值会把元素原有的盒子大小撑大，如果让元素原本盒子大小不变得话，需要在元素的宽高上减掉所加的padding值。 padding属性对背景图片是不起作用的，可以说背景图片的位置，是不受padding的影响的。如果元素本身有背景色，那么背景色会延展到padding区域。

padding的使用方法

方法一：给盒子单个方向加padding值

      1：padding-top:10px;         上填充

      2：padding-right:10px;        右填充

      3：padding-bottom:10px;      下填充

      4：padding-left:10px;          左填充

 方法二：给盒子所有方向加padding值（复合式写法）

      1：padding： 1   2    3   4  ：  1、上；2、右；3、下；4、左

      2：padding： 1   2    3      ：  1、上；2、左和右；3、下

      3：padding： 1   2           ：  1、上和下；2、左和右

      4：padding： 1               ：  1、上 、右、 下、 左

      用来控制同辈元素之间的位置关系。

      margin是显示在元素边框以外的空白区的，给元素加上的margin值是不需要减去的，而且margin属性的值可以施加负值。

方法一：给盒子单个方向加margin值

      1：margin-top:10px;         上外边距

      2：margin-right:10px;        右外边距

      3：margin-bottom:10px;      下外边距

      4：margin-left:10px;         左外边距

方法二：给盒子所有方向加margin值（复合式写法）

      margin：1   2    3   4        ：1、上；2、右；3、下；4、左

      margin：1   2    3            ：1、上；2、左和右；3、下

      margin：1   2                 ：1、上和下；2、左和右

      margin：1                     ：1、上、右、下、左

      在盒模型中margin属性除了可以设置外边距以外，还可实现元素水平居中：margin：0 auto；、margin-left:auto;、margin-right:auto;共三种属性值。

      在盒模型中margin属性是可以写负值的，可以用此来实现元素位置调整，而且margin的值是不会影响到元素的实际大小，但是会影响到其他元素所占区域。

      盒模型中如果给多个元素设置margin值，上下两个相邻元素之间的margin值会重叠显示，会用相邻元素margin的最大值显示

      在盒模型中当给元素里第一个子元素（块状元素）添加margin-top值的时候，会错误的把这个margin-top值添加给父元素。此条件建立在当前元素下没有浮动和边框的条件下。

      这两种bug都可以用BFC解决，其中bug2给大家推荐几种方法：

      方法1：给父元素添加overflow：hidden；属性（比较好用）

      方法2：给父元素添加边框

      方法3：把元素中的margin属性改用padding属性

      方法3：给父元素和子元素添加浮动属性

      最后给大家提示一下：margin就是用来控制同辈元素之间的位置关系；padding就是用来控制父子元素之间的位置关系。

      标准盒模型和怪异盒模型区别就在于他们的组成部分

      宽高组成content+padding+border+margin

      元素宽度实际占有的位置大小：宽+左右padding+左右border+左右margin

      元素高度实际占有的位置大小：高+上下padding+上下border+上下margin

      元素的宽度：width（content+border+padding）+margin

      属性：box-sizing: border-box（怪异盒模型）/content-box（标准盒模型）

      相较而言，标准盒模型的组成属性是分开组成的，而怪异盒模型的content、border、padding属性可以看做一个组成部分，再加上margin属性由此构成了整个怪异盒模型

      从盒模型的定义中我们了解到了盒模型是由4个部分组成，那么盒子的大该如何计算呢？由定义我们可以想到盒子的大小应该是：内容区（content）+填充区（padding）+边框（border）+外边距（margin）=盒子大小。但是，在盒模型这四个属性中除了content属性其余属性值都有4个属性，那么盒子的宽高大小可以用此方法计算：

      由margin-left+border-left+padding-left+width(content内容元素的宽度)+padding-right+border-right+margin-right=元素的总宽度。如下图2-1、2-2所示

                                                                  图2-1

                                                                   图2-2

盒子元素的高度:

      由margin-top+border-top+padding-top+height(content内容元素的高度)+padding-right+border-right+margin-right=元素的总宽度。如下图2-3、2-4所示

                                                              图2-3

                                                                    图2-4

       作为一名新手，在H5中我只是初入，可谓是入门都没有踏进，所以在后面的日子里需要去努力成长，去拼搏，当然这些都是我个人的想法，此外感谢看到这里大佬和朋友，在这里看了一段白话，因为本人文采并不是特别好，又是初入H5，所以文中有些不顺望大家谅解。

什么是盒模型？

　　css盒模型是在网页设计中经常用到的css技术所使用的一种思维模型！

　　在网页中，css盒模型主要4个部分组成，有Content（内容）-Margin（外边距）-Border（边框）-Padding（内边距） 

　　

　　在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容，元素的补白，元素的边框，元素的边界四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

　　一般可以将一个块元素看成一个盒子形状的模型。这个模型的主体部分是元素的内容部分。用来显示元素中的主要信息，这个部分由width（宽度）属性和height（高度）属性来控制。在内容部分之外是补白部分，由padding（补白）属性控制。在补白部分之外是元素的边框，由border（边框）属性控制。在盒模型的最外面是边界部分，由margin（边界）属性控制

 

　　*IE盒子模型的content部分把border和padding计算进去了