CSS整理

04-23

☆滾動穿透問題

在移動端當有 fixed 遮罩背景和彈出層時，在屏幕上滑動能夠滑動背景下面的內容。

解決方案：

.no-scroll{

overflow: hidden;

height: 100%;

-webkit-overflow-scrolling: none;

position: fixed;

}

給html、body、和最外層滾動元素在顯示彈窗時，動態添加no-scroll樣式，遮罩層關閉時，將樣式移除即可。

☆彈窗頂層元素的pointer-events: none;的點擊穿透問題

彈窗頂層元素，若設置為pointer-events: none;，則遮罩層不可觸發事件，而是會觸發底層元素的點擊事件，因此，頂層元素設置為pointer-events: auto，就可以了。

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

/*不換行*/

white-space:nowrap;

/*自動換行*/

word-wrap: break-word;

word-break: normal;

/*強制換行*/

word-break:break-all;

☆ outline 當input選中的時候會出現一個邊框

/*一般設置成 none*/

textarea:focus, input:focus{

outline: none;

}

☆ clearfix 清除浮動

.clearfix {

zoom: 1;

}

.clearfix:after {

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

☆ user-select 禁止選中文本

p {

-webkit-user-select: none; /* Chrome, Opera, Safari */

-moz-user-select: none; /* Firefox 2+ */

-ms-user-select: none; /* IE 10+ */

user-select: none; /* Standard syntax */

}

☆ webkit-scrollbar 自定義瀏覽器滾動條

/*定義滾動條寬高及背景，寬高分別對應橫豎滾動條的尺寸*/

div::-webkit-scrollbar {

width: 5px;

height: 5px;

background-color: rgba(245, 245, 245, 0.47);

}

/*定義滾動條的軌道，內陰影及圓角*/

div::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);

border-radius: 10px;

background-color: #f5f5f5;

}

/*定義滑塊，內陰影及圓角*/

div::-webkit-scrollbar-thumb {

/*width: 10px;*/

height: 20px;

border-radius: 10px;

-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);

background-color: rgba(85, 85, 85, 0.25);

}

☆ webkit-appearance 去除默認樣式

input, button, textarea, select {

*font-size: 100%;

-webkit-appearance:none;

}

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

elements {

-webkit-backface-visibility: hidden;

}

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

elements {

-webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */

-webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */

transform: rotateY(60deg);

transform-style: preserve-3d;

}

☆ ::selection 修改選中文本顏色

::selection {

color: white;

background-color: rgba(0, 0, 0, 0.8);

}

::-webkit-selection {

color: white;

background-color: rgba(0, 0, 0, 0.8);

}

::-moz-selection {

color: white;

background-color: rgba(0, 0, 0, 0.8);

}

☆ font-smoothing 設置字體平滑，會讓字體看起來比較舒服

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, a, .td-name, td {

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

font-family: "Microsoft YaHei", "微軟雅黑", Muli, "Helvetica", Arial, sans-serif;

}

☆ perspective 這個屬性定義子元素會獲得透視效果，而不是元素本身

<div class="cube pers250">

<div class="face front">1</div>

<div class="face back">2</div>

<div class="face right">3</div>

<div class="face left">4</div>

<div class="face top">5</div>

<div class="face bottom">6</div>

</div>

.cube {

width: 100%;

height: 100%;

backface-visibility: visible;

perspective-origin: 150% 150%;

transform-style: preserve-3d;

-webkit-backface-visibility: visible;

-webkit-perspective-origin: 150% 150%;

-webkit-transform-style: preserve-3d;

}

.pers250 {

perspective: 250px;

-webkit-perspective: 250px;

}

.face {

display: block;

position: absolute;

width: 100px;

height: 100px;

border: none;

line-height: 100px;

font-family: sans-serif;

font-size: 60px;

color: white;

text-align: center;

}

☆ contenteditable 規定元素內容是否可編輯

<div id="example-one" contenteditable="true">

#example-one {

margin-bottom: 10px;

}

[contenteditable="true"] {

padding: 10px; outline: 2px dashed #CCC;

}

[contenteditable="true"]:hover {

outline: 2px dashed #0090D2;

}

☆ webkit-playsinline video 都可以在頁面中播放，而不是全屏播放

【被遺忘的CSS】以上部分mark來自此文章鏈接

☆ 輸入框placeholder垂直居中

設置input框的樣式為 line-height:normal;

☆ css雪碧圖(sprite)

參考：https://www.cnblogs.com/xiaohuochai/p/4793421.html

css雪碧圖(sprite)是一種網頁圖片應用處理方式，它允許將一個頁面涉及到的所有零星圖片都包含到一張大圖中。使用雪碧圖的處理方式可以實現兩個優點：

【1】減少http請求次數

【2】減少圖片大小，提升網頁載入速度 (多張圖片載入速度小於拼合成的圖片的載入速度)

　　凡事都不完美，實現優點的同時也帶來了缺點，即提高了網頁的開發和維護成本

應用場景

　　前面提到過，並不是所有的圖片都可以用來製作雪碧圖，只有描述性圖片才適合

　　【1】對於img標籤設置的內容性圖片，是不能合併到雪碧圖的，如果合併這些圖片會影響頁面可讀性，語義化降低且可調整的範圍小

　　【2】對於橫向和縱向都平鋪的圖片，也不能合併到雪碧圖中。如果是橫向平鋪，只能將所有橫向平鋪的圖合併成一張大圖，只能豎直排列，不能水平排列；如果是縱向平鋪，只能將所有縱向平鋪的圖合併成一張大圖，只能水平排列，不能豎直排列

合併

　　雪碧圖的製作實際上就是零星小圖合併成一張大圖，但小圖合併需要遵循以下規則：

　　【1】圖片在合併之前必須保留空隙

　　1、如果是小圖標，留的空隙可適當小一些，一般20像素左右

　　2、如果是大圖標，要留的空隙就要大一點，因為大圖標在調整的時候，影響到的空間也會比較大

【2】圖片排列方式有橫向和縱向

【3】合併分類的原則

　有三種合併分類的原則，分別是基於模塊、基於大小和基於色彩

　a、把同屬一個模塊的圖片進行合併

　b、把大小相近的圖片進行合併

c、把色彩相近的圖片進行合併

【4】合併推薦

　　在實際的雪碧圖製作中，一般採用兩種方法：一種是只本頁用到的圖片合併；另一種是有狀態的圖標合併

實現

　　在以前，我們可能需要手動實現雪碧圖，這是一件非常麻煩的且容易出錯的事情。現在有了很多方便的工具來製作雪碧圖。我經常使用是一個叫做css背景合併工具的小工具。

　　使用方法如下圖所示：

☆控制滑鼠點擊元素時，閃現的高亮顏色

-webkit-tap-highlight-color: transparent;

☆ 禁用ios顯示系統默認菜單-webkit-touch-callout

當你觸摸並按住觸摸目標時候，禁止或顯示系統默認菜單。在iOS上，當你觸摸並按住觸摸的目標，比如一個鏈接，Safari瀏覽器將顯示鏈接有關的系統默認菜單。這個屬性可以讓你禁用系統默認菜單。

語法：

-webkit-touch-callout：behavior

默認值： inherit

適用於：鏈接元素比如新窗口打開，img元素比如保存圖像等等

取值：

none：系統默認菜單被禁用

inherit：系統默認菜單不被禁用

☆ H5頁面輸入框游標垂直居中

參考：【重構筆記Vol.2】H5頁面輸入框游標垂直居中

修復方法：

1. 設置line-height與字體大小一樣的值

2. 利用padding的上下邊距將文字和游標居中（demo中line-height原本期望值為3.4, 用3.4-1.4的字體大小，得到的2在對半分就是內邊距的數值了）

☆ 表格用table還是div

使用table標籤處理二維表格，語義更清晰，代碼更具可讀性，也有利於工具分析源碼（比如：爬蟲）。

div則用於布局方面

div 的載入方式是即讀即載入，遇到 <div> 沒有遇到 </div> 的時候一樣載入 div 中的內容，讀多少載入多少；table 的載入方式是完成後載入，遇到 <table> 後，在讀到 </table> 之前，table 中的內容不載入，或者傳輸中斷了(document.onload()事件)的時候載入，這是因為TABLE牽涉到多行多列問題,所以只有當TABLE所有內容載入完畢,IE才知道該怎麼顯示

推薦：Div和Table的區別 - 呼啦啦bear - 博客園

☆