【Web】标准文档流

1. 元素类型

从HTML的角度讲元素分为连个级别：容器级和文本级

从CSS的角度的讲将元素分为三种类型：块级元素，行内元素，行内块元素

块级元素

特点：可以设置宽度、高度，元素独占一行

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
        }
    style>
head>
<body>
    <div>div>
    <div>div>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这里插入图片描述

常用的块级元素：div、p、h1-h6，ul，ol，dl等等

行内元素

特点：文字并排显示，不能设置盒子的宽度和高度

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        span{
            background: pink;
        }
    style>
head>
<body>
    <span>span文字1span>
    <span>span文字2span>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这里插入图片描述

常用的行内元素：span、a、b、u、i等等。

行内块元素

特点：可以设置宽度和高度，并且盒子也可以并排显示

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        span{
            background: pink;
        }
        input{
            width: 300px;
        }
    style>
head>
<body>
    <input type="text" value="input输入框1">
    <input type="text" value="input输入框2">
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17