CSS | 盒子模型

目录

1、CSS 边框

1.1、border-style：

1.2、border-width：

1.3、border-color：

1.4、border：

2、CSS 外边距

3、CSS 内边距

 4、块元素、行内元素和行内块元素

---

所有的HTML元素都可以看作盒子，在css中，盒子模型这一术语是用来设计和布局时使用的。

CSS盒模型包括：外边距（margin）、边框（border）、内边距（padding），和实际内容。下图是盒子模型（Box Model）的说明：

 蓝色部分就是盒子的实际内容，可以通过width和height指定其宽高。

各部分说明：

Margin（外边距）：没有背景颜色，是完全透明的。

Border（边框）：边框受盒子的背景颜色影响。

Padding（内边距）：会受到框中填充的背景颜色影响。

Content（内容）：盒子的内容，显示文本和图像，通过width和height指定其宽高。

1、CSS 边框

1.1、border-style：

该属性用来定义边框样式，常用的值有：

• none：默认无边框
• solid：实线边框
• dotted：点线边框
• dashed：虚线边框

border-style属性可以有1-4个值：

• 4个值：分别指定上、右、下、 左的边框的样式
• 3个值：分别指定上、左右、下的边框的样式
• 2个值：分别指定上下、左右的边框的样式
• 1个值，分别指定上下左右的边框的样式

1.2、border-width：

 该属性为边框指定宽度

1.3、border-color：

该属性设置边框的颜色，它一次最多接收4个颜色值。可以设置的颜色：

• name -指定颜色的名称，如“red”
• RGB -指定RGB值，如“rgb（255,0,0）”，使用rgba的话可以额外设置透明度
• Hex -指定16进制，如“#fff”

您可以设置边框颜色为“transparent”，实现边框透明的效果。

1.4、border：

简写属性，把边框的所有属性一起声明，其中brder-style是一定要写的。

2、CSS 外边距

margin：设置盒子的外边距的大小，和border-style一样，可以设置1-4个值。

margin-top、margin-bottom、margin-left、margin-right分别设置盒子的上、下、左、有的内边距。

3、CSS 内边距

padding：设置盒子的内边距的大小，和border-style一样，可以设置1-4个值。

padding-top、padding-bottom、padding-left、padding-right分别设置盒子的上、下、左、有的内边距。

 4、块元素、行内元素和行内块元素

---

块元素的特点：

• 自身独占一行；
• 高度、宽度、内外边距都可以自定义；
• 高度默认是内容撑开，宽度默认是父元素的100%；
• 块元素里可以放行内、行内块、块元素，（但有一个例外：文字元素不能放块元素，比如p标签和标题标签不能放div）；

 常见块元素：

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> 

其中div是最常用的块元素

---

 行内元素的特点：

• 相邻行内元素在一行，一行可以显示多个；
• 默认大小由内容撑开，不能设置高度、宽度；
• 行内元素只能容纳行内元素和文本；

 常见行内元素：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

其中span是最常用的行内元素

---

行内块元素的特点：

• 默认大小由内容撑开，但是也可以自己设置宽高；
• 可以一行显示多个；

常见行内块元素：

 <img />、<input />、<td> 

---

三者之间的转换：

• 转换为块元素：display:block;
• 转换为行内元素：display:inline;
• 转换为行内块：display: inline-block;