<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          20個讓你效率更高的CSS代碼技巧

          時間:?2019-06-21閱讀:?513標簽:?技巧

          在本文中,我們想與您分享一個由各大CSS網站總結推薦的20個有用的規則和實踐經驗集合。有一些是面向CSS初學者的,有一些知識點是進階型的。希望每個人通過這篇文章都能學到對自己有用的知識。

          好了,我們開始。

          1.注意外邊距折疊

          與其他大多數屬性不同,上下的垂直外邊距margin在同時存在時會發生外邊距折疊。這意味著當一個元素的下邊緣接觸到另一個元素的上邊緣時,只會保留兩個margin值中較大的那個。例如:

          HTML

          <div class="square red"></div>
          <div class="square blue"></div>

          CSS

          .square {
              width: 80px;
              height: 80px;
          }
          .red {
              background-color: #F44336;
              margin-bottom: 40px;
          }
          .blue {
              background-color: #2196F3;
              margin-top: 30px;
          }

          紅色方塊與藍色方塊的上下間距是40px,而不是70px。解決外邊距折疊的方法有很多種,對于初學者來說最簡單的就是所有元素只使用一個方向上的margin,比如上下的外邊距我們統統使用margin-bottom。


          2.使用flex進行布局

          flex彈性布局的出現是有原因的。浮動和inline-block雖然也能實現很多的布局效果,但它們本質上是文本和塊元素布局的工具,而不是面向整個網頁的。flex可以很容易的按照我們預期的方式創建布局。

          flex擁有一組面向“彈性容器”的屬性和一組面向“彈性項目”的屬性,一旦你學會了它們,做任何響應式布局都是小菜一碟。目前各類瀏覽器的最新版本對flex的支持性也是沒有任何問題的,所以你應該多多使用flex布局。

          .container {
              display: flex;
          }


          3.重置元素的CSS樣式

          盡管這些年來有了很大的改善,但是不同瀏覽器對于各種元素的默認樣式仍然存在很大的差異。解決這個問題的最佳辦法是在CSS開頭為所有的元素設置通用的CSS Reset重置代碼,這樣你是在沒有任何默認內外邊距的基礎上進行布局,于是所產生的效果也就是統一的。

          網絡上已經有成熟的CSS代碼庫為我們解決瀏覽器不一致問題,例如normalize.css、minireset和ress,你可以在你的項目中引用它們。如果你不想使用第三方代碼庫,你可以使用下面的樣式來進行一個非常基本的CSS reset:

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

          上面的代碼看起來有些霸道,將所有元素的內外邊距都設置為0了,而正是沒有了這些默認內外邊距的影響,使得我們后面的CSS設置會更加的容易。同時box-sizing: border-box也是一個很棒的設置,我們緊接著就會介紹它。


          4.所有元素設置為Border-box

          大多數初學者都不知道box-sizing這個屬性,但實際上它非常重要。box-sizing屬性有兩個值:

          • content-box(默認) - 當我們設置一個元素的寬度或高度時,就是設置它的內容的大小。所有的padding和邊框值都不包含。例如,一個div的寬度設置為100,padding為10,于是這個元素將占用120像素(100+2*10)。
          • border-box - padding與邊框包含在元素的寬度或高度中,一個設置為width: 100px和box-sizing:
            border-box的div元素,他的總寬度就是100px,無論它的內邊距和邊框有多少。

          將所有元素都設置為border-box,可以更輕松的改變元素的大小,而不必擔心padding或者border值會將元素撐開變形或者換行顯示。


          5.將圖片作為背景

          當給頁面添加圖片時,尤其需要圖片是響應式的時候,最好使用background屬性來引入圖片,而不是<img>標簽。

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

          舉個例子
          HTML

          <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;
          }

          background引入圖片的一個缺點是頁面的Web可訪問性會受到輕微的影響,因為屏幕閱讀器和搜索引擎無法正確地獲取到圖像。這個問題可以通過CSS object-fit屬性解決,到目前為止除了IE瀏覽器其他的瀏覽器都可以使用object-fit。


          6.更好的表格邊框

          HTML中的表格總是很難看的。它們很難做成響應式的,而且總體上很難改變樣式。例如,如果要向表格及其單元格添加簡單的邊框,則最可能的結果是:


          如你所見,有很多重復的邊框,看起來很不好看。這里有一個快速的方法來刪除所有的雙倍邊框:border-collapse: collapse,只需設置這個屬性后,表格的邊框看起來就順眼多了:



          7.更友好的注釋

          CSS也許不是一種編程語言,但其代碼仍然需要文檔化。添加一些簡單的注釋可以將代碼分類區分,方便自己和同事后期維護。

          對于大的區域劃分或者重要的組件可以使用下面的注釋樣式:

          /*---------------
              #Header
          ---------------*/
          header { }
          
          header nav { }
          
          /*---------------
              #Slideshow
          ---------------*/
          .slideshow { }

          對于細節和不太重要的樣式可以使用單行的注釋方式:

          /*   Footer Buttons   */
          .footer button { }
          
          .footer button:hover { }

          另外,請記住,CSS中沒有//注釋,只有/**/注釋:

          /*  正確  */
          p {
              padding: 15px;
              /*border: 1px solid #222;*/
          }
          
          /*  錯誤  */
          p {
              padding: 15px;
              // border: 1px solid #222;  
          }


          8.短橫線命名

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

          /*  正確     */
          .footer-column-left { }
          
          /*  錯誤  */
          .footerColumnLeft { }
          
          .footer_column_left { }

          當涉及到命名時,您還可以考慮BEM,它遵循一組原則,提供基于組件并增加一致性的開發方法。


          9.不要重復設置

          大多數CSS屬性的值都是從DOM樹中向上一級的元素繼承的,因此才被命名為級聯樣式表。以font屬性為例-它總是從父級繼承的,您不必為頁面上的每個元素都單獨設置。

          只需將要設置的字體樣式添加到<html>或<body>元素中,然后讓它們自動向下繼承。

          html {
              font: normal 16px/1.4 sans-serif;
          }

          然后我們就可以統一的一次改變頁面上所有的文字樣式了。當然,CSS中并不是所有的屬性都是可繼承的,對于這些屬性我們仍然需要在每個元素上單獨設置。


          10.使用transform屬性來創建動畫

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

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

          .ball {
              left: 50px;
              transition: 0.4s ease-out;
          }
          
          /* 不建議 */
          .ball.slide-out {
              left: 500px;
          }
          
          /* 建議 */
          .ball.slide-out {
              transform: translateX(450px);
          }

          transform以及它的所有函數(translate, rotate, scale等)幾乎沒有瀏覽器兼容性問題,可以隨意使用。


          11.不要DIY,多使用代碼庫

          CSS社區非常龐大,不斷有新的代碼庫出現。它們有各種用途,從微小的片段到構建響應式應用程序的整體框架。其中大多數也是開源的。

          下一次當你面對一個CSS問題時,在你試圖費盡全力解決它之前,檢查一下Github或Codepen上是否已經有了一個可用的解決方案。


          12.保持選擇器的低權重

          css的選擇器并不都是平等的。當初學習CSS時,我總是認為選擇器會覆蓋它上面的所有內容。然而,情況并非如此,就如我們在下面的示例中所說明的:

          HTML

          <a href='#' id='blue-btn' class="active">按鈕</a>

          CSS

          a{
              color: #fff;
              padding: 15px;
          }
          a#blue-btn {
              background-color: blue;
          }
          a.active {
              background-color: red;
          }

          我們希望.active類中設置的樣式會生效使按鈕變為紅色。但是它并不會起作用,因為按鈕在上面有一個ID選擇器,它同樣設置了background-color,ID選擇器具有更高的權重,所以按鈕的顏色是藍色的。選擇器的權重大小規格如下:

          ID (#id) > Class (.class) > Type (例如 header)

          權重也會疊加,于是a#button.active的權重要比a#button的高。一開始就使用高權重的選擇器會導致你在后面的維護中不斷的使用更高權重的選擇器,最終選擇使用!important,這是非常不推薦的,具體的原因緊接著就會講到。


          13.不要使用!important

          說真的,不要使用!important。現在看起來可以快速的解決問題,但最終可能會導致大量的重寫。相反,我們應該花點時間找到CSS選擇器不工作的原因并更改它。

          唯一可以使用的!important的地方是當您想要覆蓋HTML中的內聯樣式時,但是內聯樣式同樣也是一個壞的習慣,應該盡量的避免。


          14.使用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;
          }


          15.Em, Rem與px

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

          在什么時候在什么項目使用哪種單位是沒有一個定論的,開發人員的習慣不同,項目的要求不同,都可能會使用不同的單位。然而,雖然沒有固定的規則,但是每種單位還是有一些要注意的地方的:

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

          最重要的是,不要害怕嘗試,嘗試所有方法,看看最適合什么。有時候,em和rem可以節省很多工作,尤其是在構建響應式頁面時。


          16.對于大型項目使用預處理器

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

          舉個簡單的例子,下面是一個SASS代碼的片段,它使用到了一些CSS變量和函數:

          $accent-color: #2196F3;
          a {
              padding: 10px 15px;
              background-color: $accent-color;
          }
          a:hover {
              background-color: darken($accent-color,10%);
          }

          預處理器的唯一的不足之處是它們任然需要編譯成普通的CSS。而CSS推出的自定義屬性則是真正意義上的預處理。


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

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

          值得慶幸的是,有工具可以自動為我們提供添加瀏覽器前綴的功能,甚至可以決定需要支持哪些瀏覽器:


          18.壓縮CSS文件

          為了提高網站和應用程序的加載速度和頁面負載,您應該使用壓縮后的資源。壓縮版本的文件將刪除所有空白和重復,從而減少總文件的體積。當然,這個過程也會使樣式表完全不可讀,所以要在生產環境中使用.min版本,同時為開發保留常規版本。

          有許多不同的方法來壓縮CSS代碼:

          根據您的工作流程,可以使用上述任何一種方式。


          19.Caniuse

          對于CSS的屬性Web瀏覽器仍然存在許多兼容性不一致的地方。使用caniuse來檢查您使用的屬性是否得到了廣泛的支持?是否需要前綴?或者是否在某個瀏覽器中使用有要注意的地方?有了caniuse你在寫CSS時就會更得心應手了。


          20.驗證

          驗證CSS可能不像驗證HTML或JavaScript代碼那么重要,但是通過工具運行一下你的代碼仍然非常有用。它會告訴你是否犯了任何錯誤,警告錯誤的用法,并為您提供改進代碼的提示。

          就像壓縮和Autoprefixer一樣,有免費的工具可以利用:

          原文:https://tutorialzine.com/2016/08/20-protips-for-writing-modern-css

          譯文:https://segmentfault.com/a/1190000019542534



          吐血推薦

          1.站長廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入...

          2.休閑娛樂: 直播/交友    優惠券領取   網頁游戲   H5游戲

          鏈接: http://www.modern-decoration.com.cn/article/detial/3813

          網站性能延遲加載圖像的五種技巧

          即使經過適當的優化,圖像也會有相當大的重量。這可能會對訪問者在訪問網站內容之前等待的時間產生負面影響。很有可能,它們會失去耐心,轉向其他地方,除非你能想出一個不影響速度感知的圖像加載解決方案。在本文中,您將學習有關延遲加載圖像的五種方法

          高級 Vue 技巧:控制父類的 slot

          首先來思考一個問題:是否有一種方法可以從子組件填充父組件的插槽?最近一位同事問我這個問題,答案很簡單:可以的。但我的解決方案可能和你想的完全不一樣,這是涉及一個棘手的Vue架構問題

          JS高階編程技巧--柯理化函數

          從中我們可以看出,在某一個階段之后執行某些代碼,我們需要預先把this指向、參數等預先準備好,這種預先處理的思想即柯理化思想。即,柯理化函數的思想:利用閉包的機制,把一些內容事先存儲和處理了,等到后期需要的時候拿來用即可。

          總結移動端H5開發常用技巧

          安卓上會對符合郵箱格式的字符串進行識別,我們可以通過如下的 meta 來管別郵箱的自動識別:移動端 H5 項目越來越多,設計師對于 UI 的要求也越來越高,比如 1px 的邊框。在高清屏下,移動端的 1px 會很粗。

          14個 JavaScript 中鮮為人知的技巧

          人們通常認為 JavaScript 是一門很容易上手的語言,但是要做到精通卻不簡單。是的,這是因為 JavaScript 是一種非常古老且非常靈活的語言。它充滿了神秘的語法和過時的功能。到目前為止,我已經使用 JavaScript 多年了

          9個強大的Js小技巧

          以下是 9 個功能強大的 JavaScript hack 技巧。全部替換我們知道 string.replace() 函數僅替換第一次出現的情況。你可以通過在正則表達式的末尾添加 /g 來替換所有出現的內容。

          11 個Js精簡技巧

          當我開始學習JavaScript時,我把我在別人的代碼、code challenge網站以及我使用的教程之外的任何地方發現的每一個節省時間的技巧都列了一個清單。在這篇文章中,我將分享11條我認為特別有用的技巧

          Js應用技巧集合

          這里我將會對這些應用技巧進行集中描述,如果你覺得遺漏了一些好用的應用技巧,也請在留言中提出,我會及時更新到這篇文章中的。

          幾個牛X的js開發技巧

          使用 grid ,需要重新創建原始數據,并且每行的列長度可能不匹配, 為了確保不匹配行之間的長度相等,可以使用Array.fill方法。ES6 提供了從數組中提取惟一值的兩種非常簡潔的方法。不幸的是,它們不能很好地處理非基本類型的數組

          React 開發必須知道的 34 個技巧

          React 是前端三大框架之一,在面試和開發中也是一項技能;本文從實際開發中總結了 React 開發的一些技巧技巧,適合 React 初學或者有一定項目經驗的同學;萬字長文,建議收藏。

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网