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

  • 相关阅读:
    Prime Cryptarithm
    Barn Repair
    Mixing Milk
    June Challenge 2017
    Dual Palindromes
    数学专题
    遗传算法学习
    UVA 11464 暴力+位运算 ***
    233
    hdu 3236 二维背包
  • 原文地址:https://www.cnblogs.com/Megasu/p/4499811.html
Copyright © 2011-2022 走看看