CSS:标签显示模式与盒子模型

文章目录

标签显示模式
- 块元素
- 行内元素
- 行内块元素
- 标签显示模式的转换：
盒子模型
- 外边距（margin）
- 边框
- - 补充知识：
- 内边距(padding)

标签显示模式

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素

块元素

特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素(就是行内元素)和其他块元素。

行内元素

特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。

行内块元素

在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性，我们将这些称为行内块元素。

特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

标签显示模式的转换：

既然有行内元素，有块元素和行内块元素，那么自然有三者之间的转换。
转换，我们只需要要在css样式设置时写上相对应的转换代码。
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;

盒子模型

盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

一个盒子的是由最外边的外边距，然后到盒子边框，然后到盒子的内边距，最后也是最里面的就是文本可写的实际内容，外边距和内边距都是用来撑开盒子的，他们是用空白填充位置，通常这里不能放置其他内容。

外边距（margin）

margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
合并写法：margin:上外边距右外边距下外边距左外边

取值：填取的值都是像素，注意在合并写法里面，

如果填写一个值，那么这个值代表上下左右都是取这个值
如果填写两个值，那么第一个值代表上下，第二个值代表左右
如果填写三个值，那么第一个值代表上，第二个值代表左右，第三个值代表下
如果填写四个值，这个四个值依照顺序代表上，右，下，左

边框

边框样式总结：

补充知识：

表格边框合并：
我们可以用一句话做到表格边框的合并，只需要在css中设置为：
boder-collapse:collapse;

圆角边框：
我们可以通过设置边框的弧度来设置角的形状
boder-radius:50%;
注意50%时是将其设置为了一个圆；

内边距(padding)

padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
合并写法：padding：上内边距，右内边距，下内边距，左内边距

这里注意合并写法规则和外边距一样，一个数表示四边，两个值表示上下，左右，三个值表示上，左右，下，四个值表示上，右，下，左。