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

前言

这节课跟随字节跳动老师学习到了 CSS 的概念和工作原理、各种 CSS 选择器以及盒模型和常用的布局方式。

CSS三大特性

应该包括三点（概念）

盒子模型 web页面的每一个元素都好像一个盒子,将其他的东西可以装进盒子
浮动每一个盒子,可以添加浮动的属性,让其更好的浮现在某盒子旁边
定位将盒子直接定位在某一位置

盒子模型 ---浮动

盒子模型 ---定位

<!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>
        .nav {
            position: absolute;
            right: 5px;
            top: 5px;
            width: 300px;
            height: 300px;
            background-color: burlywood;
            margin: 0 auto;
            border-width: 5px;
            border-color: chartreuse;
            border-style: dashed;
        }

        .qwe {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: darkcyan;
            margin: 0 auto;
            border-style: dashed;
            border-width: 5px;
            border-color: darkmagenta;
        }
    </style>
</head>

<body>
    <div class="nav">Hello Word</div>
    <div class="qwe">Hello
        <div class="nav">World</div>
    </div>

</body>

</html>

除了基本的语法及原理，本节课还学习了常见的CSS样式问题如何解决！

解决常见的 CSS 问题

以下链接提供了一些你在使用 CSS 时可能遇到的常见问题的解决方案。主要使用事项

基础

如何应用 CSS 到 DOM 中？
CSS 如何留白？
CSS 如何添加注释？
CSS 如何通过元素名、类名以及 ID 筛选元素？
CSS 如何通过属性名和属性内容筛选元素？
如何使用伪类？
如何使用伪元素？
如何将多个选择器应用于同一个规则？
如何在 CSS 中指定颜色？
如何在浏览器中调试 CSS？

样式和内容

如何给文字添加样式？
如何定制元素列表？
如何给链接添加样式？
如何给文本添加阴影？

盒子和布局

如何调整 CSS 盒模型大小？
如何控制盒模型溢出？
如何控制 CSS 盒模型中背景绘制部分？
如何理解 inline、block 以及 inline-block？

How to create fancy boxes (en-US) (请一并查看 Styling boxes 模块)

如何使用 background-clip 控制背景图覆盖？
如何使用 box-sizing 完全改变盒模型？
如何改变背景色？
如何修改边框？
如何给 HTML 表格添样式？
如何添加盒子阴影？

罕见问题与进阶技巧

CSS 允许一些高级的设计技巧。这些文章可以帮助您解决一些更复杂的使用案例。

通用

如何计算 CSS 选择器的优先级？
如何控制 CSS 中的继承？

进阶效果

如何使用 CSS 滤镜？
如何在 CSS 中使用混合模式？

布局

使用 CSS flex 布局
使用 CSS 多列布局
使用 CSS 生成内容

理解 CSS | 青训营笔记

前言