css經常使用的技巧

時間 2019-11-08

標籤 css 經常使用技巧欄目 CSS 简体版

原文原文鏈接

1.CSS中沒有//註釋，只有/**/註釋：css

2.將圖片做爲背景html

當給頁面添加圖片時，尤爲須要圖片是響應式的時候，最好使用background屬性來引入圖片，而不是<img>標籤。瀏覽器

這看起來使用圖片會更復雜，但實際上它會使設置圖片的樣式變得更加容易。有了background-size, background-position和其它的屬性，保持或改變圖片原始尺寸和寬高比會更方便。編輯器

//div
<section>
    <p>Img element</p>
    <img src="https://tutorialzine.com/media/2016/08/bicycle.jpg" alt="bicycle">
</section>

<section>
    <p>Div with background image</p>
    <div></div>
</section>

//css
img {
    width: 300px;
    height: 200px;
}

div {
    width: 300px;
    height: 200px;
    background: url('https://tutorialzine.com/media/2016/08/bicycle.jpg');
    background-position: center center;
    background-size: cover;
}

section{
    float: left;
    margin: 15px;
}

3.更好的表格邊框ide

HTML中的表格老是很難看的。它們很難作成響應式的，並且整體上很難改變樣式。例如，若是要向表格及其單元格添加簡單的邊框，則最可能的結果是：函數

如你所見，有不少重複的邊框，看起來很很差看。這裏有一個快速的方法來刪除全部的雙倍邊框：border-collapse: collapse，只需設置這個屬性後，表格的邊框看起來就順眼多了：工具

4.使用transform屬性來建立動畫post

最好使用transform()函數來建立元素的位移或大小動畫，儘可能不要直接改變元素的width，height以及left/top/bottom/right屬性值。動畫

下面的例子中，咱們給.ball元素添加了一個從左向右的移動動畫。推薦使用transform: translateX()函數來代替left屬性。url

.ball {
    left: 50px;
    transition: 0.4s ease-out;
}

/* 不建議 */
.ball.slide-out {
    left: 500px;
}

/* 建議 */
.ball.slide-out {
    transform: translateX(450px);
}

transform以及它的全部函數（translate, rotate, scale等）幾乎沒有瀏覽器兼容性問題，能夠隨意使用。

5.使用text-transform轉換字母爲大寫

本條適用於英文環境，不適合中文

在HTML中，能夠將某個單詞所有寫爲大寫字母來表達強調的含義。好比：

<h3>Employees MUST wear a helmet!</h3>

若是你須要將某段文字所有轉化爲大寫，咱們能夠在HTML中正常書寫，而後經過CSS來轉化。這樣能夠保持上下文內容的一致性。

<div class="movie-poster">Star Wars: The Force Awakens</div>
.movie-poster {
    text-transform: uppercase;
}

6.Em, Rem與px

設置元素與文本的大小應該用哪一種單位，em，rem，仍是px？一直以來都有不少的爭論。事實是，這三種選擇都是可行的，都有其利弊。

在何時在什麼項目使用哪一種單位是沒有一個定論的，開發人員的習慣不一樣，項目的要求不一樣，均可能會使用不一樣的單位。然而，雖然沒有固定的規則，可是每種單位仍是有一些要注意的地方的：

em - 設置元素爲1em，其大小與父元素的font-size屬性有關。這個單位用於媒體查詢中，特別適用於響應式開發，可是因爲em單位在每一級中都是相對於父元素進行計算的，因此要得出某個子元素em單位對應的px值，有時候是很麻煩的。
rem - 相對於<html>元素的font-size大小計算，rem使得統一改變頁面上的全部標題和段落文本大小變得很是容易。
px - 像素單位是最精確的，可是不適用於自適應的設計。px單位是可靠的，而且易於理解，咱們能夠精細的控制元素的大小和移動到1px。

最重要的是，不要懼怕嘗試，嘗試全部方法，看看最適合什麼。有時候，em和rem能夠節省不少工做，尤爲是在構建響應式頁面時。

7.使用AutoPrefixer達到更好的兼容性

瀏覽器前綴是CSS中最煩人的事情之一，每一個屬性須要的前綴是不一致的，你永遠不知道到底須要哪個，若是真的要把它一個一個手動添加到樣式表中，那無疑是一個無聊的噩夢。

值得慶幸的是，有工具能夠自動爲咱們提供添加瀏覽器前綴的功能，甚至能夠決定須要支持哪些瀏覽器：