css-開發(fā)總結

douzifly 發(fā)布于2019-08-30 11:15 / 1912人閱讀

摘要：重疊的外邊距當上下垂直的外邊距同時存在時會發(fā)生外邊距折疊。與邊框包含在元素的寬度或高度中。比如一個元素設置為那么它的總寬就是包括與邊框。

1.重疊的外邊距
當上下垂直的外邊距同時存在時會發(fā)生外邊距折疊。就是只保留兩個margin值中較大的那個。

html:

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-box

box-sizing屬性有兩個值：

content-box（默認）： -內容的實際尺寸。所有的padding和邊框值都不包含。

border-box ： padding與邊框包含在元素的寬度或高度中。
比如一個元素設置為：width: 100px;box-sizing:border-box,那么它的總寬就是100px,包括：padding與邊框。

4.短橫線命名
當class或者ID包含多個單詞時，應使用連字符（-），CSS不區(qū)分大小寫，因此不能使用駝峰式命名。同樣，CSS中也不建議使用下劃線連接的命名方式。

5.不要重復設置
善用繼承樣式，可以去掉很多重復代碼。

6.使用transform屬性來創(chuàng)建動畫
最好使用transform()函數來創(chuàng)建元素的位移或大小動畫，盡量不要直接改變元素的width，height以及l(fā)eft/top/bottom/right屬性值。

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

8.慎用!important
因為!important的權重是最高的，它可以覆蓋掉所以的樣式

9.em, rem與px

em - 設置元素為1em，其大小與父元素的font-size屬性有關。這個單位用于媒體查詢中，特別適用于響應式開發(fā)，但是由于em單位在每一級中都是相對于父元素進行計算的，所以要得出某個子元素em單位對應的px值，有時候是很麻煩的。

rem - 相對于元素的font-size大小計算，rem使得統一改變頁面上的所有標題和段落文本大小變得非常容易。

px - 像素單位是最精確的，但是不適用于自適應的設計。px單位是可靠的，并且易于理解，我們可以精細的控制元素的大小和移動到1px。

大型項目使用預處理器

Sass, Less, PostCSS, Stylus等css預處理器。它們提供諸如變量、CSS函數、選擇器嵌套和許多其他很酷的功能，使CSS代碼更易于管理，特別是在大型項目中。

11.壓縮CSS文件
網頁首要關注點就是加載速度，壓縮文件無疑是其中較好的一種方式。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114874.html

個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區(qū)，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應用的個優(yōu)化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優(yōu)化動歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關鍵渲染路徑 - 開啟性能優(yōu)化之旅高性能滾動 scroll 及頁面渲染優(yōu)化理論 | HTML寫法...

dailybird 2019-08-01 18:28 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應用的個優(yōu)化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優(yōu)化動歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關鍵渲染路徑 - 開啟性能優(yōu)化之旅高性能滾動 scroll 及頁面渲染優(yōu)化理論 | HTML寫法...

hellowoody 2019-08-22 14:02 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應用的個優(yōu)化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優(yōu)化動歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關鍵渲染路徑 - 開啟性能優(yōu)化之旅高性能滾動 scroll 及頁面渲染優(yōu)化理論 | HTML寫法...

wwolf 2019-08-29 14:21 評論0 收藏0