![b4f6e9dc86423a0dea6a1661f627bc9c.png](https://i-blog.csdnimg.cn/blog_migrate/8273b83c56c0fec1be80da857f68b48d.jpeg)
html平时常见的块元素有:div, p, h1, h2, h3等,内联元素有:span, a, img等。
块元素的属性:无论内容是什么,都会独占一整行。主要用于页面布局。
内联元素的属性:只占自身大小的元素,不会占用一行。主要用于选中文本设置样式。
div块元素仅仅只用于进行页面布局,它自身不带任何默认样式。
span内联元素可以用来选中文本设置文本的样式,其自身不会带默认样式。
一般情况下,只使用块元素包含内联元素,而不会使用内联元素去包含块元素。
a元素可以包含任意元素,除了其本身。
p元素不可包含任何的块元素。
块元素之div:
div 噫吁嚱,危乎高哉!蜀道之难,难于上青天!蚕丛及鱼凫,开国何茫然!
div 噫吁嚱,危乎高哉!蜀道之难,难于上青天!蚕丛及鱼凫,开国何茫然!
div 噫吁嚱,危乎高哉!蜀道之难,难于上青天!蚕丛及鱼凫,开国何茫然!
div width=300px 噫吁嚱,危乎高哉!蜀道之难,难于上青天!蚕丛及鱼凫,开国何茫然!
div width=500px 噫吁嚱,危乎高哉!蜀道之难,难于上青天!蚕丛及鱼凫,开国何茫然!
块元素之p:
p 尔来四万八千岁,不与秦塞通人烟。西当太白有鸟道,可以横绝峨眉巅。
p 尔来四万八千岁,不与秦塞通人烟。西当太白有鸟道,可以横绝峨眉巅。
p 尔来四万八千岁,不与秦塞通人烟。西当太白有鸟道,可以横绝峨眉巅。
p width=300px 尔来四万八千岁,不与秦塞通人烟。西当太白有鸟道,可以横绝峨眉巅。
p width=500px 尔来四万八千岁,不与秦塞通人烟。西当太白有鸟道,可以横绝峨眉巅。
块元素之h(h1, h2, h3):
h1 蜀道难
h2 蜀道难
h3 蜀道难
h3 width=300px 蜀道难
h3 width=500px 蜀道难
内联元素之span:西当太白有鸟道,可以横绝峨眉巅。 西当太白有鸟道,可以横绝峨眉巅。 西当太白有鸟道,可以横绝峨眉巅。
内联元素之a:
地崩山摧壮士死,然后天梯石栈相钩连。 地崩山摧壮士死,然后天梯石栈相钩连。 地崩山摧壮士死,然后天梯石栈相钩连。 地崩山摧壮士死,然后天梯石栈相钩连。
效果显示(默认在谷歌浏览器下):
![56cddd1936f715e2c359080c94d01abb.png](https://i-blog.csdnimg.cn/blog_migrate/cb11ca32a847093414cc0155743f4272.jpeg)
从上面的效果图中,可以看出,有些块元素和内联元素会自带默认样式,比如:p, h1, h2, h3
p自带默认样式为:
p { display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px;}
![43bcafc94ff00f6c0f4788b8ba1d02c2.png](https://i-blog.csdnimg.cn/blog_migrate/a7ce3d8faa421a1b9bb4fae58fc1b022.jpeg)
h1自带默认样式:
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;}
![5c6dfe8b540de30abf379a93a33a6075.png](https://i-blog.csdnimg.cn/blog_migrate/71224386bfa5af087e29ee6558e37be8.jpeg)
h2自带默认样式:
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;}
![868cc23d6e52ba915f43b26231091232.png](https://i-blog.csdnimg.cn/blog_migrate/ba50111b7de550d7c0128048ccffbdee.jpeg)
h3自带默认样式:
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;}
![140ab071e99801c1b669288fe87500d5.png](https://i-blog.csdnimg.cn/blog_migrate/5470973b6cb44b23a829769edad5ebfb.jpeg)
当然还有body元素也会带默认样式:
body { display: block; margin: 8px;}
![c3b186c2a0df0c18d3ede5478d264786.png](https://i-blog.csdnimg.cn/blog_migrate/82bd31953af778d4250e0217a01cf35a.jpeg)