css-開發總結

時間 2019-12-06

標籤 css 開發總結欄目 CSS 简体版

原文原文鏈接

1.重疊的外邊距
當上下垂直的外邊距同時存在時會發生外邊距摺疊。就是隻保留兩個margin值中較大的那個。css

html:html

<div class="div1">
        <div class="div2"></div>
        <div class="div2"></div>
    </div>

css:瀏覽器

.div1{
    width: 600px;
    height: 200px;
    border: 1px solid #aaa;
    margin: 0 auto;
}
.div2{
    width: 50px;
    margin: 20px;
    border: 1px solid red;
    height:50px;
}

效果：
函數

2.重置css樣式
爲了不不一樣瀏覽器的不能默認樣式所帶來的的麻煩，重置css樣式無疑是最好的選擇。動畫

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

3.全部元素設置爲Border-boxspa

box-sizing屬性有兩個值：設計

content-box（默認）： -內容的實際尺寸。全部的padding和邊框值都不包含。
border-box ： padding與邊框包含在元素的寬度或高度中。
好比一個元素設置爲：width: 100px;box-sizing:border-box,那麼它的總寬就是100px,包括：padding與邊框。

4.短橫線命名
當class或者ID包含多個單詞時，應使用連字符（-），CSS不區分大小寫，所以不能使用駝峯式命名。一樣，CSS中也不建議使用下劃線鏈接的命名方式。code

5.不要重複設置
善用繼承樣式，能夠去掉不少重複代碼。orm

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

7.注意選擇器的權重
id>.class>el

8.慎用!important
由於!important的權重是最高的，它能夠覆蓋掉因此的樣式

9.em, rem與px

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