这是我参与「第五届青训营 」伴学笔记创作活动的第2天，记录CSS相关知识点和解决问题的过程。
盒模型
盒模型是CSS中很重要的一部分，包括最里面的内容、内边距、边框和外边距。
标准盒子模型和怪异盒子模型的区别：怪异盒子的初始设置宽高大小包含padding、border大小在内，但不包含margin的大小。给元素添加CSS3属性：box-sizing:border-box 时会触发怪异盒子。
CSS的引入方式
CSS的引入方式通常分为三种，行内引入、写在<style></style>标签内和外部引入。
行内引入：
<body>
<p style="color: #2196f3;font-size:18px;">如何引入css样式</p>
</body>
外部引入：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>如何引入css样式</title>
<link rel="stylesheet" href="css的path" type="text/css">
</head>
<body>
<p>如何引入css样式</p>
</body>
我比较喜欢<style></style>和外部引入，因为如果样式过多的话在标签里面写会显得很乱，不利于阅读和修改。
伪类和伪元素的区别
伪类：用于已有元素处于某种状态时（滑动、点击等）为其添加对应的样式，这个状态是根据用户行为而动态变化的。
伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。
区别：有没有创建一个文档树之外的元素。比如说：
<p>123</p>伪类就是p:first-child 设置样式，因为DOM树里面存在所以是伪类。伪元素就是p::first-letter,DOM树里面不存在。
CSS中浮动的学习：这个我老是使用不好，在网上搜了段解释，粘贴在下面，以便时常复习。 在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。我们常用这种样式来使图像和文本进行合理布局：例如在CSS文件中设置float: right;则表示向右浮动。
