記錄一些小技巧-CSS篇-有解無憂

單行文本截斷

.text{
  width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;    
}

多行文本截斷

-webkit-line-clamp屬性值為需要截斷的行數

.text{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical ;
  overflow: hidden;
}

:not() 選擇器

選中不在此范圍內的元素，例如：div:not(:last-child)，選中除最后一個div的所有div元素

有時候在做串列時需要為每項添加下邊框線，但最后一個項不需要邊框線

.item:not(:last-child){
    border-bottom: 1px solid #ddd;
}

阻止元素成為滑鼠事件的target

pointer-events 指定滑鼠如何與元素進行互動，設定為none，阻止任何滑鼠事件對其的作用

.item{
  pointer-events: none;  
}

設定行高，文字頂部對齊

vertical-align 用來指定行內元素（inline）或 表格單元格（table-cell）元素的垂直對齊方式，

子元素設定line-height:1，為了不繼承父元素的行高

<p>
    <span>頂部對齊</span>
</p>

p{
  line-height:3;  
}
span{
  line-height:1;
  vertical-align:top;  
}

vue深度選擇器

有時候需要在組件中區域修改第三方組件的樣式，而又不想去除scoped屬性造成組件之間的樣式污染，

此時只能通過>>>，穿透scoped，

有些Sass 之類的前處理器無法正確決議 >>>，可以使用 /deep/ 運算子或 ::v-deep( >>> 的別名)

<style scoped>

外層 >>> 第三方組件類名 {
      樣式
}

/deep/  第三方組件類名 {
      樣式
}

</style>

高寬等比例自適應正方形

當寬度設定為一些自適應的值時（%、vw等），高度的值無法確定，這時可以使用 padding-top:100% 來解決高度的問題，因為 padding 的值參照于 width

<div class="parent">
    <div class="child">
        這里是內容
    </div>
</div>

.parent{
  position: relative;
  width: 50vw;
  height: 0;
  padding-top: 100%;    
}
.child{
  position: absolute;
  width: 100%;
  height: 100%;   
}

改變input元素游標顏色

input{
  caret-color: #dd3131;  
}

不規則投影

一般投影效果都會使用box-shadow來完成，但在一些不規則的形狀下達不到預想的效果，這時可以使用drop-shadow來完成，

div{
  filter: drop-shadow(0 0 6px #ddd); 
}

ios移動端滾動卡頓

在ios端中滾動容器不會有慣性滾動，用戶在滑動時會出現明顯的卡頓感，添加以下屬性可解決問題

-webkit-overflow-scrolling: touch;

串列最后一行左對齊

.list {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 10px;
}
.item{
  width: 100px;
  background: skyblue;
}

@supports特性查詢

檢測瀏覽器是否支持CSS的屬性值，通過則應用代碼塊

.box{
  width: 100px;
  height: 100px;
  background: skyblue;
}
@supports (display: grid) {
  .box{
    background: slateblue;
  }
}
/* 兩個屬性支持即通過，類比 && */
@supports (display: grid) and (display: flex) {
  /* css style */
}
/* 其中一個屬性支持即通過，類比 || */
@supports (display: grid) or (display: flex) {
  /* css style */
}
/* 該屬性不支持即通過，類比 ! */
@supports not (display: grid) {
  /* css style */
}

查看兼容性：https://www.caniuse.com/#search=%40supports

活動錨點選擇器（:target）

地址欄后面跟有錨名稱 #，指向檔案內某個具體的元素，比如，地址為 loacalhost:3000#red，則選擇中ID屬性值為red的元素，可以應用到網頁換膚功能中，

<style>
div{
  display: inline-block;
  width: 200px;
  height: 200px;
}
#red:target{
  background: lightpink;
}
#blue:target{
  background: lightblue;
}
</style>
<body>
  <div id="red">
    <span>紅色</span>
  </div>
  <div id="blue">
    <span>藍色</span>
  </div>
  <p>
    <a href="#red">紅色</a>
    <a href="#blue">藍色</a>
  </p>
</body>

outline-offset 實作加號圖示

想要實作加號需要符合以下幾點：

1.容器是個正方形
2.outline 邊框的尺寸不能太小
3.outline-offset 的取值范圍: -(容器寬度的一半 + outline寬度的一半) < x < -(容器寬度的一半 + outline寬度)

.plus {
    width: 100px;
    height: 100px;
    background: #f4f4f4;
    outline: 50px solid #333;
    outline-offset: -99px;
}

mask屬性

mask-image的圖片一定要是png圖片才看得出效果，兩張圖片結合會取相交的區域顯示，如果用過ps的話，和蒙版是差不多的功能，

mask和background差不多，同樣擁有size、repeat、position等屬性，

除了IE不支持外，谷歌、火狐、Edge、Safari、Opera等主流的瀏覽器都支持該屬性，

更多屬性：https://developer.mozilla.org/en-US/docs/Web/CSS/mask

兼容性：https://www.caniuse.com/#search=mask-image

.mask{
    width: 100%;
    height: 600px;
    background-image: url(../static/images/bg.jpg);
    -webkit-mask-image: url(../static/images/pikaqiu.png);
    -webkit-mask-size: 300px 300px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
}

attr函式

attr() 函式回傳選擇元素的屬性值

<p data-unit="km">89</p>

p[data-unit]{
  font-size: 20px;
  color: #333;
}
p[data-unit]::after{
  content: attr(data-unit);
  color: #999;
}

currentColor

currentColor不是一個css屬性，而是color的屬性值，currentColor 回傳當前元素繼承的文字顏色，

比如當前元素 color 屬性值為 red，currentColor 的值也為 red，currentColor相當于color屬性值的別名，利用這一特點，我們可以統一管理元素的顏色，

div{
  width: 100px;
  height: 100px;
  color: red;
  border: 1px solid currentColor;
}

selection

::selection偽元素應用于檔案中被用戶選中的部分

<div class="demo">我是一段很長很長很長很長很長很長長很長很長長很長很長的文字</div>

.demo::selection{
  background: purple;
  color: #fff;
}

一根細線

高度為1px的偽元素，利用背景漸變可以得到比1px更細的邊線

.comment-bar::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to bottom, rgba(172,172,172,.3), transparent);
}

兩端文本對齊

text-align-last: justify;

以下為 text-align-last 屬性值：

justify: 兩端對齊
center: 居中對齊
start: 左對齊（也可用left）
end: 右對齊（也可用right）

margin排版重輕布局

一個flex布局的串列想要實作左重右輕的布局（即最后一個元素右對齊），可以為最后一個元素添加 margin-left: auto

當然，如果你需要最后兩個元素右對齊，只需為倒數第二個加上，

不定時更新~

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/102369.html

標籤：Html/Css

上一篇：Web前端基礎(4):CSS(一)

下一篇：Web前端基礎(6):CSS(三)