瞭解CSS

Nicholas C.Zakas (《JavaScript高級程序設計》的作者，NCZOnline - The official website of Nicholas C. Zakas)說過，要想全面理解和掌握JavaScript，關鍵在於弄清楚它的歷史、本質和侷限性。對CSS同樣適用。

歷史
混沌未分天地亂，CSS的誕生就是爲了終結當時由推動Web世界繁榮的首功之臣HTML引發的混亂局面。在1990~1993年Web世界還處於一片荒蕪的時候，HTML這個勤勞而艱難生存的族羣帶着描述段落、標題、超鏈接等結構性內容（後來這些成員榮升HTML國的貴族，經過幾次戰亂並一直生活到現在）的技能給Web世界帶來了生機。而後 Mosaic（早期的一款瀏覽器）的出現讓文字和圖片可以一起顯示出來，也一夜之間讓Web威名遠揚，這裏充滿魔力與神奇。無數的站點冒了出來，無數的站點吸引無數的人，無數的人帶來無數的新功能，我要字體能變色，我要字體能加粗，各種樣式要求不斷增加。HTML爲了滿足人們不斷膨脹的慾望和要求努力擴充技能樹，最後弄得自己苦不堪言，一大堆描述樣式的標籤（現在還有的<i><em>等）搞得開發亂七八糟。

結構化標記語言就這樣變成了一坨一坨的字符串。

剛成立的Web世界聯合國W3C並沒有坐視不管，而是在積極的尋找與焦急的等待。終於他們找到了CSS。CSS在現在Web開發中可謂平淡無奇，寫CSS是很自然的事情因爲它就屬於開發的一部分，但在當時卻是絕無僅有的。它最初由HÃ¥kon Wium Lie於1994.10.10（他當時是於1994.10.10（他當時是Tim Berners-Lee在CERN的同事，Lee發明了萬維網）提出來，由Bert Bos建議，經過W3C的公開和內部討論最終在1996年底推出CSS1，並使之成爲標準被推薦，很快瀏覽器廠商也爭相在自家產品中實現以佔領市場。這中間也並非一帆風順，比如網景公司就提交了一種新語言JSSS來實現樣式，但最終並沒有被接受（這種開發標準之爭一直存在，包括後來的JavaScript，以及現在開發中的很多新技術都是這樣）。

CSS接過了HTML手中的樣式表現接力棒，也開始了自己的傳奇之旅。

本質
CSS的本質可以分爲宏觀與微觀兩方面。宏觀上它的存在就是爲了控制頁面的顯示樣式。包括佈局，顏色，字體等。微觀上則是實現這種控制功能的各種屬性的定義和工作原理。

瞭解定義就能幹活，知道原理才能把活幹好。

題主說屬性太多，其實CSS就是去控制樣式而已，網頁樣式是借鑑於傳統的報紙等印刷品的排版。你隨便在身邊找一份報紙或者雜誌的一頁，用CSS儘可能的還原出來。整體佈局還原出來問題應該不大，但是具體到細節的時候可能會有很多問題，比如出來的效果總是跟想的不一樣。這個時候就該去看看單個屬性的工作原理，比如margin是用來控制外邊距的但是用%的時候它是怎麼計算的最終值呢？當發現出乎意料的時候就去Index查一下屬性的定義和值的計算方法。
常用基礎樣式：


Tips：

• 常用CSS屬性margin和padding的%取值是基於包含塊（離元素最近的塊級祖先元素）的寬,注意是寬。
• 行內元素相關的內容區、行內框、基線這幾個概念很重要。
• inline-block是，內部被解析爲塊級元素，自身被解析爲行內元素。
• background-image可以同時爲一個元素設置多個背景圖配合background-position可以組合出神奇的效果。
• 浮動的元素會消除外邊距重合，浮動的元素會被解析爲塊級元素。
• top,right,bottom,left,z-index這些屬性只有用在定位元素(除了position爲static值)上纔有效。
• overflow的值設置爲scroll，在移動端可以做橫向滑動效果。
• 除了做表格不要用table佈局。
• 選擇器都很簡單，只說一類。結構僞類選擇器，原理可以理解爲先找到符合條件的元素後，向上找到其父元素然後驗證規則。

CSS屬性推薦書寫順序

div {  
  position: ;
  top: ;
  right: ;
  bottom: ;
  left: ;
  z-index: ;
  float: ;
  display: ;
  width: ;
  height: ;
  max-width: ;
  max-height: ;
  min-width: ;
  min-height: ;
  padding: ;
  padding-top: ;
  padding-right: ;
  padding-bottom: ;
  padding-left: ;
  border: ;
  border-collapse: ;
  border-top: ;
  border-right: ;
  border-bottom: ;
  border-left: ;
  border-color: ;
  border-image: ;
  border-top-color: ;
  border-right-color: ;
  border-bottom-color: ;
  border-left-color: ;
  border-spacing: ;
  border-style: ;
  border-top-style: ;
  border-right-style: ;
  border-bottom-style: ;
  border-left-style: ;
  border-width: ;
  border-top-width: ;
  border-right-width: ;
  border-bottom-width: ;
  border-left-width: ;
  border-radius: ;
  border-top-right-radius: ;
  border-bottom-right-radius: ;
  border-bottom-left-radius: ;
  border-top-left-radius: ;
  margin: ;
  margin-top: ;
  margin-right: ;
  margin-bottom: ;
  margin-left: ;
  overflow: ;
  overflow-x: ;
  overflow-y: ;
  clip: ;
  clear: ;
  font: ;
  font-family: ;
  font-size: ;
  font-style: ;
  font-weight: ;
  src: ;
  line-height: ;
  letter-spacing: ;
  word-spacing: ;
  color: ;
  text-align: ;
  text-decoration: ;
  text-indent: ;
  text-overflow: ;
  text-rendering: ;
  text-shadow: ;
  text-transform: ;
  word-break: ;
  word-wrap: ;
  white-space: ;
  vertical-align: ;
  list-style: ;
  list-style-type: ;
  list-style-position: ;
  list-style-image: ;
  pointer-events: ;
  cursor: ;
  background: ;
  background-attachment: ;
  background-color: ;
  background-image: ;
  background-position: ;
  background-repeat: ;
  background-size: ;
  content: ;
  quotes: ;
  outline: ;
  outline-offset: ;
  opacity: ;
  filter: ;
  visibility: ;
  size: ;
  zoom: ;
  transform: ;
  box-shadow: ;
  box-sizing: ;
  table-layout: ;
  animation: ;
  animation-delay: ;
  animation-duration: ;
  animation-iteration-count: ;
  animation-name: ;
  animation-play-state: ;
  animation-timing-function: ;
  animation-fill-mode: ;
  transition: ;
  transition-delay: ;
  transition-duration: ;
  transition-property: ;
  transition-timing-function: ;
  background-clip: ;
  backface-visibility: ;
  resize: ;
  direction: ;
  page: ;
  unicode-bidi: ;
  align-content: ;
  align-items: ;
  align-self: ;
  alignment-baseline: ;
  all: ;
  animation-direction: ;
  background-blend-mode: ;
  background-origin: ;
  background-position-x: ;
  background-position-y: ;
  background-repeat-x: ;
  background-repeat-y: ;
  baseline-shift: ;
  border-image-outset: ;
  border-image-repeat: ;
  border-image-slice: ;
  border-image-source: ;
  border-image-width: ;
  buffered-rendering: ;
  caption-side: ;
  clip-path: ;
  clip-rule: ;
  color-interpolation: ;
  color-interpolation-filters: ;
  color-rendering: ;
  counter-increment: ;
  counter-reset: ;
  cx: ;
  cy: ;
  dominant-baseline: ;
  empty-cells: ;
  fill: ;
  fill-opacity: ;
  fill-rule: ;
  flex: ;
  flex-basis: ;
  flex-direction: ;
  flex-flow: ;
  flex-grow: ;
  flex-shrink: ;
  flex-wrap: ;
  flood-color: ;
  flood-opacity: ;
  font-feature-settings: ;
  font-kerning: ;
  font-stretch: ;
  font-variant: ;
  font-variant-ligatures: ;
  image-rendering: ;
  isolation: ;
  justify-content: ;
  lighting-color: ;
  marker: ;
  marker-end: ;
  marker-mid: ;
  marker-start: ;
  mask: ;
  mask-type: ;
  max-zoom: ;
  min-zoom: ;
  mix-blend-mode: ;
  motion: ;
  motion-offset: ;
  motion-path: ;
  motion-rotation: ;
  object-fit: ;
  object-position: ;
  order: ;
  orientation: ;
  orphans: ;
  outline-color: ;
  outline-style: ;
  outline-width: ;
  overflow-wrap: ;
  page-break-after: ;
  page-break-before: ;
  page-break-inside: ;
  paint-order: ;
  perspective: ;
  perspective-origin: ;
  r: ;
  rx: ;
  ry: ;
  shape-image-threshold: ;
  shape-margin: ;
  shape-outside: ;
  shape-rendering: ;
  speak: ;
  stop-color: ;
  stop-opacity: ;
  stroke: ;
  stroke-dasharray: ;
  stroke-dashoffset: ;
  stroke-linecap: ;
  stroke-linejoin: ;
  stroke-miterlimit: ;
  stroke-opacity: ;
  stroke-width: ;
  tab-size: ;
  text-align-last: ;
  text-anchor: ;
  text-combine-upright: ;
  text-orientation: ;
  touch-action: ;
  transform-origin: ;
  transform-style: ;
  unicode-range: ;
  user-zoom: ;
  vector-effect: ;
  webkit-app-region: ;
  webkit-appearance: ;
  webkit-background-clip: ;
  webkit-background-composite: ;
  webkit-background-origin: ;
  webkit-border-after: ;
  webkit-border-after-color: ;
  webkit-border-after-style: ;
  webkit-border-after-width: ;
  webkit-border-before: ;
  webkit-border-before-color: ;
  webkit-border-before-style: ;
  webkit-border-before-width: ;
  webkit-border-end: ;
  webkit-border-end-color: ;
  webkit-border-end-style: ;
  webkit-border-end-width: ;
  webkit-border-horizontal-spacing: ;
  webkit-border-image: ;
  webkit-border-start: ;
  webkit-border-start-color: ;
  webkit-border-start-style: ;
  webkit-border-start-width: ;
  webkit-border-vertical-spacing: ;
  webkit-box-align: ;
  webkit-box-decoration-break: ;
  webkit-box-direction: ;
  webkit-box-flex: ;
  webkit-box-flex-group: ;
  webkit-box-lines: ;
  webkit-box-ordinal-group: ;
  webkit-box-orient: ;
  webkit-box-pack: ;
  webkit-box-reflect: ;
  webkit-clip-path: ;
  webkit-column-break-after: ;
  webkit-column-break-before: ;
  webkit-column-break-inside: ;
  webkit-column-count: ;
  webkit-column-gap: ;
  webkit-column-rule: ;
  webkit-column-rule-color: ;
  webkit-column-rule-style: ;
  webkit-column-rule-width: ;
  webkit-column-span: ;
  webkit-column-width: ;
  webkit-columns: ;
  webkit-filter: ;
  webkit-font-size-delta: ;
  webkit-font-smoothing: ;
  webkit-highlight: ;
  webkit-hyphenate-character: ;
  webkit-line-break: ;
  webkit-line-clamp: ;
  webkit-locale: ;
  webkit-logical-height: ;
  webkit-logical-width: ;
  webkit-margin-after: ;
  webkit-margin-after-collapse: ;
  webkit-margin-before: ;
  webkit-margin-before-collapse: ;
  webkit-margin-bottom-collapse: ;
  webkit-margin-collapse: ;
  webkit-margin-end: ;
  webkit-margin-start: ;
  webkit-margin-top-collapse: ;
  webkit-mask: ;
  webkit-mask-box-image: ;
  webkit-mask-box-image-outset: ;
  webkit-mask-box-image-repeat: ;
  webkit-mask-box-image-slice: ;
  webkit-mask-box-image-source: ;
  webkit-mask-box-image-width: ;
  webkit-mask-clip: ;
  webkit-mask-composite: ;
  webkit-mask-image: ;
  webkit-mask-origin: ;
  webkit-mask-position: ;
  webkit-mask-position-x: ;
  webkit-mask-position-y: ;
  webkit-mask-repeat: ;
  webkit-mask-repeat-x: ;
  webkit-mask-repeat-y: ;
  webkit-mask-size: ;
  webkit-max-logical-height: ;
  webkit-max-logical-width: ;
  webkit-min-logical-height: ;
  webkit-min-logical-width: ;
  webkit-padding-after: ;
  webkit-padding-before: ;
  webkit-padding-end: ;
  webkit-padding-start: ;
  webkit-perspective-origin-x: ;
  webkit-perspective-origin-y: ;
  webkit-print-color-adjust: ;
  webkit-rtl-ordering: ;
  webkit-ruby-position: ;
  webkit-tap-highlight-color: ;
  webkit-text-combine: ;
  webkit-text-decorations-in-effect: ;
  webkit-text-emphasis: ;
  webkit-text-emphasis-color: ;
  webkit-text-emphasis-position: ;
  webkit-text-emphasis-style: ;
  webkit-text-fill-color: ;
  webkit-text-orientation: ;
  webkit-text-security: ;
  webkit-text-stroke: ;
  webkit-text-stroke-color: ;
  webkit-text-stroke-width: ;
  webkit-transform-origin-x: ;
  webkit-transform-origin-y: ;
  webkit-transform-origin-z: ;
  webkit-user-drag: ;
  webkit-user-modify: ;
  webkit-user-select: ;
  webkit-writing-mode: ;
  widows: ;
  will-change: ;
  writing-mode: ;
  x: ;
  y: ;
  css-text: ;
  length: ;
  parent-rule: ;
  css-float: ;
  item: ;
  get-property-value: ;
  get-property-priority: ;
  set-property: ;
  remove-property: ;
}
    

作者：韓雙力
鏈接：https://www.zhihu.com/question/31317160/answer/85833065
來源：知乎
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。