CSS学习笔记｜青训营笔记

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

对于前端人来说，对CSS的概念就是设置样式，可以了解布局、样式的设置，其实还有一些细节性的东西是我们常常忽略的，在学习后，对css的知识进行了补充，像是通过知识串联又得到了新的思考，下面进行一下总结，系统地将学到的知识列出来，便于复习与交流。

1.继承

某些属性会自动继承其父元素的计算值,比如color;
盒模型相关的属性是不可继承的

2.初始值

CSS 中，每个属性都有一个初始值
background-color 的初始值为 transparent
margin-left 的初始值为 0

可以使用 initial 关键字显式重置为初始值
background-color: initial

3.display 属性

display	description
block	块级盒子
inline	行级盒子
inline-block	本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none	排版时完全被忽略

4.布局

行级排版上下文 -- Inline Formatting Context (IFC)
盒子在一行内水平摆放，一行放不下时，换行显示
块级排版上下文 -- - Block Formatting Context (BFC)
盒子在一行内水平摆放，一行放不下时，换行显示
Table 排版上下文 -- Inline Formatting Context (IFC)
盒子从上到下摆放
Flex 排版上下文
弹性布局，这里主要理解了flex:1的意义，flex-grow为1（如果盒子大小有剩余时，将剩余的进行占用）；flex-shrink为1（如果指定大小大于盒子大小时，将多余的进行收缩）；flex-basis:antu,没有伸展或收缩时的基础长度,长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。
Grid 排版上下文
grid 使元素生成一个块级的 Grid 容器

CSS学习笔记