成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

css-開(kāi)發(fā)總結(jié)

douzifly / 1965人閱讀

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

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

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樣式
為了避免不同瀏覽器的不能默認(rèn)樣式所帶來(lái)的的麻煩，重置css樣式無(wú)疑是最好的選擇。

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

3.所有元素設(shè)置為Border-box

box-sizing屬性有兩個(gè)值：

content-box（默認(rèn)）： -內(nèi)容的實(shí)際尺寸。所有的padding和邊框值都不包含。

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

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

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

6.使用transform屬性來(lái)創(chuàng)建動(dòng)畫
最好使用transform()函數(shù)來(lái)創(chuàng)建元素的位移或大小動(dòng)畫，盡量不要直接改變?cè)氐膚idth，height以及l(fā)eft/top/bottom/right屬性值。

7.注意選擇器的權(quán)重
id>.class>el

8.慎用!important
因?yàn)?important的權(quán)重是最高的，它可以覆蓋掉所以的樣式

9.em, rem與px

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

rem - 相對(duì)于元素的font-size大小計(jì)算，rem使得統(tǒng)一改變頁(yè)面上的所有標(biāo)題和段落文本大小變得非常容易。

px - 像素單位是最精確的，但是不適用于自適應(yīng)的設(shè)計(jì)。px單位是可靠的，并且易于理解，我們可以精細(xì)的控制元素的大小和移動(dòng)到1px。

大型項(xiàng)目使用預(yù)處理器

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

11.壓縮CSS文件
網(wǎng)頁(yè)首要關(guān)注點(diǎn)就是加載速度，壓縮文件無(wú)疑是其中較好的一種方式。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/114874.html

相關(guān)文章

  • 個(gè)人分享--web前端學(xué)習(xí)資源分享

    摘要：前言月份開(kāi)始出沒(méi)社區(qū)，現(xiàn)在差不多月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過(guò)的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開(kāi)始出沒(méi)社區(qū)，現(xiàn)在差不多9月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...

    sherlock221 評(píng)論0 收藏0

  • 2017文章總結(jié)

    摘要：歡迎來(lái)我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開(kāi)啟性能優(yōu)化之旅高性能滾動(dòng)及頁(yè)面渲染優(yōu)化理論寫法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁(yè)瞬開(kāi)緩存網(wǎng)頁(yè)性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來(lái)我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開(kāi)啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁(yè)面渲染優(yōu)化 理論 | HTML寫法...

    dailybird 評(píng)論0 收藏0

  • 2017文章總結(jié)

    摘要：歡迎來(lái)我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開(kāi)啟性能優(yōu)化之旅高性能滾動(dòng)及頁(yè)面渲染優(yōu)化理論寫法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁(yè)瞬開(kāi)緩存網(wǎng)頁(yè)性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來(lái)我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開(kāi)啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁(yè)面渲染優(yōu)化 理論 | HTML寫法...

    hellowoody 評(píng)論0 收藏0

  • 2017文章總結(jié)

    摘要：歡迎來(lái)我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開(kāi)啟性能優(yōu)化之旅高性能滾動(dòng)及頁(yè)面渲染優(yōu)化理論寫法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁(yè)瞬開(kāi)緩存網(wǎng)頁(yè)性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來(lái)我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開(kāi)啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁(yè)面渲染優(yōu)化 理論 | HTML寫法...

    wwolf 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<