`
keiite
  • 浏览: 67224 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
最近访客 更多访客>>
社区版块
存档分类
最新评论

重翻译:css2.1规范 8.3.1节(margin边距折叠)

    博客分类:
  • CSS
阅读更多

为什么要翻译这篇说明?css2本有人已翻译过,但看一下,很粗糙(不是说自己就怎么怎么样啊,翻译者真的是很值得敬佩的!),近来跟css与xhtml接触得越来越多,但接触得越多,迷惑却总不见少。

现在我觉得很多问题根本不能称之为问题,原因就在于我们的草率理解,比如杀鸡用牛刀,不是不可以,是不合理、不恰当,根源错了,表象也就会错了,如果解决问题从表象入手,难免总会摸不着头脑,还是那句话,要脚踏实地,切莫浮躁。

在这个说明中,“collapsing margins”(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容、padding区域、border边框

或使用清除分离方法)结合表示为一个单独的margin。

在css2.1中,水平的margin不会被折叠。

垂直margin可能在一些盒模型中被折叠:


     1、在常规文档流中,2个或以上的块级盒模型相邻的垂直margin会被折叠。
    最终的margin值计算方法如下:
        a、全部都为正值,取最大者;
        b、不全是正值,则都取绝对值,然后用正值减去最大值;
        c、没有正值,则都取绝对值,然后用0减去最大值。
    注意:相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。

    2、相邻的盒模型中,如果其中的一个是浮动的(floated),垂直margin不会被折叠,甚至一个浮动的盒模型和它的子元素之间也是这样。

    3、设置了overflow属性的元素和它的子元素之间的margin不会被折叠(overflow取值为visible除外)。

    4、设置了绝对定位(position:absolute)的盒模型,垂直margin不会被折叠,甚至和他们的子元素之间也是一样。

    5、设置了display:inline-block的元素,垂直margin不会被折叠,甚至和他们的子元素之间也是一样。

    6、如果一个盒模型的上下margin相邻,这时它的margin可能折叠覆盖(collapse through)它。在这种情况下,元素的位置(position)取决于它的相邻元素的margin是否被折叠。
        a、如果元素的margin和它的父元素的margin-top折叠在一起,盒模型border-top的边界定义和它的父元素相同。
        b、另外,任意元素的父元素不参与margin的折叠,或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零,那么元素的border-top边界位置和原来一样。
    一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom折叠。
    注意,那些已经被折叠覆盖的元素的位置对其他已经被折叠的元素的位置没有任何影响;只有在对这些元素的子元素定位时,border-top边界位置才是必需的。

    7、根元素的垂直margin不会被折叠。


浮动的块级元素的margin-bottom总是与它后面的浮动块级兄弟元素(floated next in-flow block-level sibling)的margin-top相邻,除非那个同级元素使用了清除操作。

浮动的块级元素的margin-top和它的第一个浮动块级子元素(floated first in-flow block-level child)的margin-top相邻(如果该元素没有border-top,没有padding-top,并且子元素没有使用清除操作)。

浮动的块级元素的margin-bottom如果符合下列条件,那么它和它的最后一个浮动块级子元素的margin-bottom相邻(如果该元素没有指定padding-bottom或border):
    a、指定了height:auto
    b、min-height小于元素的实际使用高度(height)
    c、max-height大于元素的实际使用高度(height)

如果一个元素的min-height属性设置为0,那么它所拥有的margin是相邻的,并且它既没有border-top和border- bottom,也没有padding-top和padding-bottom,它的height属性可以是0或auto,它不能包含一个内联的盒模型(line box),它所有的浮动子元素(如果有的话)的margin也都是相邻的。

当一个元素拥有的margin折叠了,并且它使用了清除操作,那么它的margin-top会和紧随其后的兄弟元素的相邻margin折叠,但结果是它的margin将无法和其块级父元素的margin-bottom折叠。

折叠操作是以padding、margin、border的值为基础的(即在浏览器解析所有这些值之后),折叠后的margin计算将覆盖已使用的不同margin的值。

分享到:
评论

相关推荐

    elasticsearch-8.3.1-windows-x86_64.zip和elasticsearch-8.3.1-linux

    2022年7月号从官网下载最新版: window版本: elasticsearch-8.3.1-windows-x86_64.zip linux版本x86_64版本: elasticsearch-8.3.1-linux-x86_64.tar.gz

    gcc-8.3.1安装包及其依赖包

    gcc-8.3.1-5.1.el8.x86_64.rpm gcc-c++-8.3.1-5.1.el8.x86_64.rpm gcc依赖包: cpp-8.3.1-5.1.el8.x86_64.rpm glibc-devel-2.28-127.el8.x86_64.rpm glibc-headers-2.28-127.el8.x86_64.rpm isl-0.16.1-6.el8.x86_64...

    SecureCRT 8.3.1(含注册机)

    SecureCRT 8.3.1是该软件的一个版本,它可能包含了一些新特性、性能优化或修复了已知问题。具体到这个压缩包,我们看到有以下几个文件: 1. **scrt831-x64.exe**:这是SecureCRT 8.3.1的64位安装程序。用户可以通过...

    QD8.3.1-2022设计开发控制规范定义.pdf

    从给定的文件信息来看,文件标题和描述均为"QD8.3.1-2022设计开发控制规范定义.pdf",表明这是一个设计开发控制规范的文件,目的是定义相关的控制标准。文件内容中出现了大量的数字序列、字母组合和一些可能的代码...

    Notepad++ 8.3.1

    Notepad++ 8.3.1 是一款广受欢迎的免费文本编辑器,尤其在IT行业中,它被开发者和程序员广泛使用。这款软件以其强大的功能、轻量级的体积以及对多种编程语言的良好支持而备受赞誉。它不仅仅是一个基础的文本编辑器,...

    libgfortran5-8.3.1-2.1.1.el7.x64-86.rpm.tar.gz

    1. 文件名:"libgfortran5-8.3.1-2.1.1.el7.x64-86.rpm.tar.gz"。文件名表明该文件是一个压缩包,其中包含了rpm格式的软件包文件。rpm是Red Hat Package Manager的缩写,它是一个Linux系统上用于软件安装和管理的...

    cpp-8.3.1-4.5.ky10.aarch64.rpm

    cpp-8.3.1-4.5.ky10.aarch64.rpm

    postgresql 8.3.1

    postgresql 8.3.1 source

    CSS网站布局实录 (第二版)PDF版

    6.5.2 margin与padding边距缩写 6.5.3 border边框缩写 6.5.4 list列表缩写 6.5.5 background背景缩写 6.5.6 color颜色缩写 6.6 CSS代码优化 6.6.1 增加代码重用率 6.6.2 使用样式覆盖进行简化 6.7 园角样式设计 ...

    gcc 8.3.1离线安装资源包和依赖包

    标题“gcc 8.3.1离线安装资源包和依赖包”表明,这是一个针对GCC 8.3.1版本的离线安装包,适用于那些无法或不方便连接到互联网的环境。离线安装意味着你需要下载所有必要的文件,包括GCC本身和它所依赖的库,然后在...

    gdb-8.3.1.tar.gz

    《GNU调试器GDB-8.3.1详解》 GNU调试器(GDB)是开源社区中的一个强大工具,用于调试C、C++、Fortran等编程语言编写的程序。GDB-8.3.1是这个调试器的最新版本,它提供了丰富的功能和改进,使得开发者能够更高效地...

    最新版windows logstash-8.3.1-windows-x86_64.zip

    最新版的 Logstash 8.3.1 是针对 Windows 平台的 x86_64(即64位)架构设计的。这个版本包含了对Windows系统的优化和兼容性改进,确保在64位Windows操作系统上稳定运行。它提供了一个完整的可执行文件包,其中包含了...

    最新版linux logstash-8.3.1-linux-x86_64.tar.gz

    最新版的 Logstash 8.3.1 提供了诸多新功能和性能优化,适用于处理大量结构化和非结构化的数据。 首先,让我们深入了解一下Logstash的工作原理。它由三个主要组件组成:输入(Inputs)、过滤(Filters)和输出...

    jmc-8.3.1_linux-x64.tar.gz

    标题 "jmc-8.3.1_linux-x64.tar.gz" 暗示着这是一个针对Linux x64架构的Java Mission Control (JMC)版本8.3.1的压缩包文件。Java Mission Control是Oracle提供的一款强大的Java应用程序性能监控和故障诊断工具,它为...

    SecureCRT8.3.1

    - **会话配置文件**:可以保存各种连接参数,方便快速重连。 - **文件传输**:内建SFTP(SSH File Transfer Protocol)支持,安全地进行文件上传和下载。 - **脚本支持**:通过批处理脚本自动化重复性任务,节省...

    最新版windows kibana-8.3.1-windows-x86_64.zip

    最新版的 Kibana 8.3.1 版本专为 Windows x86_64 架构设计,提供了强大的数据分析和展示功能,适用于各种业务场景。在这个版本中,Kibana 优化了性能,提升了用户体验,并引入了一些新的特性和改进。 首先,Kibana ...

    Pillow-8.3.1-cp39-cp39-win32

    Pillow-8.3.1-cp39-cp39-win32

    钢制船结构设计课程设计报告过程.doc

    - 船中部底板:《规》2.3.2.1和8.3.1要求,船底板厚度通过多个公式计算,包括考虑航区、构造方式等因素。实际取值为6.242mm至6.630mm之间,确保满足强度需求。 - 舭列板:按照《规》2.3.3.1,舭列板厚度比船底板...

    kibana-8.3.1-linux-x86_64.tar.gz和kibana-8.3.1-windows-x86_64.zip

    2022 年7月5日从官网下载最新版 linux Linux x86_64版本: kibana-8.3.1-linux-x86_64.tar.gz window 版本 kibana-8.3.1-windows-x86_64.zip

Global site tag (gtag.js) - Google Analytics