關於CSS的碎片學習

時間  2019-11-07
標籤 關於 css 碎片 學習 欄目 CSS 简体版
原文   原文鏈接

幽靈空白節點

css世界原話：php

「幽靈空白節點」是內聯盒模型中很是重要的一個概念，具體指的是：在 HTML5 文檔聲明 中，內聯元素的全部解析和渲染表現就如同每一個行框盒子的前面有一個「空白節點」同樣。這 個「空白節點」永遠透明，不佔據任何寬度，看不見也沒法經過腳本獲取，就好像幽靈同樣， 但又確確實實地存在，表現如同文本節點同樣。css

<!--注意，這裏有一個前提，文檔聲明必須是 HTML5 文檔聲明-->
<!doctype html>
<html>
    <head></head>
    <body>
        <div><span></span></div>
    </body>
    <style> div { background-color: #cd0000; } span { display: inline-block; } </style>
</html>
複製代碼

實際效果圖以下： html

幽靈節點圖

然而當咱們給div加一下font-size:0的時候，獲得解決，效果以下：瀏覽器

字體大小爲0的時候

再舉個栗子：bash

<div><span></span></div>
<style> div { border: 2px dashed #cd0000; } span { padding: 50%; background-color: gray; } </style>
複製代碼

效果圖：佈局

幽靈節點
並非正方形，可是設置 font-size: 0後：

字體大小爲0的時候

因此不少寬高與預期不符的時候，能夠考慮一下是否是幽靈節點的問題，設置font-size: 0試試。字體

超越最大原則

!important能夠被「覆蓋」，min-width/max-width、min-height/max-height屬性與width/height屬性有本身的原則：flex

<!--寬度最後爲200px-->
<img src='helloWorld.jpg' style='width: 300px!important;'>
<style> img { max-width: 200px; } </style>
複製代碼
<!--寬度最後爲400px-->
<img src='helloWorld.jpg' style='width: 300px!important;'>
<style> img { max-width: 200px; min-width: 400px; } </style>
複製代碼

content用法

  1. content的值能夠爲空字符串，也就是content: ''，沒有必要在裏面加個點；ui

  2. content不只僅能夠在before和after等僞元素裏面使用，能夠在普通標籤裏面用來加載圖片，好比<img> <style> img { content: url(helloWorld.jpg); }</style>與<img src='helloWorld.jpg'>視覺效果等效。但使用content生產的的圖片沒法控制，不能控制大小等；搜索引擎

  3. 使用content生成的內容與元素，不能被選中和複製，沒法被屏幕閱讀的設備讀取，也沒法被搜索引擎抓取，因此重要的文本不要使用；

  4. content支持Unicode，部分地方很好用，不如不用使用過多的
    標籤，而是加一個如下的代碼用於換行；

    :after{
    content: '\A';
    white-space: pre;
}
複製代碼

    順便分享一個只用css生成...的有趣例子:連接

  5. content還有以一個有趣的玩法就是計數器，簡單的說就是用counter-reset註冊一下，counter-increment 添加計數，counter()顯示計數，下面是一個簡單的例子，但運用場景不少

    <div class="main">
    <div>第一條</div>
    <div>第二條</div>
    <div>第三條</div>
    <div>第四條</div>
</div>
<style> .main { counter-reset: kakaka; } .main > div::before { content: counter(kakaka)'.'; counter-increment: kakaka 1; } </style>
複製代碼

    效果圖：

    計數器

行內標籤的padding

行內元素的padding上下不會改變文檔流，可是會產生遮蓋，且不能使用z-index調整

<span class="li">第一條</span>
<span class="li">第二條</span>
<br/>
<span class="li">第三條</span>
<span class="li">第四條</span>
<style> span { padding: 10px; } span:nth-child(1) { background-color: red; } span:nth-child(2) { background-color: yellowgreen; z-index:1;/* 無效 */ } span:nth-child(4) { background-color: rebeccapurple; } span:nth-child(5) { background-color: brown; } </style>
複製代碼

效果圖：

行內元素的padding

關於margin合併特性

margin在合併會出如今塊級元素（不包含浮動和絕對定位的），且在垂直方向（不使用writing-mode改變文檔流方向）的時候。

  1. 兄弟元素上下合併

    <p>第一條</p>
<p>第二條</p>
<p>第三條</p>
<p>第四條</p>
<style> p { margin: 20px; } </style>
複製代碼

  2. 父子元素合併

    <div>
    <p>第一條</p>
    <p>第二條</p>
    <p>第三條</p>
    <p>第四條</p>
</div>
<div>我是底部</div>
<style> div { margin-bottom: 10px; } p { margin: 20px; } </style>
複製代碼

  3. 空元素合併

    <p>第一條</p>
<div></div>
<p>第二條</p>
<p>第三條</p>
<p>第四條</p>
<style> div { margin: 30px; } p { margin: 20px; } </style>
複製代碼

規則總結起來：正正取大值、正負值相加、負負最負值

一旦瞭解到了這些margin合併的特性，就不用單獨margin-top: 20px;等麻煩的操做。

關於line-height

  1. 容器的大小實際不是font-size撐開的，而是line-height決定的;
  2. 文字的行距 = line-height - font-size;
  3. 但是設置line-height: 1.5不必定要用px等單位，此時line-height爲font-size的1.5倍；
  4. 文字近似垂直居中，實際上是能夠經過line-height設置高度控制的，不用設置height，若是存在height的話，請設置相等。之因此說是文字垂直居中爲近似，由於對於盒模型來講，垂直方向會偏下，緣由在於css的行距上下等分機制，通常會誤差1~2px。

absolute的單獨使用

在我最先使用absolute的時候，總之直接把relative做爲父元素結合起來用，其實這是認知上面的問題。

absolute 是很是獨立的 CSS 屬性值，其樣式和行爲表現不依賴其餘 任何 CSS 屬性就能夠完成 ——《css世界》

absolute具備相對特性的無依賴絕對定位，這樣說可能會有些很差理解。

當給元素添加absolute時，若是元素沒有定義盒模型，會以inline-block來計算展現。可是區別與直接添加inline-block的是，absolute不改變正常流的尺寸空間。也就是說，不管咱們怎麼修改absolute定位的元素的寬高，都不會影響到正常流佈局。

下圖來自《css世界》論壇

absolute定位

不使用relative做爲父元素，單一使用absolute有不少使用的空間與場景：

  1. 在元素擁有absolute屬性，且不受父級overflow剪切影響（但父級也是定位元素時會影響）。

  2. 利用absolute的流體特性實現垂直水平居中

    <div class="element"></div>
<style> .element { width: 300px; height: 200px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; /* 創建流體特性 */ margin: auto; /*自動分配空間*/ background-color: red; } </style>
複製代碼

    效果圖以下：

    absolute的流體特性實現垂直水平居中

relative的單獨使用

relative不只僅能夠牽制absolute的定位，自己具備頗有趣的適應場景。

「無侵入」式定位，換句話說就是不影響到其餘元素的定位，根據自身本來位置定位。

<div class="element"></div>
<style> .element { width: 300px; height: 200px; position: relative; left: 100px; top: 200px; right: 10px; bottom: 10px; /* 無效，當left/right、top/bottom同時存在時，取left和top*/ background-color: red; } </style>
複製代碼

效果圖以下：

「無侵入」式定位

能夠適應不少場景，好比在不影響到原來文檔流調整某個元素位置。

下圖來自《css世界》：

不變換
變換
左邊時總體上移，右邊的只是圖片偏移了

不過建議少使用relative，由於正是「無侵入」致使了出現了疊層，須要z-index才能解決。

z-index「不犯二」準則

《css世界》提出的：

對於非浮層元素，避免設置 z-index 值，z-index 值沒有任何道理須要超過 2。因爲 z-index 不能超過 2，所以，我稱其爲「不犯二」準則。

這是一條經驗準則，能夠有效下降往後遇到 z-index 樣式問題的風險。

先講一下爲何須要這個準則。

（1）定位元素一旦設置了 z-index 值，就從普通定位元素變成了層疊上下文元素，相互 間的層疊順序就發生了根本的變化，很容易出現設置了巨大的 z-index 值也沒法覆蓋其餘元 素的問題。

（2）避免 z-index「一山比一山高」的樣式混亂問題。此問題多發生在多人協做以及後期 維護的時候。例如，A 小圖標定位，習慣性寫了個 z-index:9；B 一看，本身原來的實現被覆 蓋了，立馬寫了個 z-index:99；結果比彈框組件層級還高，那還得了，立馬彈框組件來一個 z-index:999999；誰知後來，彈框中又要有出錯提示效果……顯然，最後項目的 z-index 層級管理就是一團糟。

我以爲頗有道理，若是真的出現超過的狀況應該首先審視一下本身的佈局。

outline和box-shadow的使用

outline不佔用空間，這一點和border不一樣，border佔據空間會影響到寬高，而outline不會影響到正常流。

<div></div>
<style> div { position: absolute; left: 0;right: 0;top: 0;bottom: 0; margin: auto; width: 100px; height: 100px; background-color: black; border: 20px solid red; outline: 30px solid rebeccapurple; } </style>
複製代碼

outline與border

這樣的話咱們徹底就能夠直接利用這種方式作遮罩層了，一個標籤搞定。

<div>遮罩層</div>
<style> div { position: absolute; left: 0;right: 0;top: 0;bottom: 0; margin: auto; width: 100px; height: 100px; background-color: white; outline: 9999px solid #0000005e;/*線寬設置足夠大，顏色爲透明色*/ } </style>
複製代碼

outline遮罩層

可是以上還有一個很大的問題，若是遮罩層爲四角爲圓弧呢？

<div>遮罩層</div>
<style> div { position: absolute; left: 0;right: 0;top: 0;bottom: 0; margin: auto; width: 100px; height: 100px; background-color: white; outline: 9999px solid #0000005e; border-radius: 20px; border: 1px solid red;/*爲了區分效果*/ } </style>
複製代碼

outline圓弧遮罩層

很明顯，遮罩層就出問題了，由於outline在大部分瀏覽器上不支持弧度設置，目前火狐支持使用-moz-outline-radius設置。 此時，咱們可使用box-shadow來實現，單個標籤遮罩層：

<div>遮罩層</div>
<style> div { position: absolute; left: 0;right: 0;top: 0;bottom: 0; margin: auto; width: 100px; height: 100px; background-color: white; box-shadow: 0 0 0 9999px #0000005e; border-radius: 20px; } </style>
複製代碼

box-shadow圓弧遮罩層

這樣就不存在由於弧度產生的問題，box-shadow與outline一樣不會影響到正常流。

同時設置能夠顯示雙邊框效果，注意outline和box-shadow同時設置會互相重疊，且outline老是在box-shadow之上，但利用這些特性，能夠實現以下效果，單標籤內弧外方

<div></div>
<style> div { position: absolute; left: 0;right: 0;top: 0;bottom: 0; margin: auto; width: 100px; height: 100px; background-color: yellowgreen; border-radius: 20px; outline: 10px solid brown; box-shadow: 0 0 0 10px brown; } </style>
複製代碼

outline和box-shadow

outline還有其餘用法，好比使用outline-offset偏移就能夠顯示出這樣的桌布效果

outline-offset

利用:first-child、:nth-child作判斷

:first-child與:nth-last-child()等選擇器，不只僅能夠單一使用，能夠同時使用進行判斷，已獲取更好的效果，例子以下：

當元素塊超過4個的時候，變動所有顏色。

```html
<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>
<style>
    .main {
        display: flex;
        flex-wrap: wrap;
    }
    .main > div {
        width: 50px;
        line-height: 50px;
        text-align: center;
        background-color: gray;
        border-radius: 5px;
        margin: 10px;
    }
    
    .main > div:first-child:nth-last-child(n+4),
    .main > div:first-child:nth-last-child(n+4) ~ div {
        background-color: palevioletred;
    }
</style>
```
複製代碼

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程