html块级标签,行内标签,行内块标签的显示模式有哪些
发布网友
发布时间：2023-08-02 13:44
我来回答
共1个回答
热心网友
时间：2023-09-17 10:50
这次给大家带来html块级标签,行内标签,行内块标签的显示模式有哪些，使用html块级标签,行内标签,行内块标签显示模式的注意事项有哪些，下面就是实战案例，一起来看一下。
今天讲课的时候，讲到了html中的标签的显示模式，大致分为块级标签和行内标签。那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用，比如宽、高、水平居中等，其实这个属性的使用只有在块级标签上使用才起作用。个人认为这个也是初学者非常容易忽略的地方，所以我就把它记下来！
比如会有一种情况，给p标签水平居中有作用，但是给font加水平居中属性就没作用（如下）：
p{ color:red; text-align:center;}<BR>font{color:red; text-align:center;}
<p>我是块级标签p</p><BR><font>我是行内标签font</font>
运行预览之后p能使文本水平居中，但是font就不可以
那么以上这个问题就和html中的显示模式有关了：
显示模式的特性：
主要分为两大类：
块级元素：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；
行内元素：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高！
其中还有一种结合两种模式有点的显示模式：
行内块元素：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；
在html中显示模式分为块级和行内，其中常用的块级有：p,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转换为块级就不一样了：
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；时：
p{ padding:5px;background:green; color:red;}
font{ background:yellow;}
<p>
<font>我是行内标签font</font> <font>我是行内标签font</font>
</p>加上text-align:center;后
p{ padding:5px;background:green; color:red;text-align:center;}
font{ background:yellow;}相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
相关阅读：
HTML基础知识，关于超链接设置的样式的详细介绍
HTML的基础知识.关于css样式表和样式属性的详细介绍
HTMLa标签的href属性指定相对路径与绝对路径使用方法
html块级标签,行内标签,行内块标签的显示模式有哪些
其中还有一种结合两种模式有点的显示模式：行内块元素：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；在html中显示模式分为块级和行内，其中常用的块级有：p,p,h1~h6,ul,li,dl,dt,dd...
HTML基础知识(块级标签,行内标签,行内块标签)
块级元素 ：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；行内元素 ：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高！其中还有一种结合两种模式有点的显示模式：行内块元素 ：结合的行内和块级的有点，不仅可以对宽高属性值生效，...
html常见的三种页面布局方法
流动布局流动布局是浏览器默认的布局方式。他会按照你所写的标签特性，从上至下、从左到右的方式进行排列在HTML中我们按照标签的排列特性可以将它们分成三类：1.行级元素：不独占一行，不能设置元素的高度、宽度和底边边距，它的宽度和高度是由他的内容撑起来的。2.行内块元素：不独占一行，可以设置元...
彻底搞懂行内元素,块级元素,行内块元素
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。 当然，他们之间也是可以转换的。行内元素特征： (1)设置宽高无效 (2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间 (3)不会自动进行换行 元素：span 修饰字体和标签，还有和这两...
html所有的块级标签和行级标签有哪些
（对于不支持frame的浏览器显示此区块内容noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）ol - 排序表单p - 段落pre - 格式化文本table - 表格ul - 非排序列表内联元素(inline element) HTML标签分类明细a - 锚点abbr - 缩写acronym - 首字b - 粗体(不推荐)bdo - bidi override...
原来这是块级标签、行内标签
独占一行，一行只能显示一个。宽度默认是父元素的宽度，高度默认由内容撑开。可以设置宽度。块级标签示例包括：div，p，h系列，ul，li，dl，dt，dd，form，header等。在浏览器中显示，块级元素会独占一行，宽度为父元素的100%。若给予宽高，则能显示出相应的背景宽高。行内元素特点如下：一行可以显示...
html的标签类型有哪些?
1.块元素(独占一行!即使通过css设置宽度width,也会占一行的位置)块元素的居中问题 块级元素左右居中:先设置自身width;然后,margin: 0 auto;div(无语义)列表 ur/ol/li 段落 p 标题 h1-h6 自定义列表 dl/dt/dd 2.内联元素(行内)[不支持width, height, margin上下,padding上下]子级内联元素之间...
html行级标记和块级标记都有哪些?
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容 noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）ol - 排序表单 p - 段落 pre - 格式化文本 table - 表格 ul - 非排序列表 可变元素 可变元素为根据上下文语境决定该元素为块元素或者内联元素。applet - java ...
html5的标签中,哪些是行内元素,哪些是块级元
行内元素的标签有：<span>...</span> <a>...</a> 链接 <br> 换行 <b>...</b> 加粗 <strong>...</strong> 加粗 <img > 图片 <sup>...</sup> 上标 <sub>...</sub> 下标 <i>...</i> 斜体 <em>...</em> 斜体 <del>...</del> 删除线 <u>...<...
行内、块级、行内块元素一览
Html样式：<div>块级元素1</div> <div>块级元素2</div> 普遍的规则里总有那么几个不一样的，在行内元素中就有那么几个特殊标签，比如<img>/<input>/<td>,可以给他们设置宽高、对齐属性，我们把这样特殊的一类标签称为行内块元素。行内块元素综合了块元素和行内元素的不同特点。行内块元素...
