前端入门篇(十五)继承原则

继承原则:内层也会有外层的样式,即子层继承父层样式
前提:嵌套的标签
1.只有文本相关的样式才能被继承
2.块级元素的宽若不设置,则会继承(最接近的)父类元素的宽度,高度不被继承,由内容决定

1.只有文本相关的样式才能被继承
css文件:

.txt {
    color: red;
    border:1px solid black;
}

html文件:

<body>
    <div>div1
        <div class="txt">div2
            <p>p1p>
        div>
        <p>p2p>
    div>
    
body>

效果:div2,p2都是红色字,div2有边框,p2没有
前端入门篇(十五)继承原则_第1张图片
p2有边框时是这样子的:说明边框没有继承,只有文本上的样式被继承了
前端入门篇(十五)继承原则_第2张图片
2.块级元素的宽度若不设置,则会继承父级元素的宽
css文件:

.txt {
    width: 200px;
    height: 100px;
    background-color: red;
    
}

p {
    border: 1px solid black;
}

html文件:

<body>
    <div class="txt">div1
        <div>div2
            <p>p1p>
        div>
        <p>p2p>
    div>
    
body>

效果:宽都是指定的200px,高度不以父级元素为准,根据内容自动调整高度
前端入门篇(十五)继承原则_第3张图片

你可能感兴趣的:(前端入门,css3)