成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS_一些問題

wuyumin / 3194人閱讀

摘要：，當(dāng)僅使用擴(kuò)展時(shí)，添加可以使用子像素的偽邊框。文本文本環(huán)形旋轉(zhuǎn)器創(chuàng)建可用于指示內(nèi)容加載的圓環(huán)微調(diào)器彈跳加載中反彈加載程序動(dòng)畫自定義文本選擇更改文本選擇的樣式截?cái)辔谋揪鶆蚍植嫉淖釉卦诟冈刂芯鶆蚍植甲釉亍?/p>

包含塊

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

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

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

原理：

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

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

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

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

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

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

使用CSS3開啟GPU硬件

解決Chrome動(dòng)畫"卡頓"的辦法：

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

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

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

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

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

細(xì)線邊框

為元素提供一個(gè)邊框，寬度等于1個(gè)本地設(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)僅使用擴(kuò)展時(shí)，添加可以使用子像素*的偽邊框。
使用@media (min-resolution: ...) 為了檢查器件像素比(1dppx 等于96 DPI )，將box-shadow的分布設(shè)置為1/dppx

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

懸停下劃線動(dòng)畫

當(dāng)文本懸停在上面時(shí)創(chuàng)建動(dò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;
}
彈跳加載中

反彈加載程序動(dòng)畫


  

  

  


@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;
}
截?cái)辔谋?/b> 
.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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116630.html

相關(guān)文章

  • 你的 css 也需要模塊化

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

    Pikachu 評(píng)論0 收藏0

  • CSS Modules入門教程

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

    suxier 評(píng)論0 收藏0

  • PostCSS 是個(gè)什么鬼東西？

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

    IamDLY 評(píng)論0 收藏0

  • CSS Modules

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

    gecko23 評(píng)論0 收藏0

  • CSS Modules

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

    wangdai 評(píng)論0 收藏0

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

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

    dongfangyiyu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<