盒模型
1.什么是标签的显示模式
-
什么是标签的显示模式？
标签以什么方式进行显示，比如div自己独占一行，比如span一行可以放多个
-
作用：
我们网页的标签非常多，在不同地方会用到不同类型的标签，以便更好的完成我们的网页。
-
标签的类型（分类）
HTML标签一般分为块标签和行内标签两种类型，也称为块元素和行内元素。
box:盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子（CSS概念）类型：
-
行盒，display等于inline的元素（HTML的概念）
-
块盒，display等于block的元素
行盒在页面中不换行、块盒独占一行
display默认值为inline
浏览器默认样式表设置的块盒：容器元素、h1~h6、p
常见的行盒：span、a、img、video、audio
2.盒子的组成部分
无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：
以下是块盒中的属性
2.1 内容 content
width、height，设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
2.2 内边距 padding（填充）
2.2.1 内边距
padding属性用于设置内边距。是指 边框与内容之间的距离
2.2.2 设置
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
值的个数不同表达的意思不同
padding：简写属性
padding：上 右 下 左
| 值的个数 | 表达意思 |
|---|---|
| 1个值 | padding：上下左右内边距； |
| 2个值 | padding：上下内边距 左右内边距 |
| 3个值 | padding：上内边距 左右内边距 下内边距 |
| 4个值 | padding：上内边距 右内边距 下内边距 左内边距 |
填充区+内容区 = 填充盒 padding-box
2.2.3 内盒尺寸计算（元素实际大小）
2.2.4 padding不影响盒子大小情况
如果没有给一个盒子指定宽度，此时，如果给这个盒子指定padding，则不会撑开盒子。
2.3 盒子边框 border
-
语法：
border:border-width || border-style || border-color
边框 = 边框宽度 + 边框样式 +边框颜色（没有顺序）
border:简（速）写属性
border:样式 宽度 颜色
例：border: 1px solid red;
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
-
边框的样式：
-
none：没有边框即忽略所有边框的宽度（默认值）
-
solid：边框为单实线（最为常用的）
-
dashed：边框为虚线
-
dotted：边框为点线
-
边框 + 填充区 + 内容区 = 边框盒 border-box
例：test2
盒子边框写法总结表
很多时候我们不需要指定4个边框，我们可以单独给4个边框分别指定。
表格的细线边框
-
通过表格的 cellspacing = “0”，将单元格与单元格之间的距离设置为0
-
但是两个单元格之间的边框会出现重叠，从而使边框变粗
-
通过CSS属性：
table{ border-collapse:collapse; }
-
collapse单词是合并的意思
-
border-collapse: collapse; 表示相邻边框合并在一起
2.4 外边距 margin
2.4.1 外边距
margin属性用于设置外边距。margin就是控制盒子和盒子之间的距离
2.4.2 设置
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
margin值的简写（复合写法）代表意思 跟padding完全相同。
margin：速写属性
margin：上 右 下 左
2.4.3 块级盒子水平居中
-
可以让一个块级盒子实现水平居中必须：
-
盒子必须指定了宽度（width）
-
然后就给左右的外边距都设置为auto
-
实际工作中常用这种方式进行网页布局，示例代码如下：
.header{ width:960px; margin:0 auto; }
常见的写法，以下三种都可以：
-
margin-left : auto; margin-right : auto;
-
margin : auto； (上下左右)
-
margin : 0 auto;
2.4.4 文字居中和盒子居中区别
-
盒子内文字水平居中 text-align : center，而且还可以让 行内元素和行内块居中对齐
-
块级盒子水平居中 左右margin 改为 auto
text-align: center; /* 文字 行内元素 行内块元素水平居中*/
margin: 10px auto; /* 块级盒子水平居中 水平margin 改为 auto 就可以了 上下margin都可以*/
2.4.5 插入图片和背景图片区别
-
插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
-
背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position
img {
width: 200px;/*插入图片更改大小width和height*/
height: 210px;
margin-top: 30px;/*插入图片更改位置，可以用margin或padding盒模型*/
margin-left: 50px;/*插入当图片也是一个盒子*/
}
div {
width: 400px;
height: 400px;
border: 1px solid puple;
background: #fff url(1.jpg) no-repeat;
background-position: 30px 50px;/*背景图片更改位置 用background-position*/
}
2.4.6 清除元素的默认内外边距（重要）
为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除
代码：
这是以后我们写CSS代码的第一个代码
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
注意：
-
行内元素 为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距（设置了也不会显示）。
2.4.7 外边距合并
只给 margin-bottom:30px;/margin-top:30px;
3.盒子模型布局稳定性
4. 块级元素（block-level）
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素
5. 行内元素（inline-level）
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素，有的地方也称内联元素
6. 行内块元素（inline-block）
在行内元素中有几个特殊的标签—<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素
7. 三种模式总结区别
8. 标签显示模式转换 display
-
块转行内：display: inline;
-
行内转块：display: block；
-
块、行内元素转换为行内块：display: inline-block;
此阶段，我们只需关心这三个，其他的是我们后面的工作。
标签：盒子,CSS08,border,模型,元素,边框,padding,margin From： https://www.cnblogs.com/zjy1020/p/17253080.html