[ CSS入门 (二） | 青训营笔记（3）]主要内容：1. 选择器的优先级 2.继承 3.初始值 4.布局有关的参数

对照着《深入解析CSS》整理了一下笔记

选择器的优先级

当使用两个选择器时，哪个优先的程度更高

<article>
  <h1 class="title">火山</h1>
</article>

<style>
  .title{      /*特异度更高*/
    color:blue;
  }

  article h1{
    color: red;
  }
</style>

根据选择器的特异度来判断优先级，特异度越高的优先级越高

判断选择器的优先度

优先级的准确规则：

如果选择器的ID数量更多，优先级更高
如果ID 数量一致，拥有最多类的选择器会胜出
ID数量和类选择器的数量都一致，拥有最多标签的选择器优先级更高（《深入解析CSS》）

例子：

	#	.	E
	id	(伪)类	标签
#nav .list li a:link	1	2	2
.hd ul.links a	0	2	2

注：伪类选择器（:hover)与属性选择器(如[type="input"])与一个类选择器的优先级相同通用选择器（*）和组合器(> + ~)对优先级没有影响

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
  .btn {
    display: inline-block;
    padding: .36em .8em;
    margin-right: .5em;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    border-radius: .3em;
    border: none;
    background: #e6e6e6;
    color: #333;
  }
  .btn.primary { /*优先级更高*/
    color: #fff;
    background: #218de6;
  }
</style>

被更高的选择器覆盖了怎么办？给想要实现的低优先级的选择器设置！important(可参考《深入解析CSS》P30)

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值

继承如何顺着DOM树传递

如果给body元素加上font-family,里面所有祖先元素都会继承这个字体，就不必给页面中的每个元素明确指定字体了

不是所有的属性都能被继承，通常是和文本有关的属性(color,family,font-size,font-weight)以及列表属性(list-style,border-collapse,border-spacing)

<p>This is a <em>test</em> of <strong>inherit</strong></p>

<style>
  body {
    font-size: 20px;
  }
  p {
    color: blue;
  }
  em {
    color: red;
  }
</style>

em元素为红色 strong元素没有设置颜色，其父元素p为蓝色，所以为蓝色

CSS中和文字有关的属性(color,font-size)可以继承，和模型有关的属性(比如宽度)一般不能继承

显示继承

想用继承代替一个层叠值，可以用inherit关键字

* {
  box-sizing: inherit; /*通过通配选择器使所有元素的box-sizing默认从父元素继承*/
}

html {
  box-sizing: border-box;
}

.some-widget {
  box-sizing:content-box;
}

初始值

撤销作用于某个元素的样式，可以用initial关键字来实现

css中每个属性都有一个初始值
- background-color 的初始值为 transparent
- margin-left 的初始值为 0
可以使用 initial 关键字显示重置为初始值
- background-color: initial 效果相当于 background-color: transparent

initial的实际应用：

在大多数浏览器中，黑色是color属性的初始值 color:initial等价于color:black
删除一个边框——border:initial
恢复到默认宽度——width:initial (和width:auto是一样的)
display:initial等价于display:inline

布局

width

指定 content box 宽度
取值为长度、百分数、auto + auto 由浏览器根据其他属性确定 + 百分数相对于容器的 content box 宽度

height

指定 content box 高度
取值为长度、百分数、auto + auto 取值由内容计算得来 + 百分数相对于容器的 content box 高度 + 容器有指定的高度时，百分数才生效

padding

指定元素四个方向的内边距
百分数相对于容器宽度

border

指定容器边框样式、粗细和颜色
- 样式有 none solid dotted dashed
三种属性：border-width border-style border-color
四个方向：border-top border-right border-bottom border-left

margin

指定元素四个方向的外边距
取值可以是长度、百分数、auto
百分数相对于容器宽度

使用margin:auto 使水平居中

<div></div>

<style>
  div {
    width: 200px;
    height: 200px;
    background: coral;
    margin-left: auto; /*左右都auto*/
    margin-right: auto;
  }
</style>

margin collapse

<div class="a"></div>
<div class="b"></div>

<style>
  .a {
    background: lightblue;
    height: 100px;
    margin-bottom: 100px;
  }

  .b {
    background: coral;
    height: 100px;
    margin-top: 100px;
  }
</style>

间距是100，不是200

box-sizng:border box

border-box包含了content、padding、border在内

 <p class="a">
  This is the behavior of width and height as specified by CSS2.1. The
  specified width and height (and respective min/max properties) apply to
  the width and height respectively of the content box of the element.
</p>
<p class="b">
  Length and percentages values for width and height (and respective min/max
  properties) on this element determine the border box of the element.
</p>

<style>
  html {
    font-size: 24px;
  }

  .a {
    width: 100%;  /*content的宽度是100%,border-box更大*/
    padding: 1em;
    border: 3px solid #ccc;
  }

  .b {
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
    border: 3px solid #ccc;
  }
</style>

溢出内容的控制

通过overflow属性控制溢出部分的格式: visible hidden scroll

[ CSS入门 (二） | 青训营笔记 （3）]