一些實用而又記不住的css技巧

user-select 禁止用戶選中文本

div {
    user-select: none; /* Standard syntax */
}

 

清除手機tap事件后element 時候出現的一個高亮

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

 

修改瀏覽器的滾動條樣式 ::-webkit-scrollbar-thumb

可以修改瀏覽器的滾動條樣式。IE火狐可能不支持。

使用CSS transforms 或者 animations時可能會有頁面閃爍的bug

-webkit-backface-visibility: hidden;

 

-webkit-touch-callout 禁止長按鏈接與圖片彈出菜單

-webkit-touch-callout: none;

 

transform-style: preserve-3d 讓元素支持3d

div {
    -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotateY(60deg);
    transform-style: preserve-3d;
}

 

perspective 透視

這個屬性的存在決定你看到的元素是2d還是3d。一般設置在包裹元素的父類上。

.div-box {
    perspective: 400px; }

css實現不換行、自動換行、強制換行

//不換行
white-space:nowrap;

//自動換行
word-wrap: break-word; 
word-break: normal; 

//強制換行
word-break:break-all;

 

box-sizing 讓元素的寬度、高度包含border和padding

{
    box-sizing: border-box;
}

calc() function, 計算屬性值

https://www.w3schools.com/cssref/func_calc.asp

div {
    width: calc(100% - 100px);
}

上面的例子就是讓寬度為100%減去100px的值，項目中很適用，IE9以上

 

垂直居中

 

<div class="box box1"><span>我是垂直居中元素</span></div>
<div class="box box2"><span>我是垂直居中元素</span></div>
<div class="box box3"><span>我是垂直居中元素</span></div>
<div class="box box4"><span>我是垂直居中元素</span></div>
<div class="box box5"><span>我是垂直居中元素</span></div>
<div class="box box6"><span>我是垂直居中元素</span></div>

方法1：dispaly:table-cell

.box1{ text-align:center; display:table-cell; vertical-align:middle; }

方法2：display:flex

.box2{ display:flex; justify-content:center; align-items:center; text-align:center; }

方法3：translate(-50%,-50%)

.box3{ position:relative;} .box3 span{ position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); width:100%; text-align:center; }

方法4：display:inline-block

.box4{ text-align:center; font-size:0; } .box4 span{ vertical-align:middle; display:inline-block; font-size:16px; } .box4:after{ content:''; width:0; height:100%; display:inline-block; vertical-align:middle; }

方法5：margin:auto

.box5{ display:flex; text-align:center; } .box5 span{ margin:auto; }

方法6：display:-webkit-box

.box6{ display:-webkit-box; -webkit-box-pack: center; -webkit-box-align: center; text-align:center; }

 

內容兩端對齊

方法一：使用text-align:justify

text-align:justify 屬性是全兼容的，使用它實現兩端對齊，需要注意在模塊之間添加[空格/換行符/制表符]才能起作用，同樣，實現文本對齊也是需要在字與字之間添加[空格/換行符/制表符]才能起作用

<div class="demo">
    <a class="link" href="#none">10元</a>
    <a class="link" href="#none">20元</a>
    <a class="link" href="#none">30元</a>
    <a class="link" href="#none">50元</a>
</div>

*{margin:0;padding:0;}
/* 
 說明：
 1.IE中要實現塊內單行兩端對齊需要使用其私有屬性text-align-last:justify配合，text-align-last 要生效，必須先定義text-align 為justify
 2.line-height:0 解決標准瀏覽器容器底部多余的空白
*/
.demo{
     text-align:justify;
     text-align-last:justify;
     line-height:0;
     height:44px;
}
/*
 說明：
 模塊使用[換行符]或[空格符]后，webkit瀏覽器中會引起最后一個模塊有多余空白，使用font-size:0可清除該空格
*/
@media all and (-webkit-min-device-pixel-ratio:0){
.demo{
     font-size:0;
}
}
 /* 
 說明：
 1.text-align-last:justify 目前只有IE支持，標准瀏覽器需要使用 .demo:after 偽類模擬類似效果 
 2.opera瀏覽器需要添加 vertical-align:top 才能完全解決底部多余的空白
 */
.demo:after{
     display:inline-block;
     overflow:hidden;
     width:100%;
     height:0;
     content:'';
     vertical-align:top;
}
.demo a{
     width:20%;
     display:inline-block;
     height:44px;
     line-height:44px;
     text-align:center;
     border:1px solid #428cc8;
     color:#666;
     font-size:16px;
     margin-bottom:5px;
     border-radius:3px;
     background-color:#fefefe;
     color:#666;
     text-decoration:none;
}

demo

方法二 使用justify-content:space-between

box-pack是css3的新屬性，依賴於display:box(舊版彈性布局)，受box-orient影響，box-pack決定了子標簽水平對齊的方式，可選值有start | end | center | justify。使用box-pack:justify來實現兩端對齊非常簡單，代碼量也少。為了向前看齊，把display:flex(新版彈性布局)也一起寫進去

<div class="demo">
    <a class="link" href="#none">10元</a>
    <a class="link" href="#none">20元</a>
    <a class="link" href="#none">30元</a>
    <a class="link" href="#none">50元</a>
</div>

*{margin:0;padding:0;}
/*
 說明：
 display:box定義布局為盒模型后，可使用盒模型下的box-pack:justify屬性
*/
.demo{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
}

.demo a{
     width:20%;
     display:block;
     height:44px;
     line-height:44px;
     text-align:center;
     border:1px solid #428cc8;
     color:#666;
     font-size:16px;
     margin-bottom:5px;
     border-radius:3px;
     background-color:#fefefe;
     color:#666;
     text-decoration:none;
}

demo

方法三 使用column(多列布局)

<div class="demo">
    <a class="link" href="#none">10元</a>
    <a class="link" href="#none">20元</a>
    <a class="link" href="#none">30元</a>
    <a class="link" href="#none">50元</a>
</div>

*{margin:0;padding:0;}
/* 
 說明：
 1.column-count定義了對象的列數,例子中有4個模塊，那么定義為4列
 2.column-gap定義了對象中列與列的間距，間距不能設置為百分比，顯得不夠靈活
*/
.demo{
     -webkit-column-count:4;-moz-column-count:4;column-count:4;
     -webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px; 
}

.demo a{
     display:block;
     height:44px;
     line-height:44px;
     text-align:center;
     border:1px solid #428cc8;
     color:#666;
     font-size:16px;
     margin-bottom:5px;
     border-radius:3px;
     background-color:#fefefe;
     background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee));
     color:#666;
     text-decoration:none;
}

demo

 

 will-change提高頁面滾動、動畫等渲染性能

/* 關鍵字值 */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;        /* <custom-ident>示例 */
will-change: opacity;          /* <custom-ident>示例 */
will-change: left, top;        /* 兩個<animateable-feature>示例 */

will-change的使用也要謹慎，遵循最小化影響原則，不要這樣直接寫在默認狀態中，因為will-change會一直掛着：

.will-change {
  will-change: transform;
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

可以讓父元素hover的時候，聲明will-change，這樣，移出的時候就會自動remove，觸發的范圍基本上是有效元素范圍。

.will-change-parent:hover .will-change {
  will-change: transform;
}
.will-change {
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

如果使用JS添加will-change, 事件或動畫完畢，一定要及時remove. 比方說點擊某個按鈕，其他某個元素進行動畫。點擊按鈕(click)，要先按下(mousedown)再抬起才出發。因此，可以mousedown時候打聲招呼, 動畫結束自帶回調，於是（示意，不要在意細節）：

dom.onmousedown = function() {
    target.style.willChange = 'transform';
};
dom.onclick = function() {
    // target動畫嗶哩嗶哩...
};
target.onanimationend = function() {
    // 動畫結束回調，移除will-change
    this.style.willChange = 'auto';
};

 

偽元素實現換行，替代換行標簽

 

《CSS SECRET》 中對 br 標簽的描述是，這種方法不僅在可維護性方面是一種糟糕的實踐，而且污染了結構層的代碼，運用 after 偽元素，可以有一種非常優雅的解決方案

inline-element ::after{
       content:"\A";
       white-space: pre;
}

通過給元素的 after 偽元素添加 content 為 “\A” 的值。這里 \A 表示的是什么呢？有一個 Unicode 字符是專門代表換行符的：0x000A 。 在 CSS 中，這個字符可以寫作 “\000A”， 或簡化為 “\A”。這里我們用它來作為 ::after 偽元素的內容。也就是在元素末尾添加了一個換行符的意思。而 white-space: pre; 的作用是保留元素后面的空白符和換行符，結合兩者，就可以輕松實現在行內級元素末尾實現換行。

 

增強用戶體驗，使用偽元素實現增大點擊熱區

 

尤其是在移動端，按鈕通常都很小，但是有時由於設計稿限制，我們不能直接去改變按鈕元素的高寬。那么這個時候有什么辦法在不改變按鈕原本大小的情況下去增加他的點擊熱區呢？這里，偽元素也是可以代表其宿主元素來響應的鼠標交互事件的。借助偽元素可以輕松幫我們實現，我們可以這樣寫：

.btn::befoer{
    content:"";
    position:absolute;
    top:-10px;
    right:-10px;
    bottom:-10px;
    left:-10px;
}

 

參考文章

http://www.cnblogs.com/coco1s/p/5667853.html

https://juejin.im/post/58da53b7ac502e0058e70abf

http://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/