html行内元素和块级元素有哪些_html常见的块元素与内联（行内）元素用法说明...

html平时常见的块元素有&＃xff1a;div, p, h1, h2, h3等&＃xff0c;内联元素有&＃xff1a;span, a, img等。

块元素的属性&＃xff1a;无论内容是什么&＃xff0c;都会独占一整行。主要用于页面布局。

内联元素的属性&＃xff1a;只占自身大小的元素&＃xff0c;不会占用一行。主要用于选中文本设置样式。

div块元素仅仅只用于进行页面布局&＃xff0c;它自身不带任何默认样式。

span内联元素可以用来选中文本设置文本的样式&＃xff0c;其自身不会带默认样式。

一般情况下&＃xff0c;只使用块元素包含内联元素&＃xff0c;而不会使用内联元素去包含块元素。

a元素可以包含任意元素&＃xff0c;除了其本身。

p元素不可包含任何的块元素。

块元素之div&＃xff1a;

p 尔来四万八千岁&＃xff0c;不与秦塞通人烟。西当太白有鸟道&＃xff0c;可以横绝峨眉巅。

p 尔来四万八千岁&＃xff0c;不与秦塞通人烟。西当太白有鸟道&＃xff0c;可以横绝峨眉巅。

p 尔来四万八千岁&＃xff0c;不与秦塞通人烟。西当太白有鸟道&＃xff0c;可以横绝峨眉巅。

p width&＃61;300px 尔来四万八千岁&＃xff0c;不与秦塞通人烟。西当太白有鸟道&＃xff0c;可以横绝峨眉巅。

p width&＃61;500px 尔来四万八千岁&＃xff0c;不与秦塞通人烟。西当太白有鸟道&＃xff0c;可以横绝峨眉巅。

h2 蜀道难

h3 蜀道难

h3 width&＃61;300px 蜀道难

h3 width&＃61;500px 蜀道难

效果显示(默认在谷歌浏览器下)&＃xff1a;

从上面的效果图中&＃xff0c;可以看出&＃xff0c;有些块元素和内联元素会自带默认样式&＃xff0c;比如&＃xff1a;p, h1, h2, h3

p自带默认样式为&＃xff1a;

p { display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px;}

h1自带默认样式&＃xff1a;

h1 { display: block; font-size: 2em; margin-block-start: 0.67em; margin-block-end: 0.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;}

h2自带默认样式&＃xff1a;

h2 { display: block; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;}

h3自带默认样式&＃xff1a;

h3 { display: block; font-size: 1.17em; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;}

当然还有body元素也会带默认样式&＃xff1a;

body { display: block; margin: 8px;}