了解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
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。