當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

关于CSS的碎片学习

發布時間：2025/3/17 CSS 43 豆豆

生活随笔收集整理的這篇文章主要介紹了关于CSS的碎片学习小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

幽靈空白節點

css世界原話：

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

<!doctype html> <html><head></head><body><div><span></span></div></body><style>div {background-color: #cd0000;}span {display: inline-block;}</style> </html> 復制代碼

實際效果圖如下：

然而當我們給div加一下font-size:0的時候，得到解決，效果如下：

再舉個栗子：

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

效果圖：

并不是正方形，但是設置font-size: 0后：

所以很多寬高與預期不符的時候，可以考慮一下是不是幽靈節點的問題，設置font-size: 0試試。

超越最大原則

!important可以被“覆蓋”，min-width/max-width、min-height/max-height屬性與width/height屬性有自己的原則：

<img src='helloWorld.jpg' style='width: 300px!important;'> <style> img { max-width: 200px; } </style> 復制代碼 <img src='helloWorld.jpg' style='width: 300px!important;'> <style> img {max-width: 200px;min-width: 400px; } </style> 復制代碼

content用法

content的值可以為空字符串，也就是content: ''，沒有必要在里面加個點；

content不僅僅可以在before和after等偽元素里面使用，可以在普通標簽里面用來加載圖片，比如<img> <style> img { content: url(helloWorld.jpg); }</style>與<img src='helloWorld.jpg'>視覺效果等效。但使用content生產的的圖片無法控制，不能控制大小等；

使用content生成的內容與元素，不能被選中和復制，無法被屏幕閱讀的設備讀取，也無法被搜索引擎抓取，所以重要的文本不要使用；

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

:after{content: '\A';white-space: pre; } 復制代碼

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

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> 復制代碼

效果圖：

關于margin合并特性

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

兄弟元素上下合并

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

父子元素合并

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

空元素合并

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

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

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

關于line-height

容器的大小實際不是font-size撐開的，而是line-height決定的;

文字的行距 = line-height - font-size;

可是設置line-height: 1.5不一定要用px等單位，此時line-height為font-size的1.5倍；

文字近似垂直居中，其實是可以通過line-height設置高度控制的，不用設置height，如果存在height的話，請設置相等。之所以說是文字垂直居中為近似，因為對于盒模型來說，垂直方向會偏下，原因在于css的行距上下等分機制，一般會偏差1~2px。

absolute的單獨使用

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

absolute 是非常獨立的 CSS 屬性值，其樣式和行為表現不依賴其他任何 CSS 屬性就可以完成 ——《css世界》

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

當給元素添加absolute時，如果元素沒有定義盒模型，會以inline-block來計算展示。但是區別與直接添加inline-block的是，absolute不改變正常流的尺寸空間。也就是說，無論我們怎么修改absolute定位的元素的寬高，都不會影響到正常流布局。

下圖來自《css世界》論壇

不使用relative作為父元素，單一使用absolute有很多使用的空間與場景：

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

利用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> 復制代碼

效果圖如下：

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> 復制代碼

這樣的話我們完全就可以直接利用這種方式做遮罩層了，一個標簽搞定。

<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> 復制代碼

但是以上還有一個很大的問題，如果遮罩層為四角為圓弧呢？

<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在大部分瀏覽器上不支持弧度設置，目前火狐支持使用-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與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還有其他用法，比如使用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> ``` 復制代碼

轉載于:https://juejin.im/post/5ca41baf51882543d6528a8d

總結

以上是生活随笔為你收集整理的关于CSS的碎片学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

css
碎片

上一篇：表锁与行锁的区别以及适用情况
下一篇： CSS3--幽灵按钮特效(实例)