国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS_一些問題

wuyumin / 3192人閱讀

摘要：，當(dāng)僅使用擴展時，添加可以使用子像素的偽邊框。文本文本環(huán)形旋轉(zhuǎn)器創(chuàng)建可用于指示內(nèi)容加載的圓環(huán)微調(diào)器彈跳加載中反彈加載程序動畫自定義文本選擇更改文本選擇的樣式截斷文本均勻分布的子元素在父元素中均勻分布子元素。

包含塊

定位參考框或者定位坐標(biāo)參考系.

元素一旦定義了定位屬性(相對，絕對，固定)，就具有了包含塊性質(zhì)

所包含的定位元素都將以該包含塊為坐標(biāo)系進行定位和調(diào)整

原理：

一個元素盒子的位置和大小有時候是通過相對于一個特定的長方形來計算的，這個長方形就稱之為元素的containing block(包含塊)

用戶代理選擇根元素作為包含塊（稱之為初始 containing block）

對于其它元素，除非元素使用的是絕對位置，包含塊由最近的塊級祖先元素盒子的內(nèi)容邊界組成

如果元素有屬性position: fixed，包含塊由視口決定

如果元素有屬性position: absolute，包含塊由最近的position不是static 的祖先建立(子絕父相，子絕父絕)

如果沒有祖先，根元素盒子的內(nèi)容邊界確定為包含塊

使用CSS3開啟GPU硬件

解決Chrome動畫"卡頓"的辦法：

為動畫DOM元素添加CSS3樣式-webkit-transfrom: transition3d(0, 0, 0)或-webkit-transfrom: translateZ(0) 這兩個屬性都會開啟GPU硬件加速模式.

原理: 為了渲染3D模式. (設(shè)置值為0后，并沒有真正使用3D效果，但瀏覽器卻因此開啟GPU硬件加速模式)

開啟GPU硬件加速可能觸發(fā)的問題：
通過-webkit-transform: transition3d/translateZ開啟GPU硬件加速之后，有些時候可能會導(dǎo)致瀏覽器頻繁閃爍或抖動，可以添加屬性嘗試解決：

-webkit-backface-visibility: hidden // 背面元素是否可見
-webkit-perspective: 1000 // 合適的景深數(shù)值

過度使用產(chǎn)生的結(jié)果（需要合理使用DOM元素數(shù)量）：
大量消耗設(shè)備電量，降低電池壽命

細線邊框

為元素提供一個邊框，寬度等于1個本地設(shè)備像素，可以顯得非常清晰和清晰。

text
.hairline-border {
  box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.25px;
  }
}

box-shadow，當(dāng)僅使用擴展時，添加可以使用子像素*的偽邊框。
使用@media (min-resolution: ...) 為了檢查器件像素比(1dppx 等于96 DPI )，將box-shadow的分布設(shè)置為1/dppx

Chrome不支持上的子像素值border 。safari不支持上的子像素值box-shadow 。Firefox支持兩者的子像素值。

懸停下劃線動畫

當(dāng)文本懸停在上面時創(chuàng)建動畫下劃線效果。

文本文本
.hover {
  display: inline-block;
  position: relative;
  color: #0087ca;
}
.hover::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.hover:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
環(huán)形旋轉(zhuǎn)器

創(chuàng)建可用于指示內(nèi)容加載的圓環(huán)微調(diào)器

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}
彈跳加載中

反彈加載程序動畫


  

  

  


@keyframes bouncing-loader {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0.1;
    transform: translateY(-1rem);
  }
}
.bouncing-loader {
  display: flex;
  justify-content: center;
}
.bouncing-loader > div {
  width: 1rem;
  height: 1rem;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}
自定義文本選擇

更改文本選擇的樣式

::selection {
  background: aquamarine;
  color: black;
}
.custom-text-selection::selection {
  background: deeppink;
  color: white;
}
截斷文本 
.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}
均勻分布的子元素

在父元素中均勻分布子元素。


  
Item1

  
Item2

  
Item3


.evenly {
  display: flex;
  justify-content: space-between;
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116630.html

相關(guān)文章

  • 你的 css 也需要模塊化

    摘要：局部樣式通過，部分解決的模塊化的問題。全局樣式的特點，導(dǎo)致難以維護，所以需要一種局部樣式的解決方案。也就是徹底的模塊化，進來的模塊，需要隱藏自己的內(nèi)部作用域。 css 局部樣式 sass、less 通過 @import ，部分解決的 css 模塊化的問題。 由于 css 是全局的，在被引入的文件和當(dāng)前文件出現(xiàn)重名的情況下，前者樣式就會被后者覆蓋。在引入一些公用組件，或者多人協(xié)作開發(fā)同一...

    Pikachu 評論0 收藏0

  • CSS Modules入門教程

    摘要：預(yù)處理器最大的好處就是可以支持模塊引入，用的方式來編寫，解決了部分混亂以及代碼冗余的問題，但是也不能完全避免。為什么引入CSS Modules 或者可以這么說，CSS Modules為我們解決了什么痛點。針對以往我寫網(wǎng)頁樣式的經(jīng)驗，具體來說可以歸納為以下幾點： 全局樣式?jīng)_突 過程是這樣的：你現(xiàn)在有兩個模塊，分別為A、B,你可能會單獨針對這兩個模塊編寫自己的樣式，例如a.css、b.css，看...

    suxier 評論0 收藏0

  • PostCSS 是個什么鬼東西？

    摘要：參考的文章最權(quán)威的初認識一個不錯的東西理解等插件解析技術(shù)大漠的系列文章，應(yīng)用型很強，推薦一個年齡差不多的開發(fā)者的解釋一篇稍微理論化解釋的文章一個開發(fā)模式簡單的優(yōu)劣比較大家也可以直接閱讀我的博客 前言 最近大漠前輩在群里發(fā)關(guān)于PostCSS的系列文章，但是耗子姐姐又說看了有點云里霧里的感覺，所以這篇文章將按一個思考的角度來理解一下 PostCSS 到底是一個什么東西。 showImg(h...

    IamDLY 評論0 收藏0

  • CSS Modules

    摘要：為什么引入全局樣式?jīng)_突進行打包時，將所有文件導(dǎo)入到入口文件中，樣式也會統(tǒng)一加載到入口中，根據(jù)的規(guī)則，后面的樣式會覆蓋掉前面的樣式聲明，造成全局樣式的覆蓋問題。 CSS Modules 為什么引入CSS Modules （1）全局樣式?jīng)_突 webpack進行打包時，將所有js文件導(dǎo)入到入口App.js文件中，樣式也會統(tǒng)一加載到入口中，根據(jù)css的layout規(guī)則，后面的樣式會覆蓋掉前...

    gecko23 評論0 收藏0

  • CSS Modules

    摘要：為什么引入全局樣式?jīng)_突進行打包時，將所有文件導(dǎo)入到入口文件中，樣式也會統(tǒng)一加載到入口中，根據(jù)的規(guī)則，后面的樣式會覆蓋掉前面的樣式聲明，造成全局樣式的覆蓋問題。 CSS Modules 為什么引入CSS Modules （1）全局樣式?jīng)_突 webpack進行打包時，將所有js文件導(dǎo)入到入口App.js文件中，樣式也會統(tǒng)一加載到入口中，根據(jù)css的layout規(guī)則，后面的樣式會覆蓋掉前...

    wangdai 評論0 收藏0

  • 什么是CSS Modules ？我們?yōu)槭裁葱枰麄?/b>

    摘要：我們將去探索它的目的和主旨。這到底是什么呢我們?yōu)槭裁匆@么做呢我們很快就進行介紹。我們不需要人為處理和文件。我們不寫純，我們需要在一個類似這樣的文件中取寫我們所有的標(biāo)簽。這就是樣式也有作用域的原因。換句話說消除了特殊性問題。 原文地址：https://css-tricks.com/css-mo...最近我對CSS Modules比較好奇。如果你曾經(jīng)聽說過他們，那么這篇博客正適合你。我們...

    dongfangyiyu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<