HSL和HSLA值
- 和上一篇文章中的rgb语法使用方法基本一样
- H:色相，调节范围为0-360度，其实就是一个环，零度等于360度是红色，调节颜色。
- S：饱和度，调节颜色浓度，调节范围（0%-100%）
- L：亮度，调节范围（0%-100%）
注：1.HSLA中A也和上一篇中讲到的A一样，表示透明度，具体用法请见上一章。
2.S和L表示是一定要加%否则效果将不会显示。
3.亮度0%就是黑色100%就是白色
文档流（normal flow）
- 之前说过网页是一个多层结构，一层摞一层，通过css可为每一层设置样式，用户只能看到最上面，而最下面一层叫文档流。这是基础。
- 元素有两种状态：
- 在文档流中
- 不在文档流中（脱离文档流）
在文档流中：
--块元素特点：比如div元素，独占一行，自上而下，默认宽度是父元素的全部，高度被子元素撑开。
--行内元素特点：比如span元素，不会独占一行，只占自身大小，自左向右水平排列，如果一行中不能容纳，那会到第二行。宽度与高度均被字体撑开。
在这里就这两点举个例子：
<!DOCTYPE html>
<html lang="zh">
<head><style>.box1{background-color: red;}.box2{background-color: blue;}</style>
</head>
<body><div class="box1">我是一个div</div><div class="box1">我是一个div</div><span class="box2">我是一个span元素</span><span class="box2">我是一个span元素</span></body>
</html>这样的话就会显示如下效果。
盒子模型（框模型）
- 这个是比较重要的。在css中将所有元素都会设置成一个矩形盒子。
将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆到不同的位置。而且每一个盒子都由以下几个部分组成。
- 内容区（content）：用来装内容的，平时在style中设置元素的height与width样式时改变的就是内容区
- 边框（border）：限制范围，盒子边缘里面属于盒子内部。
- 内边距（padding）
- 外边距（margin）
注：boder设置至少需要三个样式：1.宽度：boder-width
2.颜色：boder-color
3.样式：boder-style
而且边框的大小会影响盒子的大小。
举例：
<!DOCTYPE html>
<html lang="zh">
<head><style>.box1{background-color: red;height: 100px;width: 100px;border-width: 50px;border-color: yellow;border-style: solid ; /* solid代表实线 */}</style>
</head>
<body><div class="box1"></div></body>
</html>就会出现以下效果
