zoukankan      html  css  js  c++  java
  • 后端码农谈前端(CSS篇)第八课:继承与层叠

    一、继承

    继承:所谓CSS样式继承,就是子元素应用父元素的规则声明。(由这一特性,可将CSS属性分为可继承属性和非可继承属性。)
    可继承属性:属性值可由父元素继承给子元素的属性称之为可继承属性。

    哪些属性是可继承属性?

    1、文本样式属性

    text-indent、text-align、word-spacing、letter-spacing、text-transform、text-decoration、direction、white-space

    2、字体样式属性

    font、font-family、font-size、font-style、font-variant、font-weight

    3、列表样式属性

    list-style、list-style-image、list-style-position、list-style-type

    4、color属性

    注:这里特别解释:font-size属性(继承性比较特殊)    
    不同于有准确的值被继承,font-size继承的是计算的值。   

    例如:

    <!DOCTYPE html> 
    <html lang=“utf8>
        <head>
            <meta charset="utf-8">
            <title>Demo</title>
        </head>
        <body style="font-size:85%">
            body字体大小
            <h1 style="font-size:200%">h1字体大小</h1>
            <h2 style="font-size:150%">h2字体大小</h2>
            <p>p字体大小<em>em字体大小</em></p>
        </body>
    </html>
    元素 计算值
    default font-size 16px  
    <body> 85% 16px × 85% = 13.6px
    <h1> 200% 13.6px × 200% = 27.2px
    <h2> 150% 13.6px × 150% = 20.4px
    <p> unspecified 13.6px
    <em> unspecified 13.6px

    即:除非font-size值被重新赋值,否则就按照上一次的尺寸大小值继续.比如上图中设置body字体为默认字体(通常为16px=1em)的85%(13.6px),那么下面的字体均为13.6px.而不是继续继承85%,让13.6再次乘以85%。

    二、层叠

    层叠:所谓CSS样式层叠就是DOM元素应用样式表中的规则覆盖继承样式的过程。

  • 相关阅读:
    青山一别
    Spring Mvc Long类型精度丢失
    Spring 版MediatR--中介者模式实现库
    Spring 实现策略模式--自定义注解方式解耦if...else
    spring泛型注入
    Spring Boot Mvc 统一返回结果
    简化mapstruct代码: mapstruct-spring-plus
    .NET后端开发编码规范
    深度优先遍历(DFS)和广度优先遍历(BFS)的实现与简单应用
    将HTML字符串编译为虚拟DOM对象的基础实现
  • 原文地址:https://www.cnblogs.com/hanzhaoxin/p/4374235.html
Copyright © 2011-2022 走看看