首頁 > web前端 > css教學 > 主體

sibling選擇器實作vertical margins的實例代碼

零下一度
發布: 2017-05-11 11:30:25
原創
1645 人瀏覽過

sibling選擇器如何在完成複雜設計要求的同時,保持CSS可讀

這是web前端開發過程中開始簡單逐步變的複雜的例子之一:將一篇文章中的所有元素都應用垂直邊距(vertical margins),例如由複雜markdown編譯來的部落格文章。

 大多數情況下,你必須要處理很多例外和相關,例如:標題和圖片上下通常需要更多空白,但是如果兩個圖片上下挨著,那兩圖間空白就改變少。 h2標籤和h3標籤直接的距離比兩個h2之間小。

  當原作者幾年前剛開始做前端的時候,所有這些異常和依賴關係總是導致複雜的程式碼,視覺不一致和意想不到的行為。 google了很多回啥margin-top不起作用。

第一步

  簡單的html如下:

<article class="article">
  <h1>Hello World</h1>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
  <img src="…" alt="…">
  <p>Lorem ipsum dolor sit amet</p>
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
  </ul>
登入後複製

  通常先拿出兩段來調整它們之間的垂直邊距,達到預期效果後,使用該值作為所有元素的基礎邊距。

.article > * + * { 
    margin-top: 1.5rem;
}
登入後複製

  上述css程式碼給.article中全部有相鄰兄弟元素的子元素加入margin-top。只為直系元素添加margin-top屬性避免了不想要的效果,例如上述html中ul將被添加margin-top,而不是li。

使用CSS兄弟选择器完成复杂垂直边距(vertical margins)的设计0

第二步

  在這一步驟中會加入更具體的css規則,如:

.article > img + * { 
    margin-top: 3rem;
}
登入後複製

  img之後的任何元素都會接收到特定的margin-top,效果類似直接應用在imgmargin-bottom。 但是使用相鄰的兄弟選擇器和邊緣頂部有兩個優點:

  1.不必從最後一個子進程中刪除margin-bottom

  2.並避免折邊距( collapsing margins.)

使用CSS兄弟选择器完成复杂垂直边距(vertical margins)的设计1

#第三步驟

  在此步驟中,將規則新增至特定元素,例如:

.article > * + h2 { 
    margin-top: 4rem;
}
.article > * + img { 
    margin-top: 3rem;
}
登入後複製

  有相鄰兄弟的h2和img,會收到一個特定的margin-top。

使用CSS兄弟选择器完成复杂垂直边距(vertical margins)的设计2

第四步驟

  在這最後一步處理有特殊相關性的樣式

.article > img + img { 
    margin-top: 1rem; 
}
登入後複製

  改變相鄰圖片間的距離

使用CSS兄弟选择器完成复杂垂直边距(vertical margins)的设计3

  如果需要還可以加入精確的css選擇器,如:

.article > img + img + img + h2 { 
    margin-top: 5rem;
}
登入後複製

  如果一個h2排列在連續三個圖像,它會收到一個特定的margin-top。 幸運的是,這只是一個特殊案例, 但是很高興知道相鄰的兄弟選擇器可以解決這種複雜的依賴問題。

進階使用

  為了提高可讀性,使用(SCSS)巢狀並將每條規則寫入一行。 不用對具有相同值的選擇器進行分組,因為CSSO會在之後建置任務中處理它。

.article {
    > * + * { margin-top: 1.5rem }
    > h2 + * { margin-top: 1rem }
    > img + * { margin-top: 3rem }
    > * + h2 { margin-top: 4rem }
    > * + h3 { margin-top: 3.5rem }
    > * + img { margin-top: 3rem }
    > img + img { margin-top: 1rem }
    > h2 + h3 { margin-top: 4.5rem }
}
登入後複製

這種技術也適用於SASS或CSS,例如基準網格。 如果所有margin都是由指定margin變數計算的,只需要更改該變數來增加或減少整體空白。

結論  

  一般開發的網站時會遇到非常複雜的文章,通常包括類別標題,簡介文字或嵌套佈局等元素。使用相鄰的兄弟選擇器和唯一的margin-top可以在解決複雜的設計要求的同時保持CSS可理解, 方便之後再添加或調整規則。

【相關推薦】

1. 免費css線上影片教學

2. css線上手冊

#3. php.cn獨孤九賤(2)-css影片教學

#

以上是sibling選擇器實作vertical margins的實例代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!