CSS基础：块状元素、内联元素、内联块状元素(行内元素)-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS基础：块状元素、内联元素、内联块状元素(行内元素)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

css基础：块元素、内联元素、内联块元素

<div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

<img>、<input>

什么是块级元素？在html中

<div>、 <p>、<h1>、<form>、<ul> 和 <li>

就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{display:block;}

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

在html中，

<span>、<a>、<label>、 <strong> 和<em>

就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码

display:inline

将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

div{
 display:inline;
 }

内联元素特点：

1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码

display:inline-block

就是将元素设置为内联块状元素。(css2.1新增)，

<img>、<input>

标签就是这种内联块状标签。

inline-block 元素特点：

1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

转载链接：https://www.jianshu.com/p/1cf4e5d9ca2c文章来源地址https://www.toymoban.com/news/detail-411252.html

到了这里，关于CSS基础：块状元素、内联元素、内联块状元素(行内元素)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！