揪css系列（1）-業務代碼中可用的小技巧

歡迎提issues 斧正： css小技巧

業務代碼中可用的CSS技巧

兼容chrome下的10px字體

p {
    font-size: 10px;
    -webkit-transform: scale(.83);
}

此方法在前端頁面須要展現更小字體，兼容瀏覽器時很是有用。

文本溢出顯示省略號...

p {
    display:block;
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis;
}

此方法對前端頁面容錯很是有效，由於一個元素裏的內容太多，就會致使顯示不完，省略號讓用戶體驗更好。若是元素寬高沒限制，內容太多會致使文本溢出，嚴重影響用戶體驗。

給元素增長hover漸變效果

div {
    width:200px;
    height:200px;
    transition: box-shadow .5s;
    -moz-transition: box-shadow .5s;
    -webkit-transition: box-shadow .5s;
    -o-transition: box-shadow .5s;
}
div:hover {
    box-shadow: 0 14px 20px #666;
}

鼠標通過會有陰影效果，鼠標離開恢復。

居中div

經常使用margin方法：

div { 
    width:200px;
    margin:0 auto;
}

1/2寬高的margin，50%的left、top方法：

div {        
    Width:500px ; 
    height:300px;      
    Margin: -150px 0 0 -250px;        
    position:relative;       
    background-color:pink;      
    left:50%;
    top:50%;     
}

LTRB值爲0的方法：

div { 
    width: 400px;
    height: 300px; 
    margin:auto;
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0;
}

transform方法

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

帶文本元素的話，外面包一層div，讓裏面的line-height = height：

p {
    height:30px;
    line-height:30px;
}

flex彈性盒子佈局居中：

div {
    display: flex;
    flex-flow: row wrap;
    width: 408px; 
    align-items: center; 
    justify-content: center;
}

默認繼承

默認繼承： font-size font-family color等, 元素有UL LI DL DD DT等;
不可繼承： border padding margin width height 等表現元素大小的屬性。

清除浮動

結尾處使用div空標籤清除浮動(非div須要display:block)，不過這種方式向DOM添加了沒必要要的元素，使用不是不少。

.clear{clear:both;}

利用overflow屬性。必須定義width或zoom:1，同時不能定義height，應用值爲hidden或auto的overflow屬性有一個有用的反作用，這會自動清理包含的任何浮動元素。

div {
    float:none;
    overflow:hidden; 
}

給父級div定義僞類：after和zoom(zoom爲IE6.7專屬)

.clearfix:after{
    content:'';
    height:0;
    display:block;
    visibility:hidden;
    clear:both
}

最大最小寬度高度兼容

當使用height:auto 時應考慮到元素最大或最小的寬度高度，以便容錯。、

div {
    min-height:500px;
    height:auto;
    max-width:500px;
    width:auto;
}

cursor 屬性（禁點）

<a href="mailto:xzavierhua@gmail.com" "email me">email me</a>
a {cursor:not-allowed;}

cursor其餘經常使用屬性

default    默認光標（一般是一個箭頭）
auto       默認。瀏覽器設置的光標。
crosshair  光標呈現爲十字線。
pointer    光標呈現爲指示連接的指針（一隻手）
move       此光標指示某對象可被移動。
text       此光標指示文本。
wait       此光標指示程序正忙（一般是一隻表或沙漏）。
help       此光標指示可用的幫助（一般是一個問號或一個氣球）。

window font && mac font 兼容

* {
    font-family: "PingFang SC","microsoft yahei",Arial,Helvetica,sans-serif;
}

'PingFang SC'是mac下和微軟雅黑接近的字體，'microsoft yahei'同'微軟雅黑'，不過有些網站不兼容中文(GB2312)的字符仍是用英文的比較好，Arial主要用於文字中的數字。

阻止事件

<a href="mailto:xzavierhua@gmail.com" "email me">email me</a>
a {pointer-events:none;}

禁止選中文本

* {
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

a標籤hover

被點擊訪問過的超連接樣式不在具備hover和active的樣式了,解決方法是改變CSS屬性的排列順序:
L-V-H-A（link,visited,hover,active）

CSS寫一個簡單的幻燈片效果

div {
      width:480px;
      height:320px;
      margin:50px auto;
      overflow: hidden;
      box-shadow:0 0 5px rgba(0,0,0,1);
      background-size: cover;
      background-position: center;
      -webkit-animation-name: "loops";
      -webkit-animation-duration: 20s;
      -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes "loops" {
    0% {background:url(0.jpg) no-repeat;}
    25% {background:url(1.jpg) no-repeat;}
    50% {background:url(2.jpg) no-repeat;}
    75% {background:url(3.jpg) no-repeat;}
    100% {background:url(4.jpg) no-repeat;}
}

rgba()和opacity

rgba()和opacity都能實現透明效果，但最大的不一樣是opacity做用於元素，以及元素內的全部內容的透明度 ;

div {
    opacity:0.5;
}

而rgba()只做用於元素的顏色或其背景色。設置rgba透明的元素的子元素不會繼承透明效果。

div {
    background: rgba(255,255,0,0.8);
  }

使用圓角

div {  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    border-radius: 5px;  
}

!important

css優先級爲: !important > 內聯樣式 > id > class > tag
因此，使用!important時須要當心。

僞類使用

p:first-of-type 選擇屬於其父元素的首個p元素。
p:last-of-type 選擇屬於其父元素的最後p元素。
p:only-of-type 選擇屬於其父元素惟一的p元素。
p:only-child 選擇屬於其父元素的惟一子元素。
p:nth-child(n) 選擇屬於其父元素的第n個子元素。
:enabled :disabled 控制表單控件的禁用狀態。
:checked 單選框或複選框被選中
::selection 匹配被用戶選取的選取是部分

position的relative和absolute

position參考文章：詳解css相對定位和絕對定位

<div class="parent">
    <div class="child"></div>
</div>

.parent{
    position: absolute;  //變換這段代碼作測試
    border: 1px solid #ccc;
    height: 200px;
    width: 200px;
}
.child{
    position: relative;  //變換這段代碼作測試
    left: 100px;
    top:100px;
    background: blue;
    height: 50px;
    width: 50px;
}

relative：

若是設定TRBL，而且父級沒有設定position屬性，仍舊以父級的左上角爲原點進行定位。
若是設定TRBL，而且父級設定position屬性，則以父級的左上角爲原點進行定位，位置由TRBL決定。若是父級有Padding屬性，那麼就之內容區域的左上角爲原點，進行定位。
相對定位老是以父級左上角爲原點進行定位的，若是父級不存在，則以瀏覽器左上角進行定位。

absolute：

若是設定TRBL，而且父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角爲原始點進行定位，位置將由TRBL決定。    
若是設定TRBL，而且父級設定position屬性，則以父級的左上角爲原點進行定位，位置由TRBL決 定。只以父級左上角爲原點進行定位，父級的padding對其根本沒有影響。    
使用絕對定位的盒子以它的「最近」的一個「已經定位」的「祖先元素」爲基準進行定位。若是沒有已經定位的祖先元素，那麼會以瀏覽器窗口爲基準進行定位。
絕對定位的框從標準流中脫離，這意味着他們對其後的兄弟盒子的定位沒有影響，其餘的盒子好像就好像這個盒子不存在同樣。

使用新特性

盒子陰影（box-shadow）
文本陰影（text-shadow、）    
transform:rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜
媒體查詢 @media (min-width: 1280px)
border-image 嵌入圖片形式的邊框 border-image: url(border.png) 27/27px round;
線性漸變（gradient） linear-gradient 線性漸變  radial-gradient 徑向漸變 等等