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

阿里 阅读:283 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.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号