2020-08-26

RGB（red greed blue）（0,10,256）

CSS中的颜色表达方法

（1）预定义颜色：bule，red black。。。

（2）十六进制颜色：#0f0f0f

（3）RGB颜色（128,0,0）全红

代码实现：

	<p style="color: blue;">预定义颜色</p>
	<p style="color: rgb(0,255,0)">RGB颜色</p>
	<p style="color: #FF0000">十六进制颜色</p>

（4）RGBA，在RGB的基础上有添加了表示透明度的Alpha

（5）HSL:用色调，饱和度和透明度三个分量来表示颜色

（6）HSLA：在HSL的基础上有添加了表示透明度的AIpha

背景相关属性

Background-color:背景颜色

Background-image：背景图片

Background-repeat：图片复制选项（repeat在水平，垂直两个方向复制）（repeat-x/y，在水平/垂直）（no-repeat 不复制）

简写：将所有元素放在一起（有顺序要求：背景颜色->背景图片->重复方式->所在位置

尺寸相关属性

1. 固定高度和宽度（height：200px）
2. 自适应高度（高度随内容增加而增加）
3. 最大高度：max-height（内容增加到指定高度就不会再增加）
4. 最小高度：min-height（开始高度固定，内容超过指定高度开始增加高度）

显示相关属性

1. visibility：hidden 仅仅隐藏内容，该元素所占位置依然存在
2. display：none 不仅隐藏内容，而且隐藏位置
3. Display：inline 将块级元素以内联形式显示，此时宽，高等属性对其无效
4. Display-block 将块级元素以内联元素形式显示并且具有块级元素的特征，宽，高属性依然有效

盒子模型

Margin：外边距

Margin-top（上） margin-bottom（下） margin-left（左）margin-right（左）

1. margin：30px，表示上下左右外边距都设置30px
2. margin-left：30px 表示设置距离左方30px
3. margin：10px20px30px40px 分别设置上右下左四个边的边距，顺序按照顺时针方向
4. margin：20px30px 分别设置上下边距20px 左右边距30px

Padding：内边距

与margin类似（参照上述方法）

Border：边框

若果想让两个盒子在一行内，那么两个盒子都要浮动（float）并且给他们的父类清除浮动（overflow：hidden；）

是什么是父类：

Box是div1和div2的父类