CSS基础

CSS单位

绝对单位

• 绝对单位的大小是固定的，基本上不会用于开发。

相对单位

• 相对单位的大小是不固定的，一般是相对于其他单位而言。

  • px（像素）

    • 指一张图片中最小的点，或者计算机屏幕中最小的点。

      • 如果一台计算机的屏幕分辨率是800*600，那么它的屏幕宽800个像素，高600个像素。
      • 因为屏幕分辨率不同，1px的大小也不同，所以px也可以看成是相对单位。

  • %（百分比）

    • width、height、font-size的百分比是相对于父元素相同属性来计算的。

      • 一个例子是，如果父元素的width是100px，那么如果设置子元素的width是50%，实际上子元素的width是50px。

    • line-height的百分比是相对于当前元素的font-size值来计算的。

    • vertical-align的百分比是相对于当前元素的line-height来计算的。

  • em（1em等于当前元素字体大小）

    • em是相对于当前元素字体大小来计算的，这里的字体大小就是以px为单位的font-size值。

      • 一个例子是，当前元素字体大小是10px，那么1em就等于10px。
      • 如果当前元素的font-size没有定义，那么会继承父元素的font-size。
      • 如果所有祖先元素都没有定义，那么会使用浏览器默认font-size。（所有浏览器中默认font-size值都是16px）。

  • rem（1rem等于根元素字体大小）

    • rem是根据根元素（html元素）字体大小来计算的。（CSS3新增）。

CSS特性

继承性

• CSS继承性是指子元素继承了父元素的某些样式属性。

  • 并不是所有属性都具有继承性，比如padding、margin、border就不具有继承性。

    • 可以通过对不继承的元素设置inherit属性值，强制进行继承。

层叠性

• CSS的层叠性指的就是样式的覆盖。

  • 当CSS选择器优先级相同时，后定义的样式会覆盖先定义的样式。
  • 当选择器优先级不同时，选择优先级更高的。

CSS优先级

当对同一个元素的同一个属性设置多个样式时，就会发生样式冲突。

• 有5种样式覆盖产生的冲突

  • 引用方式冲突

    • 在3种样式引用方式上，行内样式 > 内部样式 == 外部样式。

      • 一个例子是，当行内样式、内部样式、外部样式设置了不同的样式，那么最终样式显示行内样式。

  • 继承方式冲突

    • 当继承样式发生冲突，优先级最高的是最近的祖先元素的样式。

      • 一个例子是，当多个祖先元素都规定了color属性，那么最终元素的color属性由最近的祖先元素的color属性决定。

  • 指定样式冲突

    • 当利用多个选择器设定了样式，那么优先级高的选择器决定样式。

  • 继承样式和指定样式冲突

    • 一律由指定样式决定。

  • !important

    • 如果一个样式使用!imortant来声明，那么这个样式优先级最高。

      • 一个例子是，color: black !important;

CSS群组选择器

后代选择器

• M N{}表示选中M元素的后代中的N元素。

子代选择器

• M > N{}表示选中M元素的子元素中的N元素，只包含子元素，其他后代元素如子元素的子元素不包含。

兄弟选择器

• M~N{}表示选中M元素后面的N兄弟元素，N是和M平级的兄弟元素。

相邻选择器

• M+N{}表示选中M元素后面相邻的一个兄弟选择器。

XMind: ZEN - Trial Version