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