首页 CSS

# CSS 显示模式

# 块级元素

  • 显示特点 :
    1. 独占一行 (一行只能显示一个)
    2. 宽度默认是父元素的宽度，高度默认由内容撑开
    3. 可以设置宽高
  • 代表标签 :
    • div, p, h 系列，ul, li, dl, dt, dd, form, header, nav, footer…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示模式——块</title>
    <style>
        /*块 : 独占一行, 宽度默认是父级的100%, 添加宽度都生效*/
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>1111111</div>
    <div>2222222</div>
</body>
</html>

# 行内元素

  • 显示特点 :
    1. 一行可以显示多个
    2. 宽度和高度默认由内容撑开
    3. 不可以设置宽高
  • 代表标签
    • a, span, b, u, i, s, strong, ins, em, del…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内元素</title>
    <style>
        span {
            width: 300px;       /*不生效*/
            height: 300px;      /*不生效*/
            background-color: pink;
        }
    </style>
</head>
<body>
    <a href="#">我是a标签</a>
    <span>span</span>
    <span>span</span>
</body>
</html>

# 行内块元素

  • 显示特点 :
    1. 一行可以显示多个
    2. 可以设置宽高
  • 代表标签 :
    • input, textarea, button, select…
    • 特殊情况 : img 标签由行内块元素特点，但是 Chrome 调试工具中显示结果是 inline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内块元素</title>
    <style>
        img {
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
</head>
<body>
    <img src="./up.jpg" alt="up.jpg">
    <img src="./up.jpg" alt="up.jpg">
</body>
</html>

# 元素显示模式转换

  • 目的：改变元素默认的显示特点，让元素复合布局要求

  • 语法 :

    属性效果使用频率
    display: block转换成块级元素较多
    display:inline-block转换成行内块元素较多
    display:inline转换成行内元素极少

# 标签嵌套

HTML 嵌套规范注意点 :

  1. 块级元素一般作为大容器，可以嵌套：文本，块级元素，行内元素，行内块元素等等……
    • 但是 : p 标签中不要嵌套 div, p, h 等块级元素
  2. a 标签内部可以嵌套任意元素
    • 但是 : a 标签不能嵌套 a 标签
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签嵌套</title>
</head>
<body>
  <p>
<!--    不能这样 p标签中嵌套h1标签-->
    <h1>一级标题</h1>
  </p>
</body>
</html>

image-20220228224600665