标签显示模式(display)

(1)块级元素(block-level)

常见块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素特点:
①总是从新行开始
②高度、行高、外边距以及内边距都可以控制。
③宽度默认是容器的100%
④可以容纳内联元素和其他块元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style> div{ background-color:pink; width: 100px; height: 100px; } </style>
</head>

<body>
    <div>大禹治水</div>
    <p>后羿射日</p>
    <div>精卫填海</div>
</body>

</html>

(2)行内元素(inline-level)

常见行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>是最经典的行内元素。

行内元素的特点：
①和相邻行内元素在一行上。
②高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
③默认宽度就是它本身内容的宽度。
④行内元素只能容纳文本或其他行内元素(a特殊)。

注意：
1.只有文字太能组成段落，因此p里面不能放块级元素，同理h1~h6,dt都是文字类块级标签,不能放其他块级元素。
2.连接里面不能再放链接。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style> span { background: pink; width: 100px; /* 无效 */ } </style>
</head>

<body>
    <span>高数考完啦</span>
    <span>英语考完啦</span>
    <span>明天可以回家啦</span>
</body>

</html>

(3)行内块元素(inline-block)

行内元素中几个特殊标签：<img />、<INPUT />、<td>,可以对他们设置宽高和对齐属性。

行内块元素特点：
①和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
②默认宽度就是它本身的宽度。
③高度、行高、外边距以及行内边距都可以控制。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style> input { width: 200px; height: 30px; } </style>
</head>

<body>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</body>

</html>

(4)标签显示模式转换(display)

块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块：display:inline-block;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style> div { width: 100px; height: 100px; background-color: pink; /* display: inline; */ } span { width: 100px; height: 100px; background-color: hotpink; /* display: block; */ } a { width: 50px; height: 20px; background-color: deeppink; /* display: inline-block; */ } </style>
</head>

<body>
    <div>哦</div>
    <div>嗯</div>
    <div>哈哈</div>

    <span>直男</span>
    <span>铁男</span>
    <span>钢铁直男</span>

    <a href="#">早上好</a><a href="#">晚上好</a>
</body>

</html>

①display:inline
②display: block;
③display: inline-block;
发生变化啦: