html中的区块元素和内联元素
1、html中区块元素和内联元素的区别
区块元素的特点:
- 每个元素独占一行,默认情况下宽度等于父元素的宽度
- 不设置高度时,高度为0,有内容时高度由内容撑开,不解析换行符
- 可以设置width、height、margin、padding属性
- dispaly:block
常用的区块元素有:
- div(盒子)、 address( 定义地址)
- ul(无序列表)、ol(有序列表)、li(列表的项)
- dl(定义列表)、dd(定义列表中定义条目)、dt(定义列表中的项目)
- p(段落)、h1~h6(网页中的标题,从大到小)
- table(表格)、td(标准单元格)、tr(行)、th(表头单元格)
- form(表单)、pre(预格式化文本)、hr(分割线)
- caption (表格标题)、thead(表格表头)、tbody(表格主体)
内联元素的特点:
- 相邻的元素会排列在同一行,排不下时会自动换行
- 不支持宽高属性,宽高完全由内容撑开,会解析换行符
- 使用部分样式会出错(上下margin和padding等),只能设置margin-left、margin-right、padding-left、padding-right.(可以出现效果)
- dispaly:inline
常见的内联元素有:
- span(行间元素) 、textarea(多行文本输入控件)
- b(加粗)、strong(加重)、i(斜体)、em(着重)
- sub(下标)、sup(上标)
- ins(插入)、del(删除)、br(换行)、a(定义锚以及超链接)
- img(图片)、input(表单项)、label(表单标记)
- big(大号字体加粗)、small9(呈现小号字体效果)
- code(定义计算机代码文本)、q(定义短的引用)、select(定义单选或者多
虽然input和img都是行内元素,但是它们是可以设置宽和高的。主要是因为它们是内敛块元素。
内敛块元素的特点:
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,即:
-
和其他元素都在一行上;
-
元素的高度、宽度、行高以及顶和底边距都可设置。
常见的内敛块元素有: -
img(图片)
-
input(表单项)
-
iframe(框架)
-
canvas(画布)
-
video(视频)
-
audio(音频)
同时也提到了替换元素和不可替换元素,如下:
替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容,如img标签,在我们查看代码时图片不显示,但是在窗口可以显示出来
不可替换元素 html 的大多数元素是不可替换元素,即其内容直接表现给用户端,如p标签,标签内的内容在查看代码时会显示出来。
主要用的三个CSS样式有:
- dispaly:block-----块级元素
- dispaly:inline-----内联元素
- dispaly:inline-block–内联块元素、同行显示并可修改宽高内外边距等属性
三个样式可以相互设置转化
~~写在后面的一点个人见解:对于内联元素使用上下margin和padding样式出错的问题的一点解释:W3C标准中讲到padding适用于所有元素,但是给内联元素设置上下padding时为何出错呢?这是由于内联元素不支持宽高,即使设置了上下padding在浏览器中不会显示,但并不会影响其他元素。margin也能用于内联元素,这是规范所允许的,但是margin-top和margin-bottom对内联元素(对行)的高度没有影响,并且由于边界效果(margin效果)是透明的,他也没有任何的视觉影响。这是因为边界应用于内联元素时不改变元素的行高度。