CSS 知识点（基础篇）【CSS-Plan】

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

截屏2022-05-27 上午10.32.38.png

1. css流体概念

将窗口自下而上分成一行一行，应在每行中按从左至右的依次排放元素，即为文档流

2. 盒模型

2.1 两种盒模型

<!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>
<style>
    .content {
        width: 200px;
        height: 200px;
        /* 外边距 上右下左 */
        margin: 10px 20px 30px 40px;
        /* 内边距 上右下左 */
        padding: 10px 20px 30px 40px;
        background-color: bisque;
        border: 5px solid rgb(136, 218, 233);
    }
</style>
<body>
    <div class="content">这个是内容</div>
</body>
</html>

截屏2022-05-16 下午8.29.47.png

2.2 设置box-sizing

 box-sizing: border-box;

截屏2022-05-16 下午8.32.40.png

代码里面设置的width就是我们的内容的宽度。

 box-sizing: content-box;

截屏2022-05-16 下午8.33.47.png

代码里面设置的width=内容+padding+padding+border

3. 元素和基本尺寸

3.1 宽高

height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

3.2 边距

3.2.1 外边距 margin

margin的值有三种类型：

auto	设置浏览器边距。这样做的结果会依赖于浏览器
length	定义一个固定的margin（使用像素，pt，em等）
%	定义一个使用百分比的边距

Remark Margin可以使用负值，重叠的内容。

auto

<style>
    .content {
        width: 200px;
        height: 200px;
        /* 外边距 上右下左 */
        /* margin: 10px; */
        margin: auto;
        /* margin: 20%; */
        background-color: bisque;
    }
</style>
<body>
    <div class="content">这个是内容</div>
</body>

截屏2022-05-16 下午8.49.35.png

length

    margin: 10px;

截屏2022-05-16 下午8.56.23.png

%百分比

    margin: 30%;

截屏2022-05-16 下午9.01.35.png

负值 margin

    margin: -2%;

截屏2022-05-16 下午9.03.13.png

3.2.2 内边距 padding（填充）

值	说明
length	定义一个固定的填充(像素, pt, em,等)
%	使用百分比值定义一个填充

4. 选择器

4.1 种类

id选择器&class选择器 id > class 权重

<style>
    #one_div {
        background-color: burlywood;
    }

    .warp {
        background-color: rgb(75, 52, 23);
    }
</style>
<body>
    <div class="warp" id="one_div">
        <p class="one_p">warp下面的直属p标签</p>
        <span class="one_span">
            warp下面的span
            <p class="two_p">warp下面的span下面的p标签</p>
        </span>
    </div>
</body>

截屏2022-05-17 下午4.03.36.png

分组嵌套选择器

p,span {
        background-color: cornflowerblue;
    }

截屏2022-05-17 下午4.02.58.png

组合选择器在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)

指定B选择的元素是A选择的元素的后代，但不一定是直接子代。

.warp p {
        background-color: rgb(69, 219, 224);
    }

截屏2022-05-17 下午4.04.32.png

子元素选择器(以大于 > 号分隔）

指定B选择的元素是A选择的元素的直接子元素。

.warp > p {
        background-color: rgb(69, 219, 224);
    }

截屏2022-05-17 下午4.01.52.png 3. 相邻兄弟选择器（以加号 + 分隔）

指定A和B选择的元素具有相同的父元素，并且B选择的元素在水平方向上紧随A选择的元素。

p+span {
        background-color: rgb(69, 219, 224);
    }

截屏2022-05-17 下午4.07.50.png 4. 普通兄弟选择器（以波浪号～分隔）

指定由A和B选择的元素共享相同的父元素，并指定A选择的元素在B选择的元素之前（但不一定紧接在B之前）。

<style>
    .one_p~p {
        background-color: rgb(69, 219, 224);
    }
</style>
<body>
    <div class="warp" id="one_div">
        <p class="one_p">warp下面的直属p标签</p>
        <span class="one_span">
            warp下面的span
            <p class="two_p">warp下面的span下面的p标签</p>
        </span>
        <p>hhhhhh</p>
    </div>
</body>

截屏2022-05-17 下午4.10.05.png

4.2 优先级

优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。

当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

1. 行内样式（style="…"）> 
2. ID 选择器(#box{…}) > 
3. 类选择器(.con{…}) > 
4. 标签选择器(div{…}) > 
5. 通用选择器(*{…})

这篇只是大概整理了一些css知识点，在之后的文章中将深入具体的css特性进行实践总结。

CSS 知识点（基础篇） 【CSS-Plan】