平時本身項目中用到的 CSS

css有些屬性容易忘記，半天不寫就要去查api，有時候api還很差使，因而仍是記下來之後方便用，後續會慢慢補充進來的。

Github: github.com/aototo/blog 博客長期更新，喜歡的朋友star一下

outline 移除當選中input元素的時候會出現狀態線

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
包裹elements 的一個線，通常設置成none 。

div {
    outline: none; //通常狀況下移除它
    // outline: 5px dotted red; 也能夠設置樣式
}
複製代碼

contenteditable 設置element是否可編輯

<p contenteditable="true">可編輯</p>
複製代碼

能夠經過input, blur事件來監聽element的輸入和輸入完後鼠標離開。

---

webkit-playsinline

手機video 均可以在頁面中播放，而不是全屏播放了。

<video src="test.mp4" webkit-playsinline="true"></video>
複製代碼

position: absolute， 讓margin有效的

設置left:0, right:0 margin: 0 auto; 就能夠。緣由是2邊都是0不存在邊距，element就能夠得出距離，並居中。

div {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}
複製代碼

使用clearfix 清除浮動，解決父類高度崩塌。

.clearfix {
	zoom: 1;
}

.clearfix:after {
	 visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }
複製代碼

user-select 禁止用戶選中文本

div {
    user-select: none; /* Standard syntax */
}
複製代碼

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

* {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
複製代碼

::-webkit-scrollbar-thumb

能夠修改瀏覽器的滾動條樣式。IE火狐可能不支持。
複製代碼

---

-webkit-appearance:none

1. To apply platform specific styling to an element that doesn't have it by default
2. To remove platform specific styling to an element that does have it by default

移除瀏覽器默認的樣式，好比chrome的input默認樣式，而後就能夠定義須要的樣式。

input, button, textarea, select {
	*font-size: 100%;
	-webkit-appearance:none;
}
複製代碼

CSS開啓硬件加速

www.cnblogs.com/rubylouvre/…

-webkit-transform: translateZ(0);
複製代碼

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

-webkit-backface-visibility: hidden;
複製代碼

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

-webkit-touch-callout: none;
複製代碼

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

div {
    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, 計算屬性值

www.w3schools.com/cssref/func…

div {
    width: calc(100% - 100px);
}
複製代碼

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

---

css3 linear-gradient 線性漸變

默認開始在top, 也能夠自定義方向。

div {
    linear-gradient(red, yellow)
}

background: linear-gradient(direction, color-stop1, color-stop2, ...);
複製代碼

經常使用的選擇器 :nth-child() Selector

選擇父類下第一個子節點，p元素

p:nth-child(1) {
    ...
}
複製代碼

-webkit-font-smoothing 字體抗鋸齒

使用該屬性能讓頁面上的字體變得清晰，可是也會形成font-weight: bold 加粗變得異常。不信你試試...

div {
    -webkit-font-smoothing: antialiased; 
}
複製代碼

---

CSS3 filter Property 圖片過濾

img {
    filter: grayscale(100%); //灰度
    filter: blur(5px); //模糊
    filter:brightness(200%); //高亮
    filter:saturate(8); //飽和
    filter:sepia(100%); //懷舊
    ...
}
複製代碼

移動端可使用，IE兼容很差。更多請看 www.w3schools.com/cssref/css3…

使用css建立三角形

這個不少面試題好像問到，但實際中我也確實使用了。

div {
    border-bottom: 10px solid white;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    height: 0px; 
    width: 0px; 
}
複製代碼

transparent 透明

clip屬性，截取你想要顯示的圖片

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}
複製代碼

你有興趣能夠看 tympanus.net/codrops/201…

設置文字，字母間距，很實用 letter-spacing

h1 {
    letter-spacing: *px; //也能夠是負數
}
複製代碼

---

關於display: box 和 display: flex，前者是2009實施，後者2012年，若是你的安卓比較老請使用display: box，可是2者的表現可能有點不一樣。下面是兼容方法。

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
複製代碼

---

圖片運動過程當中，圖片模糊問題

在animation過程當中，圖片會出現模糊的狀況，能夠設置以下在圖片上面。

transform: translate3d(0, 0, 0);
複製代碼

使用margin aotu

div {
  width: 100px;
  position: absolute;
  right: 0;
}

// 使用margin-left: auto 自動算出作左邊寬度，實現內容貼右邊
div {
  width: 100px;
  margin-left: auto;
}
複製代碼

---

overflow: scroll 使滾動流暢（解決ios上滑動不流暢）

-webkit-overflow-scrolling: touch;
複製代碼

後續追加...有錯誤的地方請指正，謝謝。

下面是一些CSS的網站，項目中也常常使用的。

Css3動畫手冊 Css參考手冊 Anicollection 動畫庫 Animate 動畫庫 csshake 抖動很逗 字體圖標 w3schools