元素显示模式
元素显示模式定义
元素显示模式：元素标签以什么方式进行显示。
块与行内元素
块元素
<h><p><ul><ol><div>
独占一行
高度宽度，外边距，内边距都可以控制。
默认宽度是容器（父级的百分百）
是一个容器或者盒子，可以放块级元素
文字类不能放块级元素，如p/h
行内元素（内联元素）
相邻的行内元素一行可以占多个
高宽设置无效
默认宽度是本身宽度
智能容纳文本和其他行内元素
链接不能再放链接
特殊情况下a可以放块级元素
块内行元素
<img/>,<input/><td>
可以一行多个，但是有空隙。
默认宽度是本身
宽度，行高，边距可设置。
元素显示模式的转换
元素显示模式的转换：
用处：增加a的触发范围
Display：block
Display：inline
Display：inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素显示模式的转换</title>
<style>
/* div是块元素，span是行内元素，a是行内元素 */
.div1 {
background-color: gold;
/* 显示观察盒子的大小 */
width: 100px;
/* 盒子宽 */
}
.div2 {
background-color: gold;
/* 显示观察盒子的大小 */
width: 100px;
/* 盒子宽 */
display: inline;
}
.a1 {
background-color: gold;
/* 显示观察盒子的大小 */
width: 100px;
/* 盒子宽 */
}
.a2 {
background-color: gold;
/* 显示观察盒子的大小 */
width: 100px;
/* 盒子宽 */
display: block;
}
.span1 {
background-color: gold;
/* 显示观察盒子的大小 */
width: 100px;
/* 盒子宽 */
}
.span2 {
background-color: gold;
/* 显示观察盒子的大小 */
width: 300px;
/* 盒子宽 */
display: inline-block;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div1">div1</div>
<br/>
<div class="div2">div2</div>
<div class="div2">div2</div>
<br/>
<a href="#" class="a1">a1</a>
<a href="#" class="a1">a1</a>
<br/>
<a href="#" class="a2">a2</a>
<a href="#" class="a2">a2</a>
<br/>
<span class="spa1">spa1</span>
<span class="spa1">spa1</span>
<br/>
<span class="spa2">spa2</span>
<span class="spa2">spa2</span>
<br/>
</body>
</html>