《CSS世界》筆記四:流的保護與破壞

上一篇:《CSS世界》筆記三:內聯元素與對齊
下一篇:《CSS世界》筆記五:CSS層疊規則及元素隱藏php

寫在前面

本來博客名爲「浮動與定位」,可是《CSS世界》第六章節的內容不只有浮動定位,很大一部分篇幅都在講BFC和overflow。更吸引人的是,做者將float/absolute/relative形容爲「魔界三兄弟」,將本來枯燥的理論知識硬生生變成了玄幻小說。css

absolutefloat能夠看做是「同父異母」的兄弟關係。它們的父親是同一我的,是CSS世界的大魔王,屬於魔界;但母親不是一我的, absolute的母親來自魔界,而 float的母親來自人界

若是說floatabsolute是同父異母的兄弟關係,那麼relative則是absolute的親大哥html

當年魔界聖母position生了好幾個兒子,其中一個就是法力很強也很霸道的absolute,考慮到往後absolute會找float的麻煩而去正常流世界,以其個性和霸道的能力,必定會影響正常流世界的秩序,因而聖母position讓其性格敦實的大兒子relative直接在正常流世界生活,幫忙盯着absolute,不要讓absolute這個小魔鬼處處惹是生非web

1、浮動float與BFC

1.1 浮動

浮動本質:實現文字環繞效果chrome

現階段使用浮動通常是用來實現盒子水平顯示(左右兩欄佈局),可是每每會形成浮動元素父盒子的塌陷;那麼應該如何清除浮動的影響呢?segmentfault

網上隨意百度便可查詢到清除浮動的方法瀏覽器

  1. 父元素設置overflow屬性來清除浮動
  2. 使用額外標籤法
  3. 僞元素清除

上面二、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;
}

結果以下:
圖片描述url

而「父元素設置overflow屬性」的方式則是利用了BFC的特性(下面將會詳細講解)spa

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;
}

展現以下:
圖片描述

原理:利用BFC的結界特性避免了文字環繞(浮動),實現左側固定,右側自適應的兩欄佈局

2、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控制滾動

3、絕對定位absolute

3.1 absolute的包含塊

(1)塊級元素:相對於第一個position不爲static的祖先元素,直到html

(2)行內元素:

  1. 單行:假設給內聯元素的先後各生成一個寬度爲 0 的內聯盒子(inline box),則這兩個內聯盒子的 padding box 外面的包圍盒就是內聯元素的「包含塊」
  2. 多行:未定義行爲,咱們以chrome表現爲主(由第一行開頭和最後一行結 尾的內聯盒子共同決定)

直接看概念通常是一頭霧水,上圖吧(紅色虛線區域爲包含塊)

圖片描述

案例:基於行內元素定位的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;
    }
}

最終實現效果:
圖片描述

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);
}

展現結果:
圖片描述

僅設置絕對定位時,定位元素仍會保持在html結構位置,且不佔據空間。由此,咱們可使用margin相對於原始位置定位該元素以實現各類功能。下面是幾個案例:

(1)案例1簡單圖標定位

圖片描述

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

(2)案例2校驗表單

圖片描述

/* 郵箱報錯小圖標 */
.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)案例3input中的icon和下拉

圖片描述

/* 搜索按鈕的無依賴絕對定位 */
.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; }

圖片描述

原理:img前的「幽靈空白節點」受text-align:center;的影響居中,圖片的「無依賴絕對定位」在「幽靈空白節點」後面

案例text-align實現的右外側定位

圖片描述

<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;
}

4、總結

  • 浮動float以及clear屬性
  • BFC觸發條件及利用BFC實現更爲健壯的佈局
  • overflow屬性
  • 內聯盒子絕對定位的包含塊
  • absolute無依賴定位
  • absolute裁剪及流體特性

上一篇:《CSS世界》筆記三:內聯元素與對齊
下一篇:《CSS世界》筆記五:CSS層疊規則及元素隱藏

相關文章
相關標籤/搜索