CSS 文档流

最新推荐文章于 2023-03-22 10:40:48 发布
最新推荐文章于 2023-03-22 10:40:48 发布
阅读量148 收藏
点赞数
分类专栏： css 文章标签： css java 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/broeg/article/details/125531870
版权
本文介绍了网页结构中的多层层叠原理，重点讲解了文档流作为网页元素排列的基础。在文档流中，块元素自上而下垂直排列，占据整行；行内元素则水平排列，按内容大小伸缩。同时，讨论了元素脱离文档流的概念，这是实现复杂布局的关键。了解这些概念对于前端开发人员来说至关重要。
摘要由CSDN通过智能技术生成

网页是多层结构，层层相摞（css可以为每一层分别设置样式），用户只能看到顶部，即最上层

在网页的这些层中，最底层被称为文档流，文档流是网页的基础

               我们创建的元素默认都是在文档流中进行排列

       元素主要有两个状态

              在文档流中

              脱离文档流

       元素在文档流中的特点

              块元素

                     独占一行（自上而下垂直排列）

                     默认宽度 父元素的宽度

                     默认高度 子元素的高度

              行内元素

                     只占自身大小（不会独占一行）

                     由左向右水平排列，若一行无法容纳下所有元素，则元素会换到第二行继续由左向右水平排列

                     默认宽高 内容撑开

broeg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css文档流操作
qq_43486230的博客
09-27 266
css文档流操作css盒模型margin相关技巧外边距合并margin-top 塌陷css元素溢出块元素、内联元素、内联块元素浮动浮动特性清除浮动定位文档流position定位元素特性 css盒模型 盒子宽度 = width + padding左右 + border左右 盒子高度 = height + padding上下 + border上下 margin相关技巧 1、设置元素水平居中： margin:x auto; 2、margin负值让元素位移及边框合并 外边距合并 外边距合并指的是，当两个垂直外边距
【css-文档流与文本流，浮动，定位】
renrenrenrenqq的博客
12-30 748
文章目录1.文档流与文本流1.1文档流的定义1.2文本流的定义1.3脱离文档流2.浮动（float)3.定位3.1定位的定义3.2定位的组成3.3静态定位3.4相对定位3.5绝对定位 1.文档流与文本流 1.1文档流的定义 **文档流通俗来讲是浏览器中的规则，从上到下，从左到右的布局。** 当浏览器渲染html文档时，从顶部开始开始渲染，为元素分配所需要的空间，每一个块级元素单独占一行，行内元素则按照顺序被水平渲染直到在当前行遇到了边界，然后换到下一行的起点继续渲染。那么此时就不得不说一下块级元素和行
什么是文档流
weixin_30344995的博客
06-25 1443
理解好文档流，有助于我们对css中定位和浮动的理解。什么是文档流呢，加入自己的理解。文档流的定义如下： 网页在解析时，遵循从上向下，从左向右的顺序。 1、从上至上，从左至右的布局。2、符合html中标签本身含义的布局，比如某些标签独占一行。有些标签属于行内元素等。 文档流，也称为普通流。下面来讲一个css中的定位机制，共三种：1、正常的文档流2、float3、posti...
CSS——文档流
小瑾沐晚风的博客
09-27 458
文档流，又称为普通流或者常规流。 在HTML中任何一个元素其实就是一个对象，也是一个盒子。在默认情况下它是按照出现的先后顺序来排列，而这个排列的顺序就是文档流。 文档流是元素在Web页面上的一种呈现方式。所有的HTML元素都是块盒子（Block Boxes，块级元素）或行内框（Inline Boxes，行内元素）。当浏览器开始渲染HTML文档时，它从窗口的顶端开始，经过整个文档内容的过程中，分...
css中的文档流
Amelian的博客
11-20 651
1.文档流 文档流是一个多层的结构，一层摆着一层 -通过CSS可以分别为每一层设置样式 -作为用户只能看待文档流的最顶上一层 -这些层中，最底下的一层称为文档流，文档流是网页的基础 我们所创建的元素默认是在文档流中进行排列 -对于我们的元素主要有两种状态 在文档流中 脱离文档流 2.元素在文档流中的特点： 2.1 块级元素： 1）块级元素默认在页面中独占一行（自上向下排列） 2）默认宽度是父元素的全部（即会把父元素撑满） 3）默认高度是根据内容而定（子元素） 2.2 行内元素 1）行内元素不会独占页面的一行
关于CSS中的文档流简单讲解
weixin_45249263的博客
02-08 1365
标准文档流就是一个“默认”状态，即元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。那么脱离文档流又是怎么回事呢？
CSS文档流与块级元素,css
08-12
### CSS文档流与块级元素、内联元素详解 #### 文档流的概念 在CSS布局中，**文档流**是一个核心概念，它指的是HTML文档中元素的自然流动方式。想象一下，网页就像一条河流，其中的元素就像河中的船只，顺流而下，...
CSS文档流与块级元素(block)、内联元素(inline)
04-06
### CSS文档流与块级元素（block）、内联元素（inline）详解 #### 一、文档流的概念 在深入探讨块级元素与内联元素之前，我们首先要理解**文档流**的基本概念。文档流是指HTML文档中元素按照一定规则排列的方式。在...
CSS文档流和非文档流下的宽度和高度问题总结
橙子好的博客
12-24 1329
1、元素不设宽度时 a)第一种情况：元素为标准文档流元素时 i.子元素为默认情况下时 1.父元素设定宽度时，继承父元素的宽度； 代码如下： 效果如下： 2.父元素不设定宽度时，继承body的宽度； 代码如下： 效果如下： ii.子元素为相对定位时 1.父元素设定宽度时，继承父元素的宽度； 代码如下： 效果如下： 2.父元素不设定宽度时，继承body的
CSS文档流(Normal Flow)详细介绍
piglite的专栏
07-08 973
原文链接CSS 有三种基本的定位机制：普通流、浮动流、定位流。一、文档流 文档流：可以理解为元素的一种状态，处于这种状态下的元素具有一些特性。说白了，标准文档流就是一个“默认”状态，即元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。（1）块元素 ①多个块元素（兄弟关系）处于文档流时，从上到下各占一行排列； ②文档流中的块元素的width的默认值与父元素的width相同； ③文档流中的块元素
CSS标准文档流简介
Huang_WeiHong的博客
07-17 536
标准文档流简介 概念 文档流通俗的讲，就是一个web页面中，每一个模块只能从上到下从左往右的方式排列在页面上 特性 （1）空白折叠现象 无论多少个空格、换行或Tab都会折叠为一个空格 例如： <img src = "C:\Test.png"> <img src = "C:\Test.png"> <!-- 此处空一个Tab键 --> 效果如下 <img src = "C:\Test.png"> <img src = "C:\Test.png
CSS之CSS的三种基本的定位机制（普通流，定位，浮动）
baju1977的博客
02-27 428
CSS之CSS的三种基本的定位机制（普通流，定位，浮动） 一、普通流 　　普通流中元素框的位置由元素在XHTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。 　　普通流就是html文档中的元素...
html中的文档流
Wayne1998的博客
05-07 7119
一、什么是文档流？ “流”，我们在生活中经常听到这个词，比如水流，电流。就像水流从高处往低处流一样，我们可以把文档流想象成html元素在浏览器上“流动”。浏览器的顶端就是河流的源头，浏览器的底部就是河流的尽头。 那么所谓的文档流（normal flow，也被称为“普通流”），指的是就是元素排版布局过程中，元素会自动从左往右，从上往下地遵守这种流式排列方式。 ...
css中脱离文档流解惑
xiaoninvhuang的博客
04-03 1142
先来了解一下block元素和inline元素在文档流中的排列方式。 　　block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性； 　　inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽
CSS中的文档流
ct5211314的博客
03-22 883
总结：脱离文档流，也就是将元素在普通布局排班中拿走，不占据位置（悬空了），其他的盒子在定位的时候，会当做脱离文档流的元素不存在二进行定位，需要注意的是，使用float脱离文档流时，其他的元素盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于实验position脱离文档流的元素，其他盒子与其他的盒子内的文本都会无视他。
【前端面试之CSS】什么是标准文档流？重点介绍了浮动以及如何清除浮动
阿卡内的博客
07-23 1122
三种文档流重点介绍了浮动以及如何清除浮动
html中文档流的理解
小新正在敲代码
02-24 9944
理解好文档流，有助于我们对css中定位和浮动的理解。什么是文档流呢，经过我看过的一些文章，加入自己的理解。我得出文档流的定义如下： 1、从左至右，从上至上的布局。 2、符合html中标签本身含义的布局，比如某些标签独占一行。有些标签属于行内元素等。 下面来讲一个css中的定位机制，共三种： 1、正常的文档流 2、float 3、postion 在这几种定位机制中，有几种方式是脱离文档流
css中的文档流和文本流
lyclyc_的博客
06-25 786
文档流是相对于盒子模型讲的 文本流是相对于文子段落讲的 元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。 但是绝对定位后，不仅元素盒子会拖出文档流，文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。 当然你可以使用 index-z 来让底部的元素到上面来，类似于一个图层的概念。 作者：张木大原 链接：https://www.zhih
css脱离文档流方式
最新发布
07-27
CSS中有多种方式可以使元素脱离文档流。其中包括浮动（float）、绝对定位（absolute）和固定定位（fixed）等方式。当给一个元素添加了浮动属性（float），它将脱离文档流并不再占有原来的位置。绝对定位（absolute）和固定定位（fixed）也可以使元素脱离文档流，但是它们的定位方式不同。绝对定位的元素会相对于其最近的已定位祖先元素进行定位，而固定定位的元素则会相对于浏览器窗口进行定位。其他定位方式（static和relative）不会使元素脱离文档流，它们仍然会占有原来的位置。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* *3* [CSS标准文档流和脱离文档流](https://blog.csdn.net/qq_43742385/article/details/109366526)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值