首页 > 其他分享 >10.常规流

10.常规流

时间:2022-10-30 19:36:22浏览次数:40  
标签:10 百分比 盒子 包含 auto 常规 margin

# 常规流
盒模型:规定单个盒子的规则
视觉格式化模型(布局规则):页面中的多个盒子排列规则
视觉格式化模型,大体上将页面中盒子的排列分为三种方式:
1. 常规流 2. 浮动 3. 定位
## 常规流布局
常规流、文档流、普通文档流、常规文档流
所有元素,默认情况下,都属于常规流布局
总体规则:块盒独占一行,行盒水平依次排列
包含块(containing block):每个盒子都有它的包含块,包含块决定了盒子的排列区域。
绝大部分情况下:盒子的包含块,为其父元素的内容盒
**块盒**
1. 每个块盒的总宽度,必须刚好等于包含块的宽度
宽度的默认值是auto
margin的取值也可以是auto,默认值0
auto:将剩余空间吸收掉
width吸收能力强于margin
若宽度、边框、内边距、外边距计算后,仍然有剩余空间,该剩余空间被margin-right全部吸收
在常规流中,块盒在其包含快中居中,可以定宽、然后左右margin设置为auto。
2. 每个块盒垂直方向上的auto值
height:auto, 适应内容的高度
margin:auto, 表示0
3. 百分比取值
padding、宽、margin可以取值为百分比
以上的所有百分比相对于包含块的宽度。
高度的百分比:
1). 包含块的高度是否取决于子元素的高度,设置百分比无效 2). 包含块的高度不取决于子元素的高度,百分比相对于父元素高度
4. 上下外边距的合并
两个常规流块盒,上下外边距相邻,会进行合并。
两个外边距取最大值。

标签:10,百分比,盒子,包含,auto,常规,margin
From: https://www.cnblogs.com/zm227447/p/16841981.html

相关文章

  • 10月30周报
    本周总结json模块补充针对中文会自动转码我们在查看的时候不方便我们要让他不自动转码ensure_ascii=False正则表达式字符组[0123456789] 匹配0到9任意一个数(全......
  • 2022.10代码大全阅读心得1
    第11章:变量名的力量问题:怎样给一个变量命名?长名字还是短名字?命名的最佳实践有哪些?有哪些常见的命名方法?在命名中应该要避免的东西有哪些?怎样给一个变量命名?通......
  • 2022.10代码大全阅读心得2
    第十四章组织直线型代码14.1必须有明确顺序的代码对于具有明显的顺序关系的代码,应该使用顺序结构。对于隐含的顺序关系,应该:去除不合理的依赖关系(如不应该在Calculat......
  • 10.30
    本周总结1.正则表达式2.re模块3.第三方模块4.网络爬虫模块之requestsmk模块5.自动化办公领域之openpyxl模块6.hashlib加密模块7.subprocess模块8.logging日志模块......
  • 10.24-10.28周末回顾
    目录一、购物车二、hashlib模块1.加密的含义,如何理解加密2.加密算法的基本使用3.加密补充说明4.加密操作的用处5.优秀hash算法的特性三、子进程模块subprocess模块四、logg......
  • 【2022.10.28】Vue基础学习(4)
    内容概括1.计算属性重写过滤案例2.监听属性3.组件介绍和定义4.父子通信之父传子5.父子通信之子传父6.ref属性7.动态组件keep-alive8.插槽9.vue-cli内容......
  • [2022.10.30]常用类—Date与DateFormat
    importorg.junit.Test;importjava.util.Date;/*1.用system类中的currentTimeMillis()方法2.java.util.Date类1)两个构造器的使用......
  • 10-30内容回顾
    内容总结正则表达式/re模块使用openpyxl模块与爬虫实战hashlib,subprocess,logging模块正则表达式/re模块正则表达式一般是用于匹配数据以及筛选数据正则表达式是......
  • Faker团队展示10.30
    Faker团队展示团队特点及宣言团队特点:人狠话多、人菜瘾大团队宣言:有cat了,不想和没cat的人说话了   团队成员介绍队长:20201215王馨瑶个人简......
  • 10的第三次周报
    目录json补充正则匹配字符组特殊符号量词网络爬虫第三方模块第三方模块的下载安装exceljson补充取消中文转义ensuer_ascii=False正则匹配直接匹配字符直接填写需要......