html常见的块元素与内联（行内）元素用法说明

html平时常见的块元素有：div, p, h1, h2, h3等，内联元素有：span, a, img等。

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

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

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

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

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

a元素可以包含任意元素，除了其本身。

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

专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
块元素之div：<br><div style="background-color: blueviolet">div 噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！</div><div style="background-color: blue">div 噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！</div><div style="background-color: chartreuse">div 噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！</div><div style="background-color: chocolate; width: 300px;">div width=300px 噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！</div><div style="background-color: blue; width: 500px;">div width=500px 噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！</div>块元素之p：<br><p style="background-color: blue">p 尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。</p><p style="background-color: chocolate">p 尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。</p><p style="background-color: chartreuse">p 尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。</p><p style="background-color: green; width: 300px;">p width=300px 尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。</p><p style="background-color: red; width: 500px;">p width=500px 尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。</p>块元素之h(h1, h2, h3)：<br><h1 style="background-color: red">h1 蜀道难</h1><h2 style="background-color: green">h2 蜀道难</h2><h3 style="background-color: blue">h3 蜀道难</h3><h3 style="background-color: pink; width: 300px;">h3 width=300px 蜀道难</h3><h3 style="background-color: yellow; width: 500px;">h3 width=500px 蜀道难</h3>内联元素之span：<br><span style="background-color: red">西当太白有鸟道，可以横绝峨眉巅。</span><span style="background-color: green">西当太白有鸟道，可以横绝峨眉巅。</span><span style="background-color: blue">西当太白有鸟道，可以横绝峨眉巅。</span><br>内联元素之a：<br><a href="#" style="background-color: yellow">地崩山摧壮士死，然后天梯石栈相钩连。</a><a href="#" style="background-color: blue">地崩山摧壮士死，然后天梯石栈相钩连。</a><a href="#" style="background-color: red">地崩山摧壮士死，然后天梯石栈相钩连。</a><a href="#" style="background-color: green">地崩山摧壮士死，然后天梯石栈相钩连。</a>

效果显示（默认在谷歌浏览器下）：

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

p自带默认样式为：

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

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;
}

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;
}

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;
}
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

当然还有body元素也会带默认样式：

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

html常见的块元素与内联（行内）元素用法说明相关推荐

行内元素和块级元素：内联(行级)元素不能设置margin-top
内联(行级)元素不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置margin-left和margin-righ ...
html外联内联,HTML内联元素
用于标记段落里的文本和其他内容组的元素种类很多,本文将这些文本级元素进行简单分类,便于整理和记忆通用容器元素是短语内容的通用行内容器,并没有任何特殊语义.可以使用它来编组元素以达到某种样式意图(通 ...
CSS显示：内联vs内联块[重复]
本文翻译自:CSS display: inline vs inline-block [duplicate] Possible Duplicate: 可能重复: What is the differen ...
html行内元素转为块级元素,前端面试题-行内元素和块级元素
一.行内元素一个行内元素只占据它对应标签的边框所包含的空间. 二.块级元素块级元素占据其父元素(容器)的整个空间,因此创建了一个"块".通常浏览器会在块级元素前后另起一个新行. ...
CSS之块、行内、行内块元素
块元素独占一行如h1-h6.p.div.ul.ol.li等: 宽高内外边距可以调: 宽度默认是父级宽度100%: 都是容器盒子,里面可以放行内或块级元素. 注意点:文字类元素如p. ...
块元素div转变为行内块元素之后如何消除之间间隙
块元素div转变为行内块元素之后如何消除之间间隙写了三个div,使其变成行内块元素之后,发现,有间隙,哟,我的小天使啊. 最外层父级div宽度width大于三个小div宽度之和父级div: #aa ...
行转换html,块级、行内、行内元素相互转换
块级.行内.行内元素相互转换 html> 块级.行内.行内块元素相互转换 *{margin: 0px;padding: 0px;} body{background: url(images/5.j ...
C++ 内联函数详解（搞清内联的本质及用法）
目录一.什么是内联函数 1.直观上定义: 2.更深入的思考: 二.为什么使用内联函数 1.为什么要代替部分宏定义 2.普通函数频繁调用的过程消耗栈空间 3.更深入的思考三.内联函数和编译过程的相爱 ...
java 内联_Java内联类初探
java 内联重要要点 Valhalla项目正在开发内联类,以提高Java程序对现代硬件的亲和力内联类使开发人员能够编写行为更像Java内置基元类型的类型内联类的实例不具有对象标识,这带来了许多 ...
块、内联、内联块都有哪些及其特点
块元素常见块元素:div,p,ul,li,ol,dl,dt,dd,h1~h6,hr 特点: a)块元素以块的形式显示为一个矩形区域,默认宽度为100%,等于父元素宽 ...

html常见的块元素与内联（行内）元素用法说明

html常见的块元素与内联（行内）元素用法说明相关推荐

最新文章

热门文章