CSS块级元素与行内元素

By 刘志军, 2019-05-08, 分类: css

css

块级元素

块级元素的特点:

常见块级元素有:

<div>
<p>
<h1>~<h6>
<ol>
<ul>
<dl>
<table>
<form>

需要注意的地方:

行内元素

行内元素的特点:

常见行内元素元素:

<a>
<span>
<br>
<i>
<em>
<strong>
<label>
<code>

行内块级元素

行内块级元素是介于块级元素和行内元素之间的一种元素,同时具有块级元素和行内元素的特点

它的特点是:

  1. 和其他元素都在一行上;
  2. 可设置元素的高度、宽度、外边距、内边距;
  3. 元素之间有缝隙

行内块级元素有:

<img> 
<input>
<button>
<textarea>
<td>>

元素显式模式转换

以上三种显式类型的元素其实可以通过属性display互相转换,display的可选值有:block(块)、inline(行内)、inline-block(行内块级)

display:inline;   /*行内元素*/
display:inline-block;  /*行内块元素*/
display:block;   /* 块级元素 */

看个例子:

<span>右边是图片</span>
<img src="images/google.jpg" alt="google icon">

span 行内元素,img 是行内块级元素,他们都挤在一行,为了美观,可以让图片单独一行,你只要给 img 标签的 display 属性设置为 block 就可以。

微信截图_20190508121853.png

img {
    margin: 0 auto;
    display: block;
    width: 30px;
}

微信截图_20190508122105.png

图片就另一起了一行。

同样的道理,块级元素也可以通过设置属性display:inline 显式在同一行内。


有问题可以扫描二维码和我交流

关注公众号「Python之禅」,回复「1024」免费获取Python资源

python之禅

猜你喜欢

2021-05-26
理解 focus-within 伪类
2020-04-15
重学前端:相对定位VS绝对定位VS固定定位
2021-05-20
CSS元素遮挡问题与z-index属性
2021-05-20
CSS 媒体查询
2021-06-12
理解border-box
2021-06-01
理解CSS行高line-height