html元素一般分为块元素和行内元素。
块元素
常见的块元素有<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>等，其中<div>是最典型的块元素。
块元素的特点：
- 自己独占一行
- 高度、宽度、内外边距都可以设置
- 宽度默认是容器（父级宽度）的大小
- 是一个容器及盒子，里面可以放行内元素或者块元素
注意：
- 文字类的元素标签内不能使用块元素
- <p>标签主要用于存放文字，所以里面不能放块元素，比如不能放<div>
- 同理，<h1>-<h6>也是文字类块级标签，里面也不能放其他块级元素
行内元素
常见的行内元素有<a>,<strong>,<b>,<em>,<span>等，其中<span>标签是最典型的行内元素。
行内元素的特点：
- 相邻行内元素在一行，一行可以显示多个行内元素
- 高和宽不能直接设置
- 默认宽度就是本身文字内容的宽度
- 行内元素只能容纳文本或其他行内元素（<a>标签除外）
注意：
- 特殊情况下<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
行内块元素
<img />,<input />,<td>他们同时具有块元素和行内元素的特点。
行内块元素的特点：
- 和相邻行内元素（行内块）在一行，但是他们之间会有空白缝隙，一行可以显示多个
- 默认宽度就是他本身文字内容的宽度
- 高度行高以及内外边距都可以控制
元素显示模式转换
特殊情况下，项目需要元素模式的转换，就是转换到另一种模式的特性，比如想要增加行内元素<a>的触发范围
- 转换为块元素：display:block
- 转换为行内元素：dis;play:inline
- 转换为行内块元素：display:inline-block
<!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>元素模式转换</title>
<style>
a {
width: 150px;
height: 50px;
background-color: red;
/*把行内元素a转换为块级元素以便修改可点击的范围*/
display: block;
}
</style>
</head>
<body>
<a href="#">测试</a>
</body>
</html>
结果演示
案例
小米侧边栏简洁版
<!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>小米侧边栏简洁版</title>
<style>
a:hover {
background-color: coral;
}
a {
text-indent: 2em;
text-decoration: none;
line-height: 50px;
width: 200px;
height: 50px;
color: rgb(255, 255, 255);
background: rgb(80, 70, 70);
display: block;
}
</style>
</head>
<body>
<a href="#">手机</a>
<a href="#">电脑</a>
<a href="#">平板</a>
<a href="https://www.wangxuelong.vip">电视</a>
<a href="#">耳机</a>
<a href="#">出行</a>
</body>
</html>
结果演示
