1.选择器权重计算

代码演示

/* 1.标签选择器，权重为（0,0,1），当有新的标签增加时会在个位递增，变为（0,0,2） */
p {
    color: red;
}
/* 2.class选择器，权重为（0,1，0），当有新的类选择器增加时会在十位递增，变为（0,2,0） */
.title {
    color: purple;
}
/* 3.id选择器，权重为（1,0，0），当有新的类选择器增加时会在百位递增，变为（2,0,0） */
#title {
    color: blue;
}
/* 4.增加权重，此时权重变为（0,1,1） */
.box p{
    color: lightcoral;
}

效果演示

选择器权重计算

2.盒模型常用属性

代码演示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型常用属性</title>
    <style>
        .box {
            width: 150px;
            height: 100px;
            /* 1.padding:内边距 */
            /* padding属性值由上顺时针赋予，分别为上，右，下，左。左=右，上!=下 */
            /* 一值写法，上下左右全相等 */
            /* padding: 30px; */
            /* 二值写法 */
            /* padding: 50px 30px; */
            /* 三值写法,分别是上，左右，下 */
            /* padding: 20px 30px 40px; */
            /* 四值写法：上，右，下，左 */
            padding: 10px 20px 15px 10px;
            /* 2.border：边框 */
            /* border属性由三个值决定，分别是：边框大小，颜色，边框种类，其中边框颜色可以不写默认为黑色 */
            border: 3px solid black;
        }
    </style>
</head>
<body>
    <div class="box">PHP中文网</div>
</body>
</html>

效果演示

盒模型常用属性

3.盒大小计算方式

盒大小计算方式：宽度计算是：内容宽度+左右padding+左右border 高度计算是：内容高度+上下padding+上下border

例如
盒大小计算方式

4.css常用单位

em

1em=16px,从内到外，根据相邻的元素决定

rem

1rem=1em=16px，根据根元素的自号决定

vw和vh

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
            width: 100vw;
            height: 100vh;
        }
        body > * {
            background-color: pink;
            outline: 1px solid;
        }
        header,footer {
            width: 100vw;
            height: 5vh;
        }
        main {
            background-color: aqua;
            width: 100vw;
            min-height: calc(100vh - 5vh - 5vh - 3px - 3px);
            margin: 3px 0;
        }
    </style>
</head>
<body>
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>
</body>
</html>