视觉格式化模型 - 常规流

news/2025/1/8 17:40:25/文章来源:https://www.cnblogs.com/kyou/p/18657937

常规流

盒模型:规定单个盒子的规则

视觉格式化模型(布局规则):页面中的多个盒子排列规则

视觉格式化模型,大体上将页面中盒子的排列分为三种方式:

  1. 常规流
  2. 浮动
  3. 定位

常规流布局

常规流、文档流、普通文档流、常规文档流

所有元素,默认情况下,都属于常规流布局

总体规则:块盒独占一行,行盒水平依次排列

包含块(containing block):每个盒子都有它的包含块,包含块决定了盒子的排列区域。

绝大部分情况下:盒子的包含块,为其父元素的内容盒

块盒

  1. 每个块盒的总宽度,必须刚好等于包含块的宽度

宽度的默认值是auto

margin的取值也可以是auto,默认值0

auto:将剩余空间吸收掉

width吸收能力强于margin

若宽度、边框、内边距、外边距计算后,仍然有剩余空间,该剩余空间被margin-right全部吸收

在常规流中,块盒在其包含快中居中,可以定宽、然后左右margin设置为auto。

  1. 每个块盒垂直方向上的auto值

height:auto, 适应内容的高度

margin:auto, 表示0

  1. 百分比取值

padding、宽、margin可以取值为百分比

以上的所有百分比相对于包含块的宽度。

高度的百分比:

1). 包含块的高度是否取决于子元素的高度,设置百分比无效
2). 包含块的高度不取决于子元素的高度,百分比相对于父元素高度

  1. 上下外边距的合并

两个常规流块盒,上下外边距相邻,会进行合并。

两个外边距取最大值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/865404.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Postman配置接口挡板

0、首先需要在postman上注册并登录账号(登录前最好先备份已有的报文) 如果你在登录后发现历史存储的报文不见了,不要担心,在退出登录后将会重新显示出来。你可以将之前备份的报文导入到登录后的workspace中使用1、进入Workspace,新建Collection 2、找到新建的collection…

vue3新建项目的DevTools Settings

找到vite.config.js 注释掉这两行就消失了

Linux文件系统的安全保障---Overlayroot!

`overlayroot` 是一种使用 OverlayFS 实现的功能,可将根文件系统挂载为只读,并通过一个临时的写层实现对文件系统的修改。这种方法非常适合嵌入式设备或需要保持系统文件完整性和安全性的场景。下文以 RK3568 平台为例,介绍制作 overlayroot 的详细步骤。 ​ 1. 制作精简文件…

DirectX 修复工具 V4.3 绿色增强版:完美解决 DirectX 和 C++ 问题,修复 0xc000007b 错误

介绍 DirectX 修复工具 V4.3 是一款高效的系统修复工具,专为解决 系统异常 和 C++ 运行库 问题而设计,尤其对解决 0xc000007b 错误有着极高的修复率。本工具支持对所有版本的 DirectX 进行修复,并在增强版中新增了对 C++ 运行库问题的修复,提供了一个全面且可靠的解决方案。…

用DevEco Studio模拟器这些能力 没真机也能高效调测鸿蒙原生应用

随着鸿蒙生态的快速发展,越来越多的开发者投身于鸿蒙原生应用的开发中。然而,在实际开发中,真机设备短缺、调测场景复杂等问题常困扰着开发者。为解决这些问题,华为在DevEco Studio上为开发者提供了模拟器(Emulator)功能,帮助开发者在真机匮乏或无真机时,高效且低成本地…

renben-openstack-使用操作

管理员操作 (1)上传一个qcow2格式的centos7镜像 (2)管理员------>云主机类型------>创建云主机类型名称:Centos7VCPU数量:1内存: 1024根磁盘: 10G其他的默认点击创建云主机类型即可界面会显示如下创建公网络 (1)创建公网管理员------>网络------>创建网络…

防护用具穿戴智能监测摄像机

防护用具穿戴智能监测摄像机在现代安全管理中扮演着越来越重要的角色。这些先进设备不仅仅是简单的监视工具,更是通过整合高级技术来提升工作效率和安全性,特别是在复杂环境和危险作业场所的应用日益广泛。防护用具穿戴智能监测摄像机不仅仅是一种安全设备,更是提升工作场所…

场景题:假设有40亿QQ号,但只有1G内存,如何实现去重?

当数据量比较大时,使用常规的方式来判重就不行了。例如,使用 MySQL 数据库判重,或使用 List.contains() 或 Set.contains() 判重就不行了,因为数据量太大会导致内存放不下,或查询速度太慢等问题。 1.空间占用量预测 正常情况下,如果将 40 亿 QQ 号存储在 Java 中的 int 类…

Forensia:红队后渗透的痕迹清理工具

简介: 红队反取证工具,用于在后期利用阶段消除一些足迹,减少有效载荷消耗并增加检测倒计时。可用于测试事件响应/取证团队的能力。 功能: 卸载Sysmon驱动 Gutmann方法文件粉碎 USNJrnl功能失效 预取功能失效 日志橡皮擦和事件日志禁用 用户辅助更新时间禁用 访问时间禁用 清…

DirectX修复工具:系统修复必备神器 修复工具 V4.3 绿色增强版

DirectX修复工具是一款专用于修复系统异常的工具,DirectX修复工具还是一款使用简单易上手操作且绿色、可免安装的修复工具。使用DirectX修复工具可自动更新C++组件且完美修复0xc000007b问题异常。如果你的电脑出现了DirectX的异常问题,可直接下载DirectX修复工具进行修复解决…

浅谈异地访问家庭网络的几种方案

家庭网络如何实现公网访问?想必是大家一直在探索的问题。本文带领大家一起来探究适合自己的解决方案吧! 为什么要实现公网访问? 要回答这个问题,每个人的答案或许不一样。但归纳在一起就是三个字爱折腾。在前面的文章中,我们讲到了如何将旧电脑打造属于自己的NAS,而如何远…

Visual Studio 2022 上架腾讯云 AI 代码助手了

近期在Visual Studio 市场上上架了腾讯云 AI 代码助手。该插件可以在 Visual Studio2022 版本(含社区版,版本不低于 17.6 即可)使用智能辅助编码能力,助力 Visual Studio 的开发者提高效率。我们在该平台上支持技术对话、代码补全、单元测试生成、解释代码、修复代码等场景…