[ 深入CSS（中）| 青训营笔记]

这是我参与「第五届青训营 」伴学笔记创作活动的第 5天，以下是我根据课程内容整理的笔记。

课堂笔记

课程重点

1. 布局
2. 盒模型

笔记内容

布局

• 布局(Layout)是什么？

  • 确定内容的大小和位置的算法

  • 依据元素、容器、兄弟节点和内容等信息来计算

• 布局相关概念

  • 常规流

    行级、块级、表格布局、FlexBox、Grid布局

  • 浮动

  • 绝对定位

盒模型

盒模型由内容的宽度(width)和高度(height)，内边距(padding)，外边距(margin)以及边框大小(border)组成

• width

  • 指定content box宽度

  • 取值为长度、百分数、auto

  • auto由浏览器根据其它属性确定

  • 百分数相对于容器的content box宽度

• height

  • 指定content box高度

  • 取值为长度、百分数、auto

  • auto取值由内容计算得来

  • 百分数相对于容器的content box高度

  • 容器有指定的高度时，百分数才生效

• padding

  • 指定元素四个方向的内边距

  • 百分数相对于容器宽度

• border

  • 指定容器边框样式、粗细和颜色

  • 三种属性

    边框的粗细border-width、边框的样式border--style、边框的颜色border-color

  • 四个方向

    上边框border-top、右边框boder-right、下边框border-bottom、左边框border-left

• margin

  • 指定元素四个方向的外边距

  • 取值可以是长度、百分数、auto

  • 百分数相对于容器宽度

使用margin:auto水平居中

<div></div>
<style>
    div {
        width: 200px;
        height: 200px;
        background: coral;
        margin-left: auto;
        margin-right: auto;
    }
</style>

margin collapse

<div class="a"></div>
    <div class="b"></div>
    <style>
        .a {
            background: lightblue;
            height: 100px;
            margin-bottom: 100px;
        }
        .b {
            background: coral;
            height: 100px;
        }
    </style>

结语

通过本次课程的学习，真的收获到了许多，以前对一些比较模糊的知识点也逐渐的清晰了起来。