标签分类:
一、块标签:块标签是指本身属性为display:block;的元素。
1.默认占一行可以设置宽高,
2.在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度
3.在不设置高度的情况下,块级元素的高度是它本身内容的高度
4.块标签的居中问题:块级标签左右居中:先设置自身width;然后,margin: 0 auto;
常用的块标签
标签 | 描述 |
---|---|
div | 常用块级容器,也是css layout的主要标签 |
h1 | 大标题 |
h2 | 副标题 |
h3 | 三级标题 |
h4 | 四级标题 |
h5 | 五级标题 |
h6 | 六级标题 |
hr | 水平分隔线 |
menu | 菜单列表 |
ol | 有序列表 |
ul | 无序列表 |
li | 列表项 |
dl | 定义列表 |
dt | 定义术语 |
dd | 定义描述 |
table | 表格 |
p | 段落 |
form | 交互表单 |
二、行标签:行标签是指本身属性为display:inline;的元素。
1.默认不占一行,不可以设置宽高,大小根据内容来
2.内联元素只能容纳文本或者其他内联元素(此处请注意,不要在内联元素中嵌套块级元素)
3.子级行标签之间有间隙,可以把父级元素font-size设置为0,子级单独设置font-size
行标签居中:由于行标签自身不支持width,使用在父级元素设置text-alian : center
常用的行标签
标签 | 描述 |
---|---|
span | 常用内联容器,定义文本内区块 |
a | 锚点 |
b | 加粗 |
strong | 加粗强调 |
i | 斜体 |
em | 斜体强调 |
s | 中划线(不推荐使用) |
strike | 中划线 |
del | 文档中已被删除的文本 |
br | 强制换行 |
u | 下划线 |
textarea | 多行文本输入框 |
input | 输入框 |
select | 下拉列表 |
label | input 元素定义标注(标记) |
img | 引入图片 |
sub | 下标 |
sup | 上标 |
big | 大字体文本 |
small | 小字体文本 |
三、行内块标签:
1.默认不占一行,可以设置宽高
2.通过设置float属性也会将元素转换为行内块标签
通过定位属性fix, absolute都可以将元素转换为行内块标签
设置样式 display: inline-block;转换为行内块标签
总结:HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换:
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素
1.块状元素特征:(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起,默认排列方式为从上至下
2.行内元素特征:(1)设置宽高无效
(2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间
(3)不会自动进行换行
3.行内块状元素特征:(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右