css3基础知识01-来自深入解析CSS

从这里开始
90 阅读3分钟

CSS基础特性

继承和层叠

  1. 特殊值
    • inherit
      1. 用继承的属性值代替一个层叠值
      2. 可以强制继承一些不会被继承的属性
    • initial
      1. 用于需要撤销作用于某个元素的样式, 可以使用initial来实现，相当于硬复位值得效果, 像display不管哪种类型得元素都不会等于display:block
  2. 简写属性
  • font => font-style font-weight font-size line-height font-family background border
  1. 省略属性
    1. padding/margin
    2. background-position
    3. box-shadow
    4. text-shadow
  2. 在css中, 1em等于当前元素的字号, 准确值取决于当前的元素， 浏览器会根据当前的相对单位计算出绝对值
    1. em同事用于字号和其他属性，em的复杂之处在于同时用它指定一个元素的字号和其他属性。这时, 浏览器必选先计算字号, 然后使用这个计算值计算出其他的属性值
    2. em在字号进行多级嵌套的时候，字体缩小会发生字体缩小的现象，因此em一般用在内边距，外边距以及元素的大小上,对于字体的嵌套一般不太使用，我们一般使用rem.
    3. 相比em,rem降低了复杂性，实际上, rem结合了px和em的优点, 既保留了相对单位的优势, 又简单易用。
    4. 在css中，我们一般会使用rem设置字号，使用px设置边框，使用em设置其他大部分属性,尤其是内边距，外边距和圆角, 嵌套的继承方式仍然可以使用em作为继承自父级的大小，这样我们在设置响应式的时候只需要设置跟的字体大小即可
    5. vw相对视口单位有一个特别的用途就是设置字号，这样做的好处就是元素能够在两种大小直接平滑的切换过渡,这意味着不会再某个断点之间突然改变，当视口大小改变时，元素会逐渐过渡
    6. calc函数内可以对值进行基本计算, 当结合不同单位的值是，calc就特别使用(+-x/) 
         :root {
     font-size: calc(0.5em + 1vw)
   }
      0.5em确保了最小字体，和vw确保了字体随着视口缩放，这段代码保证了iphone6里的11.75px一直过渡到1200px的浏览器窗口里的20px, 可以按照自己喜好调整这个值, 这样我们不用使用媒体查询就可以实现大部分的响应式策略，节省硬编码的断点，网页上的内容也可以根据视口流畅缩放
    7. 使用无单位的行高可以解决不同的怪异问题，行高具有继承性. 
         body {
     line-height: 1.2
   }
   <!-- 计算出p元素的行高为 2 * 16 * 1.2 = 28.4, 可以解决每行文字之间都会有一个合理的区间值 -->
   p {
     font-size: 2em
   }
    8. css中层叠变量的自定义属性=> 动态样式,可以声明一个变量,然后再其他地方引用, 新规范中的css变量，本质区别就是要比任何一款预处理器的变量都要多, 要定义一个自定义属性, 只需要像css那么直接声明即可--xxx, 再内部使用var()函数进行计算，当我们使用非法值的时候, 属性值会赋值为默认值
    9. 自定义属性不仅减少了代码重复性的问题, 而且最大的意义在于，自定义属性的声明能够层叠和继承: 可以再多个选择器中定义相同的变量, 这个变量在网页的不同地方有不同的值。我们可以宰割域中对变量就行重新定义，这样自定义变量就像作用域变量一样，值会被后代进行继承
       const rootElement = document.documentElement;
   const styles = getComputedStyle(rootElement)
   const mainColor = styles.getComputedStyle('--main-color') // 获取当前的自定义属性值
   rootElement.style.setProprety('--main-color', '#0ff') // 可以将设置自定义属性值

    • 通过上述的技术，我们就可以用javascript切换网站主题，或者在网页突出显示某些元素, 或者实时改变任意多个元素

avatar
文章
阅读
粉丝