《CSS世界》笔记四：流的保护与破坏

2024-03-27 18:54:58

上一篇：《CSS世界》笔记三：内联元素与对齐
下一篇：《CSS世界》笔记五：CSS层叠规则及元素隐藏

写在前面

原本博客名为“浮动与定位”，但是《CSS世界》第六章节的内容不仅有浮动定位，很大一部分篇幅都在讲BFC和overflow。更吸引人的是，作者将float/absolute/relative形容为“魔界三兄弟”，将原本枯燥的理论知识硬生生变成了玄幻小说。

absolute和float可以看作是“同父异母”的兄弟关系。它们的父亲是同一个人，是CSS世界的大魔王，属于魔界;但母亲不是一个人，absolute的母亲来自魔界，而 float的母亲来自人界

如果说float和absolute是同父异母的兄弟关系，那么relative则是absolute的亲大哥

当年魔界圣母position生了好几个儿子，其中一个就是法力很强也很霸道的absolute，考虑到日后absolute会找float的麻烦而去正常流世界，以其个性和霸道的能力，一定会影响正常流世界的秩序，于是圣母position让其性格敦实的大儿子relative直接在正常流世界生活，帮忙盯着absolute，不要让absolute这个小魔鬼到处惹是生非

一、浮动float与BFC

1.1 浮动

浮动本质：实现文字环绕效果

现阶段使用浮动一般是用来实现盒子水平显示（左右两栏布局），但是往往会造成浮动元素父盒子的塌陷；那么应该如何清除浮动的影响呢？

网上随意百度即可查询到清除浮动的方法：

  1. 父元素设置overflow属性来清除浮动
  2. 使用额外标签法
  3. 伪元素清除

上面2、3两种方法都是用clear进行清除，而clear清除浮动属性本质：clear 属性是让自身不能和前面的浮动元素相邻，从而做到了清除浮动的效果。例子如下：

/* ul>li*7 */

li {
    width: 20px;
    height: 20px;
    background-color: #ccc;
    margin: 5px;
    float: left;
}
li:nth-of-type(3) {
    clear: both;
}

结果如下：
《CSS世界》笔记四：流的保护与破坏

而“父元素设置overflow属性”的方式则是利用了BFC的特性（下面将会详细讲解）

1.2 结界BFC

BFC全称为block formatting context，中文为“块级格式化上下文”。相对应的还有IFC，也就是inline formatting context，中文为“内联格式化上下”

BFC表现原则：如果一个元素具有 BFC，内部子元素再怎么翻江倒海、翻云覆雨，都不会影响外部的元素。所以，BFC 元素是不可能发生 margin 重叠的，因为 margin 重叠是会影响外面的元素的；BFC 元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动则父元素高度塌陷，必然会影响后面元素布局和定位，这显然有违 BFC 元素的子元素不会影响外部元素的设定

如何触发BFC：

  1. <html>根元素
  2. float 的值不为 none
  3. overflow 的值为 auto、scroll 或 hidden
  4. display 的值为 table-cell、table-caption 和 inline-block 中的任何一个
  5. position 的值不为 relative 和 static

因此：只要满足上面任何一条（触发了BFC），元素就不会发生margin重叠和float带来的“高度塌陷”问题

张大大布拉布拉用了大量的篇幅对比了实现BFC的各种方式，最后得出结论：overflow：hidden是触发BFC最理想副作用最小的方式

1.3 float+BFC实现健壮的两栏布局

<div class="father">
    <img src="1.jpg">
    <p class="bfc">我是帅哥，好巧啊，我也是帅哥，原来看这篇博客的人都是帅哥~</p>
</div>

.father {
    max-width: 200px;
    border: 1px solid #444;
}
.father img {
    float:left;
    width: 60px;
    margin-right: 10px;
}
.bfc {
    overflow: hidden;
}

展示如下：
《CSS世界》笔记四：流的保护与破坏

原理：利用BFC的结界特性避免了文字环绕（浮动），实现左侧固定，右侧自适应的两栏布局

二、overflow属性

再次声明：overflow:hidden是触发BFC的最佳结界

2.1 overflow与滚动条

滚动条相关知识

移动端的屏幕尺寸本身就有限，滚动条一般都是悬浮模式，不会占据可用宽度，但是在PC端，尤其Windows操作系统下，几乎所有浏览器的滚动栏都会占据宽度，而且这个宽度大小是固定的

如何获取浏览器滚动栏宽度：

<div class="box">
    <div id="in" class="in"></div>
</div>

.box { width: 400px; overflow: scroll; }

console.log(400 - document.getElementById("in").clientWidth);

自定义滚动条属性：

  • 整体部分，::-webkit-scrollbar;
  • 两端按钮，::-webkit-scrollbar-button;
  • 外层轨道，::-webkit-scrollbar-track;
  • 内层轨道，::-webkit-scrollbar-track-piece;
  • 滚动滑块，::-webkit-scrollbar-thumb;
  • 边角，::-webkit-scrollbar-corner。

平时开发中比较常用的三个属性：

::-webkit-scrollbar { /* 血槽宽度 */
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb { /* 拖动条 */
    background-color: rgba(0,0,0,.3);
    border-radius: 6px;
}
::-webkit-scrollbar-track { /* 背景槽 */
    background-color: #ddd;
    border-radius: 6px;
}

小技巧：处理页面滚动条晃动问题（一般出现在加载数据后超过一屏）

html {
    overflow-y: scroll; /* for IE8 */
}
:root {
    overflow-y: auto;
    overflow-x: hidden;
}
:root body {
    position: absolute;
}
body {
    width: 100vw;
    overflow: hidden;
}

2.2 overflow与文本溢出点点点

单行文本溢出：

.ell {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

多行文本溢出（此处为2行）：

.ell-rows-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

2.3 overflow与锚点定位

两种情况可以触发锚点定位行为的发生：

（1）URL地址中的锚链与锚点元素对应并有交互行为; 

<a href="#1">发展历程></a>

<h2 id="1">发展历程</h2>

利用上面的结构，点击a标签，能够使页面滚动到h2处

（2）focus 锚点定位，可focus的锚点元素处于focus状态

“focus 锚点定位”指的是类似链接或者按钮、输入框等可以被 focus 的元素在被 focus 时发生的页面重定位现象。举个很简单的例子，在 PC 端，我们使用 Tab 快速定位可 focus 的元素的时候，如果我们的元素正好在屏幕之外，浏览器就会自动重定位，将这个屏幕之外的元素定位到屏幕之中

锚点定位的两个小案例，以供参考：

  1. 锚点定位：返回页面顶部
  2. 锚点定位：简易tab切换

注意！注意！注意！元素设置了 overflow:hidden 声明，里面内容高度溢出的时候，滚动依然存在，仅仅滚动条不存在!，所以我们能用锚点定位或者js控制滚动

三、绝对定位absolute

3.1 absolute的包含块

（1）块级元素：相对于第一个position不为static的祖先元素，直到html

（2）行内元素：

  1. 单行：假设给内联元素的前后各生成一个宽度为 0 的内联盒子(inline box)，则这两个内联盒子的 padding box 外面的包围盒就是内联元素的“包含块”
  2. 多行：未定义行为，我们以chrome表现为主(由第一行开头和最后一行结 尾的内联盒子共同决定)

直接看概念一般是一头雾水，上图吧(红色虚线区域为包含块)

《CSS世界》笔记四：流的保护与破坏

案例：基于行内元素定位的tips实现

<div class="tip icon" data-title="删除"></div>

.icon {
    margin: 50px 0 0 50px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(http://demo.cssworld.cn/images/6/delete.png) no-repeat center;
}

.tip {
    position: relative;
    &::before,
    &::after {
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        visibility: hidden;
    }
    &::before {
        content: attr(data-title);
        top: -33px;
        padding: 2px 10px 3px;
        line-height: 18px;
        border-radius: 2px;
        background-color: #333;
        text-align: left;
        color: #fff;
        font-size: 12px;
        /* 必须加，否则一柱擎天 */
        white-space: nowrap;
    }
    &::after {
        content: "";
        border: 6px solid transparent;
        border-top-color: #333;
        top: -10px;
    }
    &:hover::before,
    &:hover::after {
        transition: visibility .1s .1s;
        visibility: visible;
    }
}

最终实现效果：
《CSS世界》笔记四：流的保护与破坏

3.2 absolute无依赖定位

注意：absolute 是非常独立的 CSS 属性值，其样式和行为表现不依赖其他任何 CSS 属性就可以完成，正是基于这一点才有了无依赖定位的强大

首先思考一个问题：如果一个标准流元素后面接着一个absolute元素（未设置left等方位属性），此时如何显示？定位元素后又接着一个标准流元素，此时又该如何显示？

<div class="demo">
    哈哈，我在定位元素前面
    <span class="poa"></span>
    呐！我还在定位元素后面呢
</div>

.poa {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(255, 0, 0, .5);
}

展示结果：
《CSS世界》笔记四：流的保护与破坏

仅设置绝对定位时，定位元素仍会保持在html结构位置，且不占据空间。由此，我们可以使用margin相对于原始位置定位该元素以实现各种功能。下面是几个案例：

（1）案例1：简单图标定位

《CSS世界》笔记四：流的保护与破坏

.icon-hot {
    position: absolute;
    width: 28px;
    height: 11px;
    margin: -6px 0 0 2px;
}

（2）案例2：校验表单

《CSS世界》笔记四：流的保护与破坏

/* 邮箱报错小图标 */
.icon-warn {
    position: absolute;
    margin-left: -18px;
    width: 16px; height: 20px;
    background: url(/images/6/warn.gif) no-repeat center;
}

/* 定位在盒子外部的红色星号 */
.regist-star {
    position: absolute;
    margin-left: -1em;
    font-family: simsun;
    color: #f30;
}

（3）案例3：input中的icon和下拉

《CSS世界》笔记四：流的保护与破坏

/* 搜索按钮的无依赖绝对定位 */
.search-btn {
    width: 20px; height: 20px;
    border: 9px solid #fff;
    background: #ddd url(search.png) no-repeat center;
    position: absolute; margin: 1px 0 0 -40px;
}

/* 下拉列表的无依赖绝对定位 */
.search-datalist {
    position: absolute;
    width: 248px;
    border: 1px solid #e6e8e9;
    background-color: #fff;
}

3.3 absolute + text-align用法

text-align 居然可以改变 absolute 元素的位置

<p><img src="1.jpg"></p>

p { text-align: center; }
img { position: absolute; }

《CSS世界》笔记四：流的保护与破坏

原理：img前的“幽灵空白节点”受text-align:center;的影响居中，图片的“无依赖绝对定位”在“幽灵空白节点”后面

案例：text-align实现的右外侧定位

《CSS世界》笔记四：流的保护与破坏

<div class="constr">
    <div class="alignright">
        <span class="follow">
            <img src="circle.png">
            <img src="backtop.png">
        </span>
    </div>
</div>

.constrcons {
    width: 80%;
    margin: auto;
    background-color: #f0f3f9;
}
.alignright {
    height: 0;
    text-align: right;
    overflow: hidden;
}
.alignright:before {
    content: "\2002";
}

.follow {
    position: fixed;
    bottom: 100px;
    z-index: 1;
}
.follow > img {
    display: block;
    margin: 10px;
}

优势：icon相对于主体内容定位，而不是相对于html

3.4 absolute + clip用法

剪裁属性 clip 要想起作用，元素必须是绝对定位或者固定定位，也就是 position 属性值必须是 absolute 或者 fixed

最佳可访问性隐藏

.clip {
    position: absolute;
    clip: rect(0 0 0 0);
}
采用这种方法隐藏的元素原本的行为特性也很好用。例如，依然可以被 focus，而且非常难得的是就地剪裁，因为属于“无依赖的绝对定位”

3.5 absolute流体特性

当 absolute 遇到 left/top/right/bottom 属性的时候，absolute 元素才真正变成绝对定位元素

absolute流体特性的条件是：对立方向同时发生定位的时候

  • 如果设置left:0; right:0;表现为格式化宽度，水平方向保持流动性
  • 如果设置top:0; bottom:0;表现为格式化高度，垂直方向保持流动性

绝对定位元素的margin:auto的填充规则和普通流体元素的一模一样:

  • 如果一侧定值，一侧 auto，auto 为剩余空间大小;
  • 如果两侧均是 auto，则平分剩余空间。

案例：利用absolute的流体特性实现元素的水平垂直居中

.element {
    width: 300px;
    height: 200px;
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
}

四、总结

  • 浮动float以及clear属性
  • BFC触发条件及利用BFC实现更为健壮的布局
  • overflow属性
  • 内联盒子绝对定位的包含块
  • absolute无依赖定位
  • absolute裁剪及流体特性

上一篇：《CSS世界》笔记三：内联元素与对齐
下一篇：《CSS世界》笔记五：CSS层叠规则及元素隐藏

本文转载于:猿2048《CSS世界》笔记四：流的保护与破坏

上一篇：5.28 雅诺达的第一天


下一篇：position与float