2021-04-05 web前端CSS之权重，盒子边框内外边距

最新推荐文章于 2022-05-01 06:00:00 发布

小六Noomi

最新推荐文章于 2022-05-01 06:00:00 发布

阅读量258

点赞数

分类专栏： web学习日记文章标签： css css3 html5 html 前端

本文链接：https://blog.youkuaiyun.com/qq_44837911/article/details/115440163

版权

本文详细介绍了CSS中的权重计算，包括层叠性和优先级。同时深入探讨了盒子模型，包括边框、内边距和外边距的设置及其对布局的影响。重点讲解了如何通过调整内外边距实现网页元素的布局和居中对齐，并提到了内外边距的合并与塌陷问题以及清除内外边距的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

视频学习：黑马程序员pink老师

笔记：层叠性
相同选择器给设置相同的样式——如果样式冲突，就近原则
样式不冲突，不会层叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS层叠性</title>
    <style>
       div {
   
           color: red;
           font-size: 12px;
       }
       div {
   
           color: pink;
       }
    </style>
</head>
<body>
    <div>长江后浪推前浪,前浪死在沙滩上</div>
</body>
</html>

笔记：继承性
子标签会继承父标签的某些样式
（文字样式，颜色样式可以宽高边距不能继承）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS继承性</title>
    <style>
        div {
   
            color: pink;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div>
        <p>龙生龙，凤生凤，老鼠生的孩子会打洞</p>
    </div>
</body>
</html>

笔记：行高的继承
行高可以跟单位，也可以不跟单位
不跟单位：当前元素文字大小的倍数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行高的继承</title>
    <style>
        body {
   
            color: pink;
            /* font: 12px/24px 'Microsoft YaHei'; */
            font: 12px/1.5 'Microsoft YaHei';
        }
        div {
   
            /* 子元素继承了父元素 body 的行高 1.5 */
            /* 这个1.5 就是当前元素文字大小 font-size 的1.5倍   所以当前div 的行高就是21像素 */
            font-size: 14px; 
        }
        p {
   
            /* 1.5 * 16 =  24 当前的行高 */
            font-size: 16px;
        }
        /* li 么有手动指定文字大小  则会继承父亲的 文字大小  body 12px 所以 li 的文字大小为 12px 
        
        当前li 的行高就是  12 * 1.5  =  18
        */
    </style>
</head>
<body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>
</html>

笔记：优先级
选择器相同，则执行层叠性
选择器不同，根据权重

继承或者*<元素选择器<类选择器，伪类选择器<ID选择器<行内样式 style=""<important

继承的权重是0，就先看有没有直接被选出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS优先级</title>
    <style>
       
        .test {
   
            color: red;
        }
        div {
   
            color: pink!important;
        }
        #demo {
   
            color: green;
        }
    </style>
</head>
<body>
    <div class="test" id="demo" style="color: purple">你笑起来真好看</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css权重注意点</title>
    <style>
        /* 父亲的权重是 100  */
        #father {
   
            color: red!important;
        }
        /* p继承的权重为 0 */
        /* 所以以后我们看标签到底执行那个样式,就先看这个标签有么有直接被选出来 */
        p {
   
            color

最低0.47元/天解锁文章