CSS查漏补缺

• 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'的左上角重合

• 盒模型与视觉格式化模型

  • 盒模型与视觉格式化模型
• 待续...