文章目录
- 一. CSS的元素显示模式
- 二. HTML的区块元素和内联元素
- 1. 块元素
- 2. 行内元素
- 3. 行内块元素
- 4. 元素显示模式转换
- 三. <div>元素
- 四. <span>元素
- 五. 简洁版小米侧边栏
一. CSS的元素显示模式
二. HTML的区块元素和内联元素
大多数 HTML 元素被定义为块级元素或内联元素。
1. 块元素
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
2. 行内元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
- div标签 默认独占一行
- span标签 它的长度是封装数据的长度
- p段落标签 默认会在段落的上方或下方各空出一行来（如果已有就不再空）
3. 行内块元素
4. 元素显示模式转换
特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性
- 比如想要增加链接 < a > 的触发范围
<!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 {
width: 150px;
height: 50px;
background-color: pink;
/* 把行内元素a，转换为块级元素 */
display: block;
}
div {
width: 300px;
height: 100px;
background-color: red;
display: inline;
}
span {
width: 300px;
height: 30px;
background-color: skyblue;
display: inline-block;
}
</style>
</head>
<body>
<a href="#">pink老师</a>
<a href="#">pink老师</a>
<div>我是块元素</div>
<div>我是块元素</div>
<span>行内元素转换为行内块元素</span>
<span>行内元素转换为行内块元素</span>
</body>
</html>
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。
div 元素是用于分组 HTML 元素的块级元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>格式布局</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.
</div>
</div>
</body>
</html>
HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span>元素可用于为部分文本设置样式属性。
五. 简洁版小米侧边栏
<!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;
width: 230px;
height: 40px;
background-color: #55585a;
font-size: 14px;
color: #fff;
text-decoration: none;
text-indent: 2em;
line-height: 40px;
}
/* 鼠标经过链接变化背景颜色 */
a:hover{
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
</body>
</html>
