CSS注意事项（一）

2019独角兽企业重金招聘Python工程师标准>>>

层叠的概念

层叠规则重点：自上而下，相同属性：一般后面的覆盖前面的，优先级高的覆盖优先级低的 
层叠是CSS的核心机制，理解了它才能以最经济的方式写出最容易改动的CSS， 
让文档外观在达到设计要求的同时，也给用户留下一些空间，让他们根据需要更改文档的显示效果， 
例如调整字号。

样式来源

• 1.浏览器默认样式表
• 2.用户样式表
• 3.link引用的css文件
• 4.<style>标签内部编写的样式代码
• 5.标签中直接添加的 style=“”样式代码

局部小结：浏览器最终呈现的样式来源

 

浏览器获取所有来源的样式，然后进行叠加和覆盖生成最终样式
浏览器会把零散的整合。让后者覆盖前者，但！important具有特权

 

浏览器默认样式

• 1.网页加载过程理解（职责单一，开放）：

  • 浏览器加载HTML仅仅生成DOM树结构，完成对html的结构化
  • 接下来通过css进行视图渲染 整合css包含了浏览器默认样式和开发者所编写的样式

• 2.block元素

  浏览器的默认样式规定了：·div/ p/ h1/ 等display 为block ,未设置block的元素默认为 inline显示

• 3.display : list-item

  display的属性值一般是:inline/block/inline-block， 但list-item可以是元素以列表的形式表现，这也是ul li的本质

• 4.display : table

  div宽度和父容器相同，但table宽度根据内容而定，即table具有包裹性 
  包裹性容器常用在需要根据内容自适应宽度的地方

• 5.display: table-cell

  传统模式下使用float进行多列布局 但其代码复杂宽度不灵活 浏览器兼容性不好 
  table-cell新方案：给div加上display:table-cell来进行自适应宽度的多列布局(注意：IE6/IE7不兼容)

• 6.body样式

  各个浏览器的body默认margin值不同，解决该兼容问题采用*{margin:0}进行处理 
  *选择器优先级较低在遇到标签时都不起作用，但浏览器已对次做了处理使得其覆盖body的margin属性 
  另外注意：还有一个默认属性 line-height:为满足系统扩展和软件设计需求 
  最好使用相对值 如line-height:1.5即为永远按照文字大小的1.5倍计算行高

• 7.使用em还是px

  推荐使用em因为px固定大小 不利于扩展 
  em不是绝对的、固定的 但在浏览器默认情况下 1em===16px 
  采用em尤其是margin等的优势在于当浏览器的em被修改时，margin一样会随之变动，与字体大小有关的css请使用em表示。

• 8.粗体和斜体

  在浏览器中默认为粗体的有 
  hx 和 strong 
  在浏览器中默认为斜体的有 
  blockquore 
  i cite em var address

• 9.inline-block

  既能设定高宽 不会占据一行

转载于:https://my.oschina.net/u/2882840/blog/738732