CSS三大特性之继承性

现实中的继承:我们继承了父亲的姓

CSS中的继承:子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业

CSS三大特性之继承性

用浏览器调试工具可以看出继承的样式:

CSS三大特性之继承性

继承性注意点:

  • 恰当地使用继承可以简化代码,降低CSS样式的复杂性
  • 子元素可以继承父元素的样式(仅部分属性可继承,像text-,font-,line这些元素开头的可以继承,以及 color属性)

行高的继承

body {
    font: 12px/15px Microsoft yaHei;       /*12px为字号,15px为行高*/
}

当我们看到下面代码:

body {
    font: 12px/1.5 Microsoft yaHei; 
}
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高,则会继承父元素的行高为1.5
  • 此时子元素的行高是:当前子元素的文字大小*1.5
  • body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

举例:

CSS三大特性之继承性

版权声明:本文为本站原创文章,由37.2℃发表,转载请注明出处,保留一切权利!

转载请注明:转载于37.2度云笔记

发表评论

邮箱地址不会被公开。

微信