行内元素和块元素以及行内块元素的特点

块级元素

块元素会独自占据一整行，或者多行，可以任意设置其大小尺寸，是用于搭建网页布局的必须部分，使网页结构更加紧凑合理。
特点：
1.总是另起一行（特立独行）
2.可以设置其宽度、高度，内外边距
3.在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度）
4.可以容纳行内元素和其他块元素。
常见的块元素：<div>/<h1>~<h6>/<p>/<ul>/<table>等，其中<div>是最常用最典型的块级元素。

行内元素（inline-level）

行内元素也称为内联元素，行内元素不占有独立区域，其大小仅仅被动的依赖于自身内容的大小（例如文字和图片），所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。
特点：
1.总是和相邻的行内元素在同一行上（物以类聚）
2.设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。
3.默认宽度是他自身内容的宽度。
4.行内元素只能容纳其他行内元素或者文本。

行内块元素（inline-block）

普遍的规则里总有那么几个不一样的，在行内元素中就有那么几个特殊标签，比如<img>/<input>/<td>,可以给他们设置宽高、对齐属性，我们把这样特殊的一类标签称为行内块元素。行内块元素综合了块元素和行内元素的不同特点。
特点：
1.和相邻行内元素在同一行，但是之间会有空白缝隙。
2.默认宽度是他本身内容的宽度。
3.宽度、高度、行高、外边距以及内边距都可以手动设置。

标签显示模式转换（display）

既然标签有不同的显示模式，就会有相应的转换办法以应对各种需要。
display正是我们想要的。
块元素——>行内元素 ： display:inline;
行内元素——>块： display:block;
块、行内元素——>行内块： display: inline-block;

总结

在以后遇到当给一个元素设置的宽高无效的时候这就是一个原因，使用display即可解决。

最后

以上就是纯真帆布鞋为你收集整理的行内元素和块元素以及行内块元素的特点的全部内容，希望文章能够帮你解决行内元素和块元素以及行内块元素的特点所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。