html标签的显示模式（块级标签，行内标签，行内块标签）

今天讲课的时候，讲到了html中的标签的显示模式，大致分为块级标签和行内标签。那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用，比如宽、高、水平居中等，其实这个属性的使用只有在块级标签上使用才起作用。个人认为这个也是初学者非常容易忽略的地方，所以我就把它记下来！

比如会有一种情况，给p标签水平居中有作用，但是给font加水平居中属性就没作用（如下）：

1	`p{` `color:red;` `text-align:center;}<br>font{color:red;` `text-align:center;}`

1	`<p>我是块级标签p</p><br><font>我是行内标签font</font>`

运行预览之后p能使文本水平居中，但是font就不可以（如下）：

那么以上这个问题就和html中的显示模式有关了：

显示模式的特性：

主要分为两大类：

块级元素：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；

行内元素：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高！

其中还有一种结合两种模式有点的显示模式：

行内块元素：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；

在html中显示模式分为块级和行内，其中常用的块级有：div,p,h1~h6,ul,li,dl,dt,dd... 常用的行内有：span，font,b,u,i,strong,em,a,img,input，其中img和input为行内块元素。

那么有的同学就会想了，难道我就不可以控制span或者font的宽高了吗？可以的，那么我们这次抛开浮动和定位不说，就说通过display属性来将它们互相转换：

1、块级标签转换为行内标签：display:inline;

2、行内标签转换为块级标签：display:block;

3、转换为行内块标签：display：inline-block;

只要给对应的标签使用这个display这个属性，取相应的值，就可以将显示模式互相转换。

在这之前有说过 text-align这个属性是否生效，原因是块级标签如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽，那么在100%的宽度中居中生效；但是行内元素的宽完全是靠内容撑开，所以宽度就是内容撑开的宽，我们给个背景测试看看：

所以块级是在盒子中间居中了，但是因为行内元素的宽就是内容宽，没有可居中的空间，所以text-align:center;就没有作用；但是如果给font转换为块级就不一样了：

1 2	`p{` `background:green;` `color:red;` `text-align:center;}` `font{background:green;color:red;` `text-align:center;display:block;}`

同理，要是块级转换为行内了，文本也不能居中显示了。

因为在html中，行内元素被视为有文字特性的标签，块级能使文本水平居中，那么在块级当中的行内标签被视为文本的特性，那么块级使用text-align:center；的话，里面的行内标签会被像文本一样水平居中在块级标签中：

不加text-align:center；时：

1 2	`p{` `padding:5px;background:green;` `color:red;}` `font{` `background:yellow;}`

我是行内标签font 我是行内标签font

加上text-align:center;后

1 2	`p{` `padding:5px;background:green;` `color:red;text-align:center;}` `font{` `background:yellow;}`

这次主要是讲一下html中显示模式的特性，如果本文对您有帮助，记得推荐一下哦！

共勉！

转载于:https://www.cnblogs.com/lianghong/p/8001131.html

html标签的显示模式（块级标签，行内标签，行内块标签）（转）相关推荐

html行内元素转为块级元素,前端面试题-行内元素和块级元素
一.行内元素一个行内元素只占据它对应标签的边框所包含的空间. 二.块级元素块级元素占据其父元素(容器)的整个空间,因此创建了一个"块".通常浏览器会在块级元素前后另起一个新行. ...
行内元素与块级元素的区别，行内元素与块级元素分别有哪些
文章目录 1.块级元素 2.行内元素 3.行内块元素(融合了前两者的特点) 4.三个元素的转换 5.常用的行内元素 6.常用的块级元素 6.常用的块级元素 1.块级元素 1.总是从新的一行开始,即各个 ...
HTML哪些是块级元素，哪些是行内元素、
块级元素:块级大多为结构性标记 <address>...</adderss> <center>...</center> 地址文字 <h1> ...
在html中常见的块级元素有哪些,常见的css块级元素有哪些
css块级元素介绍: (学习视频分享:css视频教程) 根据W3C上的解释,就是说block(块级)元素是独占一行显示的.它的兄弟元素必定不会与其在同一行中(除非脱离了文档流).其实,通俗点来说,就是 ...
html标签的显示模式（块级标签，行内标签，行内块标签）
今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用,比如宽.高.水平居中等,其实这个属性的使用只有在块级标签上 ...
HTML基础-标签分类(闭合标签，空标签，块级元素，行内元素，行级块元素，可替换元素)
文章目录一.闭合标签和空标签二.位置特性(块级元素,行内元素,行级块元素) 块级元素(block) 行级元素(inline) 行内块元素(inline-block) 三.元素之间的转化四.可替换 ...
HTML中行级标签与块级标签都有哪些？
块级元素特征: 1.每个块级元素都独占一行,其后的元素只能另起一行,两个元素不能处在同一行(但可以通过float.display: inline和弹性布局等方式实现-) 2.元素的高度.宽度.行高和 ...
html块级标签转换,html标签中的块级元素详解
今天,我们就讲解一下html标签中的块级元素,主要包括块级元素的概念.作用.特点,还有就是块级元素有哪些标签等内容. 块级元素概念块级元素是一类css样式display默认值为block的html标 ...
p标签内不能包含块级元素
发现一个不常用的冷知识学html的时候,以为块级元素可以包含任意的块级元素事实并非如此,p标签是不可以包含任何跨级元素的有些块元素不可以包含另一些块元素 ,DTD中规定了块级元素是不能放在P里 ...

html标签的显示模式（块级标签，行内标签，行内块标签）（转）

html标签的显示模式（块级标签，行内标签，行内块标签）

html标签的显示模式（块级标签，行内标签，行内块标签）（转）相关推荐

最新文章

热门文章