CSS文档流

最新推荐文章于 2024-08-09 16:30:00 发布
最新推荐文章于 2024-08-09 16:30:00 发布
阅读量103 收藏
点赞数
分类专栏： css html 文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyt20040310/article/details/127324468
版权
html 同时被 2 个专栏收录
20 篇文章 0 订阅
订阅专栏
css
16 篇文章 0 订阅
订阅专栏

文档流（normal flow）

网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层

文档流是网页最底层

我们创建的元素默认情况下，都在文档流中

元素分为两种状态：在文档流中，脱离文档流

元素在文档流中的特点

块元素

1:会独占一行

2:块元素的宽度默认是父元素的100%

3:块元素的高度默认是被内容撑开的

内联元素（行内元素）

1:不会独占一行

2:宽度高度默认都是被内容撑开的，不能自己定义宽高

行内块元素

1、不会独占一行，可以设置宽高

一旦元素通过某种方式，例如浮动、绝对定位等等，脱离文档流，则原来在文档流中划分元素类型，特点都不复存在

滑铁卢小吴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS文档流与块级元素,css
08-12
### CSS文档流与块级元素、内联元素详解 #### 文档流的概念 在CSS布局中，**文档流**是一个核心概念，它指的是HTML文档中元素的自然流动方式。想象一下，网页就像一条河流，其中的元素就像河中的船只，顺流而下，...
CSS中的文档流
ct5211314的博客
03-22 883
总结：脱离文档流，也就是将元素在普通布局排班中拿走，不占据位置（悬空了），其他的盒子在定位的时候，会当做脱离文档流的元素不存在二进行定位，需要注意的是，使用float脱离文档流时，其他的元素盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于实验position脱离文档流的元素，其他盒子与其他的盒子内的文本都会无视他。
CSS 文档流
小楼一夜听春雨，深巷明朝卖杏花
03-11 1486
块元素：比如li标签或者h1这种，都是默认自上而下摆放的。内联标签：如果是span标签或者strong标签，它是从左到右进行摆放的。可以看到有文本的时候，高矮是不一样的，他们是以底边对其的。高矮不齐的时候是以底边进行对其的。上面都是默认元素会产生的问题。这个时候，就不能使用文档中元素默认的位置去摆放。空格问题，无论在文本位置放置了多少空格，默认出现在页面上面只有一个空格。是指页面上的元素在摆放的时候所占用的空间，也泛指页面元素放置的位置。这三种都会脱离文档流，一旦脱离文档流，元素的管理就会变的容易一些。
CSS——布局
最新发布
Fan_web的博客
08-09 1092
本文详细介绍了CSS中的布局，包括文档流、盒子模型和大小、浏览器的默认样式介绍以及补充一些轮廓和圆角的一些知识点。
CSS11：文档流
m0_62820255的博客
04-26 159
例：块元素从上至下摆放，内联元素从左到右摆放。标准流里面限制非常多，导致很多页面效果无法实现。
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-zeal官方文档
08-02
**CSS-Zeal官方文档详解** CSS（Cascading Style Sheets）是一种用于描述网页及应用程序用户界面呈现方式的样式表语言。Zeal是一款强大的离线文档浏览器，它为开发者提供了快速查阅各种编程语言和框架文档的便利。...
css 盒模型 文档流 几种清除浮动的方法实例详解
01-21
盒模型 1、box-sizing: content-box 是普通的默认的一种盒子表现模式 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode 2、box-sizing:border-...文档流 普通流（标
CSS文档流与块级元素(block)、内联元素(inline)
04-06
### CSS文档流与块级元素（block）、内联元素（inline）详解 #### 一、文档流的概念 在深入探讨块级元素与内联元素之前，我们首先要理解**文档流**的基本概念。文档流是指HTML文档中元素按照一定规则排列的方式。在...
CSS文档流与块级元素(block)内联元素(inline)那点事
10-25
CSS文档流与块级元素(block)内联元素(inline)那点事
CSS标准文档流与脱离文档流，前端基础教程ppt
m0_57473261的博客
04-01 374
中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。技术要深入到什么程度？做久了技术总要转型管理？我能做什么，我想做什么？一技之长，就是深耕你的专业技能，你的专业技术。（重点）独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）拥有事业，选择一份使命，带领团队实现它。（创业）一技之长分五个层次栈内技术 - 是指你的前端专业领域技术栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识。
什么是文档流
weixin_30344995的博客
06-25 1444
理解好文档流，有助于我们对css中定位和浮动的理解。什么是文档流呢，加入自己的理解。文档流的定义如下： 网页在解析时，遵循从上向下，从左向右的顺序。 1、从上至上，从左至右的布局。2、符合html中标签本身含义的布局，比如某些标签独占一行。有些标签属于行内元素等。 文档流，也称为普通流。下面来讲一个css中的定位机制，共三种：1、正常的文档流2、float3、posti...
【CSS】什么是文档流、什么是BFC，怎么触发BFC，BFC 有什么应用场景
qq_17335549的博客
02-26 676
块格式化上下文（BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。描述页面上的块级盒子是如何摆放和布局的。
CSS文档流——position，float属性详解
m0_67623521的博客
06-08 847
​ 文档流的一般情况可能不满足我们的设计需求，可以使用不同的布局方式来改变顺序，当前主要的布局方式有：浮动布局(Float)、定位布局(Position)、弹性布局(Flex)、网格布局(Grid)等来改变正常的文档流。......
css文档流&盒模型
yulingpan123的博客
08-19 237
文档流，盒模型，常见单位
CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级
专研前端，探索后端
04-16 364
文档流： 普通流（normal flow）： 字面意思是普通流或者标准流，也就是常说的文档流，指网页内标签正常是从上到下，从左到右排列的意思，css的定位机制有3种：普通流（标准流）、浮动、定位。 浮动： 是指使元素飘起来不完全脱离标准流的控制，绝对定位才是完全脱离标准流的，飘起来后不会再占原来的位置，浮动可以使块级元素在一行排列显示，float的值有：none默认值，元素不浮动、right元素向右浮动、left元素向左浮动。 .box ul li { float:left; } 浮动特性： 1、浮动
CSS文档流(Normal Flow)详细介绍
piglite的专栏
07-08 975
原文链接CSS 有三种基本的定位机制：普通流、浮动流、定位流。一、文档流 文档流：可以理解为元素的一种状态，处于这种状态下的元素具有一些特性。说白了，标准文档流就是一个“默认”状态，即元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。（1）块元素 ①多个块元素（兄弟关系）处于文档流时，从上到下各占一行排列； ②文档流中的块元素的width的默认值与父元素的width相同； ③文档流中的块元素
CSS(3)__CSS基本用法<div,文档流,浮动>
Richard_xx的博客
07-30 682
1：盒子模型--div 1：画图理解盒子模型 2：一个盒子占据的控件是边框 + 内边距 + 内容区域 Margin:外边距 Width=(margin+border+padding)*2+content 一个盒子中主要的属性就5个：width、height、padding、border、margin。 width是“宽度”的意思，CSS中width指的是内容的宽
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
发出的红包

打赏作者

滑铁卢小吴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值