抱着熊喵啃什么
抱着熊喵啃什么

CSS基础理解（二）

一、 em、rem、vm、vw 分别如何计算尺寸的？

em：相对于父元素的font-size属性值来计算的，如果父元素为14px，那么2em=28px；
rem：相对于根元素的font-size属性值来计算的，一般浏览器默认字体大小为16px，那么2rem=32px；
vh和vw相对于视口的高度和宽度，1vh 等于1%的视口高度，1vw 等于1%视口宽度

二、 颜色相关属性

  1. 颜色的几种写法
  • 颜色关键字（color: white;）；
  • 十六进制（background-color: #e0b0ff;）；
  • rgb(224, 176, 255)；//rgb分别表示red green blue比例
  • hsl(276, 100%, 85%)；
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360 
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
  1. 透明色表示
    注：设置透明色只针对背景颜色生效，对文本及其他元素效果并不生效。
  • background-color:transparent 完全透明
  • rgba(255,255,255,0.5) a表示Alpha透明度
  • hsla(276, 100%, 85%,0.5)； a表示Alpha透明度
  1. 透明效果的实现
  • opacity 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。






本元素的不透明度是 0.5。请注意，文本和背景色都受到不透明级别的影响。
CSS基础理解（二）_第1张图片
image.png
  • color: transparent
    不建议使用该方法
  1. currentColor属性
    currentColor关键字代表原始的 color 属性的计算值。
    它允许让继承自属性或子元素的属性颜色属性以默认值不再继承。
    它也能用于那些继承了元素的 color 属性计算值的属性，相当于在这些元素上使用 inherit 关键字，如果这些元素有该关键字的话。



  
  
  JS Bin



 The color of this text is the same as the one of the line:
  

 Some more text.
CSS基础理解（二）_第2张图片
image.png

三、calc元素

calc()是css3的一个新增的功能，用来指定元素的动态长度。
calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

calc()的运算规则
calc()使用通用的数学运算规则，但是也提供更智能的功能：

  • 使用“+”、“-”、“*” 和 “/”四则运算；
  • 可以使用百分比、px、em、rem等单位；
  • 可以混合使用各种单位进行计算；
  • 表达式中有“+”和“-”时，其前后必须要有空格，如"width: calc(12%-5em)"这种没有空格的写法是错误的，浏览器会认为是一个无效的表达式，解析成为一个长度后跟一个加号再跟一个负百分比。
  • 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

演示项目

四、CSS选择器权重

  • 权重决定了哪一条规则会被浏览器应用在元素上。
  • 权重的不同，是你所期望的效果，没有通过css规则在元素上生效的主要原因。
  • 权重的级别划分时包含了所有的css选择器
  • 如果两个选择器作用在同一元素上，则权重高者生效。
  • 权重的级别根据选择器被划分为四个分类：行内样式，id，类与属性，以及元素。
  • 如果两个选择器权重值相同，则最后定义的规则被计算到权重中(后面定度的CSS规则权重要更大，会取代前面的CSS规则)
  • 如果两个选择器权重值不同，则权重大的规则被计算到权重中
  • 如果一条规则包含了更高权重的选择器，那么这个规则权重更高
  • 最后定义的规则会覆盖所有跟前面冲突的规则
  • 内联样式表含有比别的规则更高的权重
  • Id选择器的权重比属性选择器更高
  • 你可以使用id来增大权重
  • 类选择器比任意数量的元素选择器都高
  • 通配符选择器跟继承来的样式，他们的权重以 0，0，0，0来计算
  • 你可以用css权重计算器来计算权重。
分数 条件
1000 + 1 / 在 style 属性内或在