盒模型是什么

盒模型的简介

盒子(box):css将每个元素在文档中都生成一个在矩形区域并且占据一定的空间,这个矩形区域就相当于我们日常生活中盒子,比如买手机时,手机会用一个盒子包装。

模型(model):模拟盒子(元素)的形态(盒子有哪些部分组成),根据CSS盒子模型将文档中的元素转换为一个个盒子。

总结:盒模型就是模拟盒子的形态,规定元素渲染成什么样子(矩形),由哪些部组成(4个区域组成),占据文档多少空间(元素的尺寸).

盒子的类型

CSS中display属性表示盒子的显示类型
display常用值:
inline(默认值) 该元素显示为行盒，行盒不换行，水平排列。
block 该元素显示为快盒，快盒独占一行。
inline-block 该元素显示为行内块盒。
就是具有行内元素的包裹性并且不会占据一行,又具有快级元素的特性也就是可以设置宽高。
inline-block特点:

1. 不独占一行，还是水平排列
2. 盒模型中所有尺寸都有效

浏览器设置默认样式中表设置的块盒:容器元素、h1-h6、p,这些属性浏览器会设置为快盒。

盒模型的组成

跟装手机的盒子一样都由content padding boder margin组成。

content padding boder这个三个属性会影响可见盒子的大小,因为盒子的可见大小包含这个三个属性,而margin则影响盒子占据文档的空间。

1.content(内容区):
就像装手机的盒子一样，内容区用来放内容(文本和元素)的，手机盒子的中间部分(内容区)用来放手机的。在css中width和height属性默认设置的就是内容区的宽度和高度。

2.padding(内填充):
就像盒子里面周围的泡沫一样，用来将手机和盒子的边缘隔开，以便移动过程中手机发生碰撞,在css里内填充就是内容区到边框的距离。

在css中用padding属性设置盒子的内填充；
padding-left:表示左内填充。
padding-right:表示右内填充。
padding-top:表示上内填充。
padding-bottom:表示下内填充。

内容区(padding)+填充区(content)的区域叫做填充盒(padding-box)

简写属性:padding用于设置四个方向的内填充。
简写属性值:
设置四个值:padding:上 右 下 左。
设置三个值:padding: 上 左右 下。
设置二个值:padding: 上下 左右。
设置一个值:padding: 上下左右。

例如: padding:10px 20px; 设置上下为10px,左右为20px。

注: 简写属性就是语法糖实际上浏览器还是才拆开来按照上面四个方向去设置。

3.border(边框):
就像装手机的盒子的外壳(边缘)，用来限定盒子范围。
在CSS中用boder属性设置:

border-width:边框的4个方向宽度。
boder-color:边框4个方向颜色,该颜色默认值是字体的颜色值。
border-style:边框4个方向样式。

边框+填充区+内容区的区域叫边框盒(border-box)

注:这些属性和padding 属性一样都有四个方向的属性这些属性都是简写属性。

这些属性的简写属性是boder:
border:4个方向的width 4个方向的color 4个方向的样式。
例如:boder:1px solid red。

4.margin(外边距):
盒子到其它盒子的距离叫做外边距(就是盒子外面会有一层空白区域,增加外边距,会将其他元素从当前盒子周围“推开”)。这是最外面的区域，是盒子和其他元素之间的空白区域。

在css中用margin属性设置:
margin-left 左内边距(增加边框左外距离)
margin-right 右内边距(增加边框右外距离)
margin-top 上内边距(增加边框上外距离)
margin-bottom 下内边距(增加边框下外距离)

简写属性:margin
属性值情况:
设置四个值:margin:上 右 下 左。
设置三个值:margin: 上 左右 下。
设置二个值:margin: 上下 左右。
设置一个值:margin: 上下左右。

例如: margin:10px 20px; 设置上下为10px,左右为20px。

注:margin可以为负值(更新中)。

box-sizing属性

表示设置宽高的区域
值:
content-box: 默认值，内容盒，宽高设置的是内容盒(content-box)
border-box: 边框盒，也叫Ie盒怪异盒模型,宽高设置的是边框盒(可见框区域content+padding+border)，而该盒的内容区为自适应，自动计算包含块的剩余空间。

改变背景覆盖范围

默认情况下,背景覆盖边框盒
可以通过background-clip进行修改

断词规则

当元素内容显示不下会换行
word-break属性,会影响文字在什么位置换行
属性值:
nomral:普通。CJK字符(文字位置截断)，非CJK字符(单词位置截断)
break-all:截断所有,所有字符都在文字处截断。
keep-all:保持所有。所有文字都在单词之间截断（浏览器认为由空格绝对是否是一个单词,没有空格认为是一个单词）。

溢出处理

默认情况下,盒子的宽高不够,内容会溢出盒子并且可见
可以通过overflow处理溢出。

行盒盒模型

常见行盒:包含具体内容的元素。
span、a、img、video、audio等。

1.盒子沿着内容延伸,下一个行盒的头部接着上一个行盒的尾部(像一条蛇),
内容在哪行盒就在哪,内容在哪结束,行盒就在哪结束。

2.行盒设置宽高无效,因为行盒是根据内容决定宽高的,调整行盒的宽高因该是
字体大小、行高、字体类型间接调整。

3.内边距:左右padding可以设置,上下padding能设置但是只能看到效果(也就是可以看到内边距的效果)不占据文档实际空间。

4.边框:上下boder可以设置,上下boder能设置但是只能看到效果不占据问文档实际空间。

5.外边距:左右margin可以设置,上下margin可以设置但是不会占据实际空间。

空白折叠

在源代码中的连续空白符(空格、换行、制表)，在显示页面时,会被折叠为一个空格,发生在行内块元素/行盒之间。在网页中空格也可以是英文单词的分隔符。

空白折叠的好处:
用于将源代码的书写和页面的内容区分开，源代码的书写不会影响到页面上。
有时候要让代码变的好看一点会在代码前加两个缩进或在源代码里面将文字换行,这样就方便阅读代码。
我肯定是希望源代码中的换行不会显示到页面上，所以默认会将源代码和页面显示区分开。

解决方法:

1. 代码不换行，将代码写在一行上并且不能有空格。
2. font-size:0，原因是空格换行等和文字一样也是字符，font-size实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。

注:如果是没有行内元素包裹的文字，则文字外面会自动生成一个匿名行内框来包裹文字。