【Web】标准文档流

IT阳晨。

已于 2022-09-11 14:13:08 修改

阅读量312

点赞数

分类专栏： Web前端文章标签：前端 css css3

于 2022-08-07 10:22:44 首次发布

本文链接：https://blog.csdn.net/qq_62361050/article/details/126206976

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. 元素类型

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

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

块级元素

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>

在这里插入图片描述

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

行内元素

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            background: pink;
        }
    </style>
</head>
<body>
    <span>span文字1</span>
    <span>span文字2</span>
</body>

在这里插入图片描述

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

行内块元素

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            background: pink;
        }
        input{
            width: 300px;
        }
    </style>
</head>
<body>
    <input type="text" value="input输入框1">
    <input type="text" value="input输入框2">
</body>

常见行内块元素：input、img、table

在这里插入图片描述

2. display显示模式

大部分标签默认的时候都会以各自的显示状态（类型）进行加载，标签的显示状态并不是固定不变的，可以通过css属性display进行切换

display属性值

block：砖、块的意思，表示标签要以块级元素加载

display: block;

在这里插入图片描述

inline: 行内，表示将标签以行内元素进行加载

display: inline;

在这里插入图片描述

inline-block: 行内块，表示将标签以行内块元素进行加载

display:inline-block;

在这里插入图片描述

如果一个网站只有标准文档流，很多效果是不能实现的，如果要实现非标准特点的页面就必须让标签去非标准化

让标签脱离标准流的方法：浮动、定位

IT阳晨。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Web】标准文档流

思考一个问题，我们开发网页是更像写word还是更像画图？答更像写word，因为我们开发网页有自己的书写规律，从上往下，从左往右，前面内容的变化会影响后面内容的位置以上也是标准文档流的特性HTML文件就是一种标准文档流文件，也有自己的一些特性。...
复制链接

扫一扫