文章目录
一、什么是元素显示模式
元素显示模式就是 元素以什么方式进行显示. 比如div自己占一行, 比如一行可以放多个span
二、元素显示方式
HTML元素一般分为块元素和行内元素两种类型
三、块元素
常见的块元素有 <h1>-<h6>, <p>, <div>, <ul>, <ol>, <li>
等.
1. 块级元素的特点
- 独占一行
- 高度, 宽度, 外边距以及内边距都可以控制
- 宽度默认是容器的100%
- 是一个容器及盒子, 里面可以放行内或者块级元素
注意
- 文字类的元素内不能使用块元素
- 比如p标签主要用于存放文字, 因此p里面不能放块级元素
四、行内元素
常见的块元素有 <a>, <strong>, <b>, <em>, <i>, <del>, <s>, <span>
等.
行内元素的特点
- 相邻行内元素在一行上, 一行可以显示多个
- 高, 宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或者其他行内元素
注意
特殊情况链接里面可以放块级元素, 但是给 a 转换一下块级模式最安全
五、行内块元素
<img />, <input />, <td>
它们同时具有块元素和行内元素的特点.
行内块元素的特点
- 和相邻行内元素 在一行上, 但是它们之间会有空白缝隙.一行可以显示多个
- 默认宽度就是它本身内容的宽度
- 高度, 行高, 外边距以及内边距都可以控制
六、元素显示模式转换
一个模式的元素需要另外一种模式的特性1. 行内元素转换为块元素
语法 :
display:block;
2. 块级元素转换为行内元素
语法 :
display: inline;
3. 转换为行内块元素
元素转换实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
/* 转换为块级元素 */
display: block;
background-color: red;
width: 200px;
height: 30px;
}
div {
/* 转换为行内元素 */
display: inline;
background-color: green;
width: 200px;
height: 100px;
}
span {
/* 转换为行内块元素 */
display: inline-block;
width: 300px;
height: 50px;
background-color: greenyellow;
}
</style>
</head>
<body>
<a href="#">把a转换为块级元素</a>
<div>块级元素转换为行内元素</div>
<div>块级元素转换为行内元素</div>
<span>转换为行内块元素</span>
<span>转换为行内块元素</span>
</body>
</html>