那些被忽视又常用的css属性(第一篇)

继承

inherit(覆盖另一个值,继承其父元素的值)
initial (重置其样式,恢复成默认值)

相对单位

em(基于特定的字号进行排版)
例如当前字号为16px,那么1em的大小就是为1*16px=16px,如果font-size设置em,则以body的字号去放大缩小
rem
rem是root em的缩写。rem不是相对于当前元素，而是相对于根元素的单位。1.2乘以根元素的字号
拿不准的时候，用rem设置字号，用px设置边框，用em设置其他大部分属性。
vh 视口高度
vw 视口宽度
自定义变量

:root{
	--变量名:值
}
p{
	font-size:var(--变量名)
}

<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: solid
 * @Date: 2022-06-16 18:14:59
 * @LastEditors: solid
 * @LastEditTime: 2022-06-16 18:23:11
-->
<!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>
</head>

<body>
    <div class="panel">
        <div class="white">alskdjaslkdjaskld</div>
    </div>
    <div style="height: 200px"></div>
    <div class="panel2">
        <div class="black">ssssss</div>
    </div>
</body>

</html>
<style>
    :root {
        --main-bg: red;
        --main-color: #eee;
    }

    .panel {
        width: 200px;
        height: 200px;
        background-color: aqua;
    }

    .white {
        width: 100px;
        height: 100px;
        background-color: var(--main-bg);
        color: var(--main-color);
    }

    .panel2 {
        --main-bg: #333;
        ---main-color: #fff;
        width: 200px;
        height: 200px;
        background-color: aqua;
    }

    .black {
        width: 100px;
        height: 100px;
        background-color: var(--main-bg);
        color: var(--main-color);

    }
</style>

盒模型

border-box(盒模型的box-sizing为border-box。在这个模型中，内边距不会让一个元素更宽，而是让内部的内容更窄。高度同理)

<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: solid
 * @Date: 2022-06-16 18:14:59
 * @LastEditors: solid
 * @LastEditTime: 2022-06-16 18:45:05
-->
<!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>
</head>

<body>
    <div class="content">
        <div class="main">asdsadsadas asdsadasd</div>
        <div class="sidebar"></div>
    </div>
    
</body>

</html>
<style>
    :root{
        box-sizing: border-box;
    }
    *,
    ::before,
    ::after{
        box-sizing: inherit;
    }
    .main{
        float: left;
        width: 70%;
        background-color: red;
        border: .5em;
    }
    .sidebar{
        float: left;
        width: 30%;
        padding: 1.5em;
        background-color: gold;
        border: .5em;
    }
</style>

display:table

完美等高

<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: solid
 * @Date: 2022-06-16 18:14:59
 * @LastEditors: solid
 * @LastEditTime: 2022-06-16 19:01:03
-->
<!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>
</head>

<body>
    <div class="wrapper">
        <div class="content">
            <div class="main">asdsadsadas asdsadasd</div>
            <div class="sidebar"></div>
        </div>
    </div>

</body>

</html>
<style>
    .wrapper {
        margin-left: -1.5em;
        margin-right: -1.5em;
    }

    .content {
        display: table;
        width: 100%;
        border-spacing: 1.5em 0;
    }

    .main {
        display: table-cell;
        width: 70%;
        background-color: red;
        border: .5em;
    }

    .sidebar {
        display: table-cell;
        width: calc(30% - 1.5em);
        margin-left: 1.5em;
        padding: 1.5em;
        background-color: gold;
        border: .5em;
    }
</style>

display:flex(它就变成了一个弹性容器（flex container），子元素默认等高。你可以给子元素设置宽度和外边距，尽管加起来可能超过100%, Flexbox也能妥善处理。)

布局

display:flex (该元素变成了一个弹性容器（flex container），它的直接子元素变成了弹性子元素（flexitem）。弹性子元素默认是在同一行按照从左到右的顺序并排排列。弹性容器像块元素一样填满可用宽度，但是弹性子元素不一定填满其弹性容器的宽度。弹性子元素高度相等，该高度由它们的内容决定。)

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/61513.html