css样式优先级

• !important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
• 在学习过程中，你可能发现给选择器加权值的说法，即 ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。这种说法其实是有问题的。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 > 100，应该应用前者的样式，然而事实是应用后者的样式。错误的原因是：

  选择器的权值不能进位。还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过 100， 你可以理解为 99.99，所以最终应用后者样式。

CSS文本

• text-indent

  • 无法将该属性应用于行内元素以及图像之类的替换元素上
  • 该属性可以继承

• text-transform

  • 可以处理文本的大小写
  • 小写/大写/首字母大写

white-space

• 设置如何处理元素内的空白(空格、换行和 tab 字符)
  

  

word-break

• 规定自动换行的处理方法

  

word-wrap

• 规定长单词或 URL 地址换行到下一行的规则

  

CSS 背景

• background-color ：默认为transparent，而不是白色,这样其祖先元素的背景才能可见

• background-origin ：规定 background-position 属性相对于什么位置来定位，默认为padding-box

  • border-box：左上角为外边框的左上角
  • padding-box：左上角为内边框的左上角，即padding-box的左上角
  • content-box：左上角为padding内边距的左上角

    

• background-position

  • 有background-image属性时才有效，可以改变图像在背景中的位置，
  • 默认在左上角位置（top left; 0% 0%; 0px 0px），下面涉及到的左上角，左边等要考虑background-origin 属性的值而定

  • 关键字设置值

    • 位置关键字可以按任何顺序出现(因为关键字可以直接辨别方向)，只要保证不超过两个关键字，一个对应水平方向(left或'right或center)，另一个对应垂直方向(top或'bottom或center)；
    • 如果只出现一个关键字，则认为另一个关键字是 center。

  • 百分数设置值

    • 百分数值前一个对应水平方向，后一个对应垂直方向，若只有一个则这个对应水平方向，另一个为50%
    • 百分数值同时应用于元素和图像，图像位于 0% 0%，其左上角将放在元素左上角;图像位于 50% 50%，其中心点将与元素的中心点对齐；图像位于 100% 100%，其右下角将放在元素的右下角
    • 水平方向的0%是图像的左边界与元素的左边对齐，100%是图像的右边界与元素的右边对齐；垂直方向的0%是图像的上边界与元素的上边对齐，100%是图像的下边界与元素的下边对齐；

  • 长度值设置值

    • 长度值解释的是元素左上角的偏移，偏移点是图像的左上角，仅应用于图像
    • 图像的左上角与 background-position 声明中指定的点对齐，即0px 0px图像的左上角位于元素的左上角
    • 可以混合使用百分数值和长度值，当志愿一个长度值时它对应水平方向，垂直方向将为50%

• background-attachment

  • 声明背景图像相对于可视区是固定(fixed)还是滚动(scroll)的

• background-size

  • 在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
  • 第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为 "auto"。

  • 百分比设置值

    • 以父元素的宽高的百分比来设置背景图像的宽度和高度

  • 长度值设置值

    • 直接设置背景图像的高度和宽度

  • 关键字设置值

    • cover：把背景图像扩展或缩小，以使背景图像能够完全覆盖背景区域，所以背景图像的某些部分可能无法显示在背景区域中。
    • contain：把图像图像扩展或缩小，以使其宽度和高度完全适应内容区域，背景区域可能会有空白

• background-clip

  • 规定背景的绘制区域，可以裁剪背景到指定区域,默认为border-box
  • border-box：背景图像在 border-box内的部分才会显示
  • padding-box：背景图像在 padding-box内的部分才会显示
  • content-box：背景图像在 content-box内的部分才会显示

box-shadow

• box-shadow: h-shadow v-shadow blur spread color inset;
• h-shadow v-shadow为必须的，是阴影的位置，正常情况下阴影的左上角相对于元素的'padding-box'的左上角偏移，但是当设置了inset变为内阴影后，阴影成为一个环，内环的左上角相对于元素的'padding-box'的左上角偏移，而外环的左上角与元素的'padding-box'的左上角重合

  

盒模型与视觉格式化模型