标签显示模式
一、块级元素
1.块级元素特点:
(1)独占一行
(2)高度、宽度、内外边距可控制。
(3)默认宽度是容器的100%
(4)块级元素是一个盒子,里面可以放置行内或块级元素。
注意:<p>,<h1>,<h2>
都是文字类块级标签,里面不能放其他块级元素。
二、行内元素
常见<a>,<strong>,<em>
,最常用<span>
1.行内元素特点:
(1)相邻行内元素在一行上,一行可以显示多个。
(2)高度,宽度直接设置无效。
(3)默认宽度是它本身的宽度。
(4)行内元素只能容纳文本或其他行内元素。
三、行内块元素
特点:
(1)和相邻行内元素(行内块)在一行上,但是之间有空白缝隙,一行可以显示多个。
(2)默认宽度是其本身内容的宽度。
(3)宽度,高度,内外边距可以控制。
四、标签显示模式转换
块转行内:display:inline
行内转块:display:block
块、行内元素转换为行内块: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>Document</title>
<style>
span{
/* 把行内元素转化为块级元素 */
display: block;
width: 100px;
height: 100px;
background-color: aqua;
}
div{
/* 把块级元素转化为行内元素 */
display: inline;
background-color: brown;
}
a{
/* 转化为行内块元素 */
display: inline-block;
width: 100px;
height: 100px;
background-color: chartreuse;
}
</style>
</head>
<body>
<span>行内元素</span>
<span>行内元素</span>
<div>块级元素</div>
<div>块级元素</div>
<a href="#">百度</a>
<a href="#">百度</a>
</body>
</html>