zoukankan      html  css  js  c++  java
  • CSS中inherit指定继承的使用方法和auto的区别

    CSS中的每个属性都有一个特定值"inherit",其含义是指定继承父元素的相应属性,使用inherit一方面在代码上能地表明要继承于父元素的样式属性,另一方面也使子元素继承了那些不会被自动继承的属性.

    也就是说:

    inherit是继承父类的属性,一般用于字体、颜色等
    auto是按情况自适应,一般用于高度、宽度、外边距和内边距等关于长度的属性

    假如设计者要使class为box的div元素有2px的黑色边框,且具有5px的填充,同时想让其子div元素也具有同样的样式,

    则可以编写如下规则:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
      <style>
        /* 使子元素继承了那些不会被自动继承的属性 */
        .box{
          border:2px solid black;
          padding:5px;
          background:#ccc;
          height:100px;
        }
        .box div{
          /* 使用inherit能继承父级的属性,和auto不一样 */
          border:inherit;
          padding:inherit;
          height:auto;
        }
      </style>
    </head>
    <body>
      <div class='box'><div>儿子</div>    
      </div>
    </body>
    </html>

    线上调试:inherit 和 auto 区别

    http://jsbin.com/fuwiyo/3/edit?html,output

  • 相关阅读:
    usaco-4.1-nuggets-passed
    usaco-3.4-rockers-passed
    usaco-3.4-fence9-passed
    usaco-3.4-heritage-passed
    usaco-3.3-game1-passed
    usaco-3.3-range-passed
    usaco-3.3-camelot-passed
    6.23课堂作业
    初识JVM虚拟机
    JDK安装以及配置环境变量的步骤
  • 原文地址:https://www.cnblogs.com/Megasu/p/4499811.html
Copyright © 2011-2022 走看看