这是我参与「第四届青训营 」笔记创作活动的的第1天。 今天学习的内容是“理解CSS”，虽然之前自己有初步接触CSS，但是感觉在这堂课中还是学到了很多技巧。

在页面中使用CSS

在页面中使用CSS有三种方式：分别为外链，嵌入和内联。

# 选择器的表示 在本次课程中对于选择器的表示有了更彻底的认识，其中A>B与A B的区别在于A>B只能应用于B是A的直接子元素而A B直须满足B是A 的子代即可。选择器的表示曾经只知道其中的一两种，在本次课程中掌握的更加全面。

继承

文字一般可以继承，而块一般不可继承，css同时还提供了inherit标识进行显示继承。

layout

css中块从外到内的等级分为margin，boader，padding，content。其中通过boarder设置宽高都为0，可以得到三角形和带对角线的正方形。同时margin的垂直方向上的边距会发生折叠。同时通过box-sizing可以设置边框的长高。overflow可以解决溢出的样式。

flex

通过display：flex可以设置块内横向或者竖向排列，其中还可以调整内部块的排列间距等等
   Flexbox 是 CSS 弹性盒子布局模块的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。要使用 flexbox，你只需要在想要进行 flex 布局的父元素上应用`display: flex` ，所有直接子元素都将会按照 flex 进行布局。

grid

网格是由一系列水平及垂直的线构成的一种布局模式。根据网格，我们能够将设计元素进行排列，帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。
一个网格通常具有许多的**列（column）** 与**行（row）** ，以及行与行、列与列之间的间隙，这个间隙一般被称为**沟槽（gutter）** 。设置网格格子如下代码所示。

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

收获

在本次课程中我学到了很多之前并不知道的小技巧，也学到了grid布局等等新知识，在课后我会常用代码浮现一些网页来锻炼自己的网页复现能力的。谢谢老师的讲授，受益匪浅