CSS的元素显示模式(块元素、行内元素、行内块元素和显示模式转换)

阿里阅读：255 2022-06-06 14:12:55 评论：0

1. 块元素

常见的有<div>、<ul>、<ol>、<li>、<dl>、<hr />、<form>、<table>

特点如下：

独占一行
可以设置高度、宽度、外边距、内边距
宽度默认是父级的100%
里面可以放行内元素或块级元素
注意：文字类的块元素，如<p>、<h1> ~ <h6>，里面不能放块元素

2. 行内元素

常见的有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

特点如下：

一行可以放多个行内元素，父元素宽度不够则自动换行
不可以设置宽度、高度
默认宽度是内容的宽度
里面只能放文本或行内元素
注意：<a>里面不能放<a>

3. 行内块元素

常见的有<img />、<input />、<td>

同时具有块元素和行内元素的特点

4. 转换为块元素

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
    <meta charset="UTF-8"> 
    <title>test title</title> 
 
    <style> 
 
        a { 
            display: block; 
            height: 100px; 
            width: 100px; 
            background: red; 
        } 
 
    </style> 
</head> 
<body> 
 
 
<a href="#">链接一</a> 
<a href="#">链接二</a> 
 
</body> 
</html>

显示如下：
转换为块元素

5. 转换为行内元素

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
    <meta charset="UTF-8"> 
    <title>test title</title> 
 
    <style> 
 
        div { 
            display: inline; 
        } 
 
    </style> 
</head> 
<body> 
 
 
<div>盒子一</div> 
<div>盒子二</div> 
 
 
</body> 
</html>

显示效果如下：
转换为行内元素

6. 转换为行内块元素

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
    <meta charset="UTF-8"> 
    <title>test title</title> 
 
    <style> 
 
        div { 
            display: inline-block; 
            width: 100px; 
            height: 100px; 
            background: red; 
        } 
 
    </style> 
</head> 
<body> 
 
 
<div>盒子一</div> 
<div>盒子二</div> 
 
 
</body> 
</html>

显示效果：
转换为行内块元素

标签:CSS

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。