标签显示模式
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:上内边距,右内边距,下内边距,左内边距
这里注意合并写法规则和外边距一样,一个数表示四边,两个值表示上下,左右,三个值表示上,左右,下,四个值表示上,右,下,左。