这是我参与「第四届青训营 」笔记创作活动的第 3 天
学习前端，光看是不行的，我们还得来用用~
我们打算最终实现这样的一个效果 ↓
在本文章中，你将掌握 HTML 和 CSS 的使用基础，分析与调整 HTML 元素。
padding
消去margin后，Catbook字样跑到左上角去了！这会看起来很奇怪…
一种方法是，我们可以分配一些 px 值来创建 padding 空间。
我们给 navContainer 类中添加 padding 样式并给它 16px 的属性值就好了！
角边圆润
接下来让我们探讨一下关于角边圆润的问题。
试试 border-radius 样式吧！
拥有圆润的角边会更好看！（如果你是苹果用户，你会发现无论是什么框，它们的角边都是圆润的！）
试着实现这个效果！
嗯…刚刚那个效果似乎也不是特别好看，要不直接把它变成一个圆形吧！
不会的话…请向搜索引擎，指南网站或同学询问！
结束了？
wow，好像就要完成了？！
只需要再将其分为两列内容完成啦！！！
记住：自学时想实现某些效果但自己不知道该怎么做时…
请向搜索引擎，指南网站或同学询问！
前端网站
W3schools总是让人感到头晕目眩...
所以…互联网有时是你的朋友！
看看中间那行字…
现在常用的是 flex 元素
嗯…flex才是一种好选择！
Flexbox 是一个灵活(flexible)的盒子(box)，可让你自由控制元素的排列方向、大小、分布等。
看看横向的排列方式的效果...
类似地，用在我们的网页上...
看样子可以一招搞定！
请你给 section 标签加上一个具有 flex 样式的盒子试试~
调整
嗯…似乎弄完后有点怪？？
接下来试着改变 flexbox 中的元素大小。
试试 flex-basis 样式属性，我们可以定义元素所占空间的“默认”大小。
试试 flex-grow 样式属性。
我们可以决定哪些元素可以占用更多空间。
以此图片为样例动手试试吧！
你可以参考一下这篇文章
记得使用 flex grow！
结束！
Ohhhhhhhhhhhhhhhh！终于完成啦！
你现在已经知道了 1+1=2，快试试解一个微分方程吧！（bushi）
你现在已经学会了 CSS 众多内容中的一小部分！真不容易！
现在，你是一名合格的 CSSer 啦！（大概）
事实上，我们确实学了很多 :P
Flex不止刚刚学的那些内容，想要深入了解的话，你也可以试试通过这些游戏来学习：
希望你永远对前端怀有热情 :D
HTML 与 CSS 实战篇（下）结束
