可见格式化模型

可见格式化模型

外边距折叠

常规块盒子有一种机制叫作 外边距折叠

垂直方向上的两个外边距相遇时,会折叠成一个外边距。折叠后外边距的高度等于两者中较大的那个高度

外边距折叠只发生在文档常规文本流中块级盒子的垂直方向上

包含块

如果元素的定位方式为静态定位(position: static)或相对定位(position: realtive),则包含块的边界就计算到一个最近的父元素

该元素的display属性值必须能提供类似块级的上下文,如 block, inline-block, table-cell, list-item 等

默认情况下,width, height, margin 和 padding 的值为百分比时,就以该父元素的尺寸为计算依据。如果当前元素的定位模型改成了 absolute 或 fixed,那么计算依据就会发生变化

相对定位

相对定位的元素仍然会在文档流中占用初始的空间,但可以应用平移属性。

因此,这样平移元素会导致它遮挡其他元素

绝对定位

绝对定位会把元素拿出文档流,即不会再占用原来的空间

绝对定位元素的包含块是距离它最近的定位祖先,即 position 属性设置为 static 以外任意值的祖先元素

绝对定位的盒子脱离了常规文档流,因此很难使用它们创建随视口(viewport)宽度和内容长度变化而变化的自适应或响应式布局

固定布局

固定定位元素的包含块是视口(viewport)

固定定位可用来创建始终停留在窗口相同位置的浮动元素

很多网站都使用这个技术让导航区始终保持可见,有的固定侧栏,有的固定顶栏

浮动

浮动就是为了在网页中实现**文本环绕图片的效果而引入的一种布局模型 **

浮动会导致内容高度缺失,有如下解决方案:

  • 利用 clear 样式属性(clearFix)

    .clearFix::after {
        content: ‘‘;
        display: block;
        clear: both;
    }
    
  • 利用块级格式化上下文

    块级格式化上下文,规定了页面必须自动包含突出的浮动元素,而且所有块级盒子的左边界默认与包含块的左边界对齐。

    有如下规则允许元素建立内部的块级格式化上下文:

    • display 属性值设置为 inline-block 或 table-cell 之类的元素,可以为内容创建类似块级的上下文;
    • float 属性值不是 none 的元素;
    • 绝对定位的元素;
    • overflow 属性值不是 visible 的元素;

内在大小 与 外在大小

contain-floats 属性,使用这个关键字,可以仅通过以下代码就让元素包含浮动:

.myThing {
    min-height: contain-floats;
}

但是,目前支持这个关键字的浏览器还是较少,小心使用

可见格式化模型

上一篇:题解 P3336 [ZJOI2013]话旧


下一篇:Win8安装教程!笔记本用U盘安装Win8只需三步