成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css編碼技巧【css揭秘讀書筆記】

Miyang / 3386人閱讀

摘要：最近在看揭秘，于是寫了文章來作筆記，除此以外還會(huì)補(bǔ)充一些自己遇到的筆試題。舉例說明以上的代碼有什么問題呢如果需要改變字號(hào)，那么同時(shí)需要調(diào)整行高。那么經(jīng)過修改后的代碼如下關(guān)于使用還是還是百分比，需要根據(jù)具體情況來決定。

最近在看《css揭秘》，于是寫了文章來作筆記，除此以外還會(huì)補(bǔ)充一些自己遇到的筆試題。希望大家都有所收獲。

css編碼技巧 盡量減少代碼重復(fù)

在實(shí)踐中，代碼可維護(hù)性的最大要素是盡量減少改動(dòng)時(shí)要編輯的地方。
舉例說明

padding:6px 12px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow:0 -1px 1px #335166;
font-size:20px;
line-height:30px;

以上的代碼有什么問題呢？

如果需要改變字號(hào)，那么同時(shí)需要調(diào)整行高。
【當(dāng)某些值相互依賴時(shí)，應(yīng)該把它們的相互關(guān)系用代碼表達(dá)出來】

如果將父級(jí)的字號(hào)加大，則不得不修改每一處使用絕對(duì)值作為字體尺寸的樣式。

需要確定哪些效果是應(yīng)該跟著變大變小，哪些效果是保持不變的

產(chǎn)生主色調(diào)的亮色和暗色變體，其實(shí)可以使用將半透明的黑色或白色疊加在主色調(diào)上。
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
//作者建議使用HSLA而不是RGBA來產(chǎn)生半透明的白色。因?yàn)樗淖址L(zhǎng)度更短，重復(fù)率更低。

那么經(jīng)過修改后的代碼如下：

padding: .3em .8em;
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius: .2em
box-shadow: 0 .05em .25em rgba(0,0,0,.5);
color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
font-size: 125%;
line-height:1.5

關(guān)于使用rem還是em還是百分比，需要根據(jù)具體情況來決定。

【插播筆試題】 Q：line-height:1.5 與line-height:150%的差別？

line-height:1.5 是根據(jù)自身元素的font-size進(jìn)行計(jì)算。

line-height:150% 是根據(jù)父元素繼承而來的font-size進(jìn)行計(jì)算。

Q：rem,em,px的差別

rem css3新增單位。rem為元素設(shè)定字體大小時(shí)，相對(duì)的只是HTML根元素?！綢E8以下不支持】

em 相對(duì)于父元素的字體大小。

px 像素px是相對(duì)于顯示器屏幕分辨率而言的
px，em，rem的轉(zhuǎn)換工具

繼續(xù)回到css編碼技巧。

有時(shí)候，代碼易維護(hù)和代碼量少不可兼得。

例如，為元素添加一個(gè)10px寬的邊框，但左側(cè)不加邊框
border-width: 10px 10px 10px 0;
但若以后需要改動(dòng)邊框的寬度，需要同時(shí)改3個(gè)地方。那么以下這種方式可能更好。
border-width: 10px;
border-left: 0;

currentColor【IE9+支持】

例如，我們想讓所有的水平分割線元素自動(dòng)與文本顏色保持一致，只需要這樣寫。
hr { background: currentColor;}
border和box-shadow默認(rèn)的顏色就是當(dāng)前的文字顏色，也就是類似currentColor。currentColor本身就是很多顏色屬性的初始值，例如border-color、outline-color、text-shadow和box-shadow的顏色?！緄OS Safari瀏覽器下(iOS8)下，currentColor有一些bug，例如偽元素hover時(shí)候，background:currentColor的背景色不會(huì)跟著變化。關(guān)于currentColor其他信息可查看張?chǎng)涡癫┛?，currentColor-CSS3超高校級(jí)好用CSS關(guān)鍵字。

繼承 inherit

例如，在創(chuàng)建提示框時(shí)，可能希望小箭頭能自動(dòng)繼承背景和邊框的樣式。就可以這樣做。
.callout:before {

   //其他代碼
   background: inherit;
   border: inherit;

}

相信你的眼睛，而不是數(shù)字 
視覺上的錯(cuò)覺在任何形式的視覺設(shè)計(jì)中都普遍存在。如果希望四邊的內(nèi)邊距看起來基本一致，需要減少頂部和底部的內(nèi)邊距。

關(guān)于響應(yīng)式網(wǎng)頁設(shè)計(jì)

作者提出了一些建議，可能可以避免不必要的媒體查詢

使用百分比長(zhǎng)度來取代固定長(zhǎng)度，如果做不到，嘗試使用與視口相關(guān)的單位(vw,vh,vmin,vmax)，它們的值解析為視口寬度與高度的百分比。

當(dāng)需要在較大分辨率得到固定寬度時(shí)，使用max-width

不要忘記為替換元素（例如img,object,video,iframe等）設(shè)置一個(gè)max-width，值為100%

假設(shè)背景圖片需要完整的鋪滿一個(gè)容器，可以使用background-size:cover。【在移動(dòng)網(wǎng)頁中通過css把一張大圖縮小顯示往往不太明智】

當(dāng)圖片或其他元素以行列式進(jìn)行布局，讓視口的寬度來決定列的數(shù)量?？梢允褂脧椥院胁季?Flexbox)或者display:inline-box加上文本折行行為。

在使用多列文本時(shí)，指定column-width而不是column-count，這樣可以在較小的屏幕上自動(dòng)顯示為單列布局。
【盡量實(shí)現(xiàn)彈性可伸縮的布局，并在媒體查詢的各個(gè)斷點(diǎn)區(qū)間內(nèi)制定相應(yīng)尺寸】

合理使用縮寫

如果要明確地去覆蓋某個(gè)具體展開式屬性并保留其他相關(guān)樣式，則需要用展開式屬性。

background: url(tr.png) no-repeat top right / 2em 2em,
            url(br.png) no-repeat bottom right / 2em 2em,
            url(bl.png) no-repeat bottom left / 2em 2em;
            
//如果只為某個(gè)屬性提供一個(gè)值，那么它會(huì)擴(kuò)散并應(yīng)用到列表中的每一項(xiàng)。
//在簡(jiǎn)寫時(shí)，使用一個(gè)斜杠（/）作為分隔，是為了消除歧義。

background: url(tr.png) top right,
            url(br.png) bottom right,
            url(bl.png) bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;

//此時(shí)，只需要在一處修改，就可以改變所有的background-size和background-repeat

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115219.html

相關(guān)文章

  • 《css揭秘》讀書筆記

    摘要：但是根據(jù)本司機(jī)兩年的開發(fā)經(jīng)驗(yàn)來看，在實(shí)際開發(fā)中很少來使用這個(gè)單位。由于基本都是一些實(shí)用性的技巧，我就不一一列舉了，建議自讀。很好很實(shí)用的一本書。 第一章 引言 css編碼技巧 在引言中，作者提到使用em與inherit來實(shí)現(xiàn)css代碼的簡(jiǎn)潔與可維護(hù)性。但是根據(jù)本司機(jī)兩年的開發(fā)經(jīng)驗(yàn)來看，在實(shí)際開發(fā)中很少來使用em這個(gè)單位。如何用以及何時(shí)去使用，還是要根據(jù)實(shí)際開發(fā)需求來定吧，畢竟這兩個(gè)屬性...

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

  • 《css 揭秘》讀書筆記

    摘要：因?yàn)轷r為人知的第四個(gè)長(zhǎng)度參數(shù)雙層投影毛玻璃效果見毛玻璃自定義復(fù)選框不多介紹，也有相關(guān)案例復(fù)選框滾動(dòng)提示現(xiàn)在越來越多的移動(dòng)端都是這樣處理，滾動(dòng)提示其他揭秘對(duì)應(yīng)的地址圖靈圖書在封底都提供優(yōu)惠碼低價(jià)購(gòu)買電子書她 目標(biāo) 如何用 css 解決難題 收獲 盡量減少代碼重復(fù) 1 用相對(duì)值 font-size: 20px; line-height: 30px; // 應(yīng)該改成 font-size:...

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

  • CSS技巧

    摘要：技巧使你的更加專業(yè)這是上關(guān)于技巧的一篇譯文，另外你也可以在本項(xiàng)目看到原文。列舉了一些很實(shí)用的技巧，比如給空內(nèi)容的標(biāo)簽添加內(nèi)容，逗號(hào)分隔列表等等。排序算法看源碼，把它背下來吧排序算法的封裝。主要幫助初學(xué)者更好的掌握排序算法的實(shí)現(xiàn)。 成為專業(yè)程序員路上用到的各種優(yōu)秀資料、神器及框架 成為一名專業(yè)程序員的道路上，需要堅(jiān)持練習(xí)、學(xué)習(xí)與積累，技術(shù)方面既要有一定的廣度，更要有自己的深度。 Java...

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

  • CSS技巧

    摘要：技巧使你的更加專業(yè)這是上關(guān)于技巧的一篇譯文，另外你也可以在本項(xiàng)目看到原文。列舉了一些很實(shí)用的技巧，比如給空內(nèi)容的標(biāo)簽添加內(nèi)容，逗號(hào)分隔列表等等。排序算法看源碼，把它背下來吧排序算法的封裝。主要幫助初學(xué)者更好的掌握排序算法的實(shí)現(xiàn)。 成為專業(yè)程序員路上用到的各種優(yōu)秀資料、神器及框架 成為一名專業(yè)程序員的道路上，需要堅(jiān)持練習(xí)、學(xué)習(xí)與積累，技術(shù)方面既要有一定的廣度，更要有自己的深度。 Java...

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

  • CSS技巧 - 收藏集 - 掘金

    摘要：筆者作為一位，將工作以來用到的各種優(yōu)秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識(shí)點(diǎn)大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計(jì)算數(shù)組的極值技巧使你的更加專業(yè)前端掘金一個(gè)幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經(jīng)常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會(huì)用到。會(huì)持續(xù)更新… 一、...

    Jonathan Shieber 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<