css中标签显示模式、块元素、行内元素、行内块元素、显示模式转换

标签显示模式display:

HTML标签一般分为块标签（块元素：block-level）和行内标签（行内元素：inline-level）两种类型，但是还有第三种说法行内块元素：table-row-group：设置元素为表格行组显示，display值总结如下表：

块元素block-level：

独占一行，可以设置宽度、高度、对齐等属性，常见的块标签：h1~h6、p、div、ul、ol、li等。

行内元素（内联元素）inline-level:

一行可排列多个行内元素，一般不能设置宽度、高度、对齐等属性，但是水平方向的margin和padding可以设置，宽度和高度由内容决定，常用于控制页面文本的样式，常见的行内标签：a、strong、b、em、i、del、s、ins、u、span等。 行内块元素： 在行内标签中有几个可以设置宽度和高度的元素如：img、input、td等，通常被称为行内块元素，其特点：在同一行上面，但是可以设置宽度高度，相邻元素之间有空白间隙。

显示模式转换：

行内元素可以转换成块元素，块元素也可以转换为行内元素，也可以把元素直接转换成行内快元素，行内块元素可以看成文本，转换后各自的属性特点变成对应的转换后的属性特点。

 span{display:block;/* 把行内元素转换为块元素 */}div{display:inline;/* 把块元素转换为行内元素 */}div,span{display:inline-block;/* 把元素转换为行内快元素 */}

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

css中标签显示模式、块元素、行内元素、行内块元素、显示模式转换相关推荐

Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加：1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
DIV+CSS中标签dl dt dd常用的用法
< dl>< /dl>用来创建一个普通的列表, < dt>< /dt>用来创建列表中的上层项目, <dd>< /dd>用来创建列 ...
如何使用 CSS 中的重置（reset）属性来重置元素在网页中的默认样式
嗨,大家好!今天,我要和你们聊聊CSS中的"重置"属性,也就是让我们一起来重置一下网页中元素的默认样式吧! 首先,让我们来看看一些常见的元素有什么特点,也就是需要"重置& ...
css中设置首行文本缩进的属性是,css如何设置首行文字缩进？
在HTML网页中通常一段文字都需要设置首行缩进两个文字,使页面更加美观,我们可以通过css实现这一效果,下面我们就来看一下使用css设置首行文字缩进的方法. css可以使用text-indent属性来 ...
深入理解CSS中的line-height的使用
深入理解CSS中的line-height的使用什么是line-height(行高)? line-height 是指两行文字基线之间的距离. 什么是基线? 基线.底线.顶线.中线注意: 基线(bas ...
问答：如何规划CSS 中的命名方式如何看待 CSS 中 BEM 的命名方式？
好多盆友很纠结 css命名规则怎么弄,还没起步就被绊住了,那么今天蝈蝈就针对这个问题来讨论一下没什么技术含量,但却对效率开发至关重要的 "问题". 下文是一些知乎大神的个人 ...
css中文本指什么,CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
一.px(像素) [绝对单位,页面按精确像素展示] px就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率. px表示像素 (计算机屏幕上的一个点:1px = 1/96in),是绝对单位,不 ...

css中标签显示模式、块元素、行内元素、行内块元素、显示模式转换

css中标签显示模式、块元素、行内元素、行内块元素、显示模式转换相关推荐

最新文章

热门文章