这是我参与「第四届青训营 」笔记创作活动的的第2天

使用CSS的三种方式

• 外链

<link rel="stylesheet" href="./style.css">

• 嵌入

<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        display: flex;
        width: 100vw;
        height: 100vh;
    }
</style>

• 内联

<div style="color: red;"></div>

最推荐使用第一种

选择器

属性选择器：[属性名]{} --选中有该属性的标签，也能指定某种标签,还能对属性值进行匹配

[disabled]{
    color:red
}
input[disabled]{
    color:red
}
a[href^='#']{//选中以“#”开头的a标签
    color:red
}

选择器组合

如果想同时选中多个选择器可以用“，”隔开

选择器优先级：

越特殊的选择器优先级越高

!important>内联 > ID选择器 > 类选择器 > 标签选择器

布局

• 常规流：行级，块级，表格布局，FlexBox布局，Grid布局
• 浮动
• 绝对定位

盒子模型

盒子包括：content，padding，margin，border

盒子模型分为标准盒模型和ie盒模型（默认标准盒模型），他们最大的区别是：标准盒模型的width和height只是表示content，而ie盒模型的width和height则包括content，padding和border。

指定为ie盒模型：box-sizing：border-box

overflow：超出盒子，省略

flex布局

主轴和侧轴，默认是水平向右为主轴，竖直向下为侧轴，可通过flex-direction改变

主要的一些属性：

justify-content：主轴对齐方式

align-items：侧轴对齐方式

flex：包括flex-grow，flex-basis和flex-shrink，可以设置子项的弹性，当容器有剩余空间时，会伸展，当容器空间不足时，会收缩。

• flex- grow有剩余空间时的伸展能力
• flex- shrink容器空间不足时收缩的能力
• flex-basis没有伸展或收缩时的基础长度

Grid布局

<style>
        .box{
            display: grid;
            grid-template-columns: 100px 200px 300px;
            grid-template-rows: 100px 200px 300px;
            gap: 10px;
            color: white;
            text-align: center;
        }
        .box div{
            line-height: 100px;
        }
    </style>
<div class="box">
        <div style="background-color: red;">1</div>
        <div style="background-color: green;">2</div>
        <div style="background-color: blue;">3</div>
        <div style="background-color: blue;">4</div>
        <div style="background-color: green;">5</div>
        <div style="background-color: red;">6</div>
    </div>

fr单位表示剩余空间一等分

float

现常用于文字环绕图片

position

• static：默认值，非定位元素
• relative：相对自身原本位置偏移，不脱离文档流（占据原来位置）
• absolute：绝对定位，相对非static祖先元素定位
• fixed：相对于视口绝对定位