CSS三大特性

最新推荐文章于 2022-07-24 15:29:42 发布

lq1224825

最新推荐文章于 2022-07-24 15:29:42 发布

阅读量2.2k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/l954758514/article/details/75330483

版权

1.继承

子代可以直接使用父代的某些样式（特征），当然有些可以继承，有些不能继承。

例：

结果为：div2同样继承了div1的样式。

div2虽然没有设定这样的样式，但是实际上却使用了该样式。说明它的样式从它的父代div1那里继承而来。

但是并不是所有的属性都可以被继承

<styletype="text/css">
    #div1{
        font-size: 24px;
        color: red;
        border: 2px solid red;
    }
</style>

从结果反应出来，div2并没有边框，也就是说border没有被继承，可以进一步通过开发者工具来佐证

哪些属性能被继承？哪些属性不能被继承？

不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、
min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、
vertical-align、page-break-after、page-bread-before和unicode-bidi。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。 
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

2.层叠性

例：

<styletype="text/css">
        div{
            background-color: red;
        }
        .zz{
            width: 50px;
            height: 50px;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <divclass="zz"></div>
</body>

结果：