CSS/LESS tips and snippets

世有因果知因求果發表於2015-11-07
CSS

如何style line-through？

<style type="text/css">
    span.inner {
        color: green;
    }
    span.outer {
        color: red;
        text-decoration: line-through;
    }
</style>

<span class="outer">
    <span class="inner">foo bar</span>
</span>

 雖然css3中定義了p {
    text-decoration: underline;
    -moz-text-decoration-color: red; /* Code for Firefox */
    text-decoration-color: red;
}

剪下效果實現

實現思路：利用一個和需要剪下的元素背景色相同的一個svg作為元素after seudo element的background,設定絕對定位

<body>
<article>
  <p>this is a article for testing cropping content !
 this is a article for testing cropping content !this is a article for testing cropping content !this is a article for testing cropping content !this is a article for testing cropping content !this is a article for testing cropping content !this is a article for testing cropping content !  
  </p>
</article>
</body>
body {
  background: #f06d09;
}
article {
  background: white;
  width: 300px;
  padding:20px;
  position: relative;
}
article::after{
  content: "";
  position: absolute;
  top:100%;
  left:0;
  height:20px;
  width: 100%;
  background: url(http://html5hub.com/wp-content/themes/html5hub/images/rip.svg?1404843590) bottom center;
}

http://codepen.io/anon/pen/YwKYzb

關於@media以及@keyframe的selector

.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: black;
  }
}
//將編譯輸出以下
@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}
@media tv {
  .screen-color {
    color: black;
  }
}

 當gulp-less編譯時，如果extend(.NONEXISINGMIXIN)，則不會主動丟擲任何異常，注意這裡依然有依賴關係！但是對於@import一個不存在的檔案,或者呼叫不存在的mixin，或者語法錯誤，都會丟擲異常

bootstrap less程式碼組織學習心得：

一般extend只用於對於靜態的class來做擴充套件，而靜態的class則可能需要一個呼叫一個含引數的mixin來實現！ component modifier file(extend一個component selector再加上自己的css) + components file(呼叫mixin構建一個元件的selector) + common mixin file(定義mixin，永遠不會被編譯輸出！) 這樣我們最好在前端LESS專案中，使用三級檔案結構： mixin->component->componentMod

以下面的bootstrap程式碼為例，mixins/image.less檔案定義了.img-responsive() mixin; scaffolding.less中的.img-responsive則定義了有responsive特性的img所應該有的css屬性；carousel.less和thumbnails.less檔案中則定義modifier class:即responsive image在carousel和thumnnail兩種場景下的modifier

 使用lessc --lint編譯器輸出extend無法找到對應class的錯誤

vagrant@homestead:~/nodewrapper$ lessc --lint /home/vagrant/Code/resources/assets/less/style.less 
extend ' .clearfix' has no matches
extend ' .clearfix' has no matches
extend ' .clearfix' has no matches

這個命令實際上是非常有用的，因為類似自動化build工具，gulp-less在extend出現錯誤時不會有任何列印輸出！！！這會讓你一籌莫展

如何解決背景圖片下內容文字由於對比度問題導致的無法閱讀問題

經常，我們希望有一個漂亮的圖片作為頁面一個block的背景色，外加一個濾鏡，會將圖片模糊化或者變暗，這種效果非常棒，但是往往可能會帶來一個問題：前景的文字由於和背景圖片相疊加，很有可能難以閱讀，怎麼辦呢?

一個思路是：使用另外一個絕對定位的div來做overlay覆蓋掉前面的內容部分，同時設定該overlay的background為rgba(0,0,0,0.6),設定內容block的文字color為white(或者任何和黑色有較高對比度的顏色），設定內容block的z-index為大於0，這樣就可以達到二者兼得的效果

<div class="bg-imaged">
  <div class="jobinfo">this is a job info card this is a job info cardthis is a job info cardthis is a job info cardthis is a job info cardthis is a job info cardthis is a job info cardthis is a job info cardthis is a job info cardthis is a job info cardthis is a job info card</div>
  <div class="overlay"></div>
</div>
.bg-imaged{
  background: url(https://pull-foodplanet-kumma.netdna-ssl.com/IMG/rtpposter.gif);
  position: relative;
  /* background-size: cover; */
}
.jobinfo{
  width: 900px;
  height: 400px;
  position:relative;
  z-index: 10;
  color: white;
}
.overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.6);
}

 style the scrollbar

IE是最早引入scrollbar style的瀏覽器，chrome,firefox各有不同。

::-webkit-scrollbar-track {
      background-color: #b46868;
} /* the new scrollbar will have a flat appearance with the set background color */
 
::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.2); 
} /* this will style the thumb, ignoring the track */
 
::-webkit-scrollbar-button {
      background-color: #7c2929;
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
 
::-webkit-scrollbar-corner {
      background-color: black;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

為了保持相容性，可以使用jquery的一個plugin:

http://jscrollpane.kelvinluck.com/

float

http://www.cnblogs.com/coffeedeveloper/p/3145790.html

float元素預設寬度為內容寬度 ，並且脫離文件流（也就是說該元素不再佔有原有的位置，後續元素將補上去佔有其位置），向指定方向（left,right)一直移動直到被其container擋住為止。

注意：float元素脫離文件流和絕對定位元素的脫離文件流還是有些區別：float元素會被container擋住限制，而absolute positioned元素則沒有這個限制.

所有float的元素本身在同一個文件流中，也就是說他們是互相影響的（和絕對定位時脫離文件流有所不同）。

對後續的元素來說，floated元素脫離了文件流，但是對於後續的內容來說該floated元素仍然在文件流

為了消除浮動元素對後續元素的影響，可以在後續元素中設定clear屬性來清除浮動，實際使用中一般在浮動元素的父元素上增加一個clearfix的通用hack(原理是通過:after偽元素設定clear both)來實現清除浮動元素對後續的影響。

Flex

1. flex container： display:flex即可

2. flex item：flex container中的在文件流中的直接子元素

3.main-axis:排列的主方向

4.cross axis:主方向的垂直方向

flex-direction: row/row-reverse/column/column-reverse:指定子元素的排列順序

flex-wrap:是否允許換行

flex-flow: 上面direction和wrap的整合寫法

order: item的排序序號，預設為0

彈性相關的flex-grow（設定item在container以flex-basis做完佈局後，如果有空餘空間，則給該item分配的剩餘空間的百分比）,flex-shrink,flex-basis(設定flex item的初始寬高）

一個flex item分配的寬度=flex-basis+flow-grow/sum(flow-grow)*remainWidthAfterFlexBasisLayouted

flex-shrink:當以flex-basis佈局時，發現remain為負時，就按照這個flex-shrink的比例相應縮減item的寬度。 一個flex item分配寬度=flex-basis+flow-shrink/sum(flow-shrink)*remain(注意：remain這裡為負數)

對齊： justify-content, align-items,align-self,align-content

子元素撐滿父元素垂直居中的幾個CSS思路

https://segmentfault.com/a/1190000000381042

如何解決由於內容變化導致scroll而發生渲染抖動的問題？

有時候，我們可能頻繁操作web app，導致動態html內容經常超過body的範圍，從而瀏覽器自動加入一個滾動框，而一旦內容又恢復到body可以容納的話，又會自動清除滾動框，這可能不一定是你想要的效果，因為瀏覽器會因此而發生渲染閃爍。一個解決方案是：新增：overflow: scroll css程式碼

    body{
        overflow: scroll;
    }

 

相關文章