目录
一.长度单位
二.RGB值
-RGBA：在RGB的基础上增加一个a元素表示不透明（1表示不透明 0表示全透明 .5表示半透明）
-十六进制的RGB值
三.HSL
四.盒子模型
- 组成：
- width和height是设置内容区的宽度和高度
-边框的设置，需要设置至少三个样式：
- 还有border-xxx-width
--border简写属性：
-内边距（padding）
-外边距（margin）
-垂直外边距的重叠（折叠）
-水平方向的布局：
-垂直方向的布局：
-行内元素的布局
-行内元素的盒模型
一.长度单位
-像素；
-百分比；将其属性值设置为相对于其父元素属性的百分比
-em；相对于元素的大小来计算的，（1em = 1 font-size），会根据字体大小而改变
-rem；相对于根元素的字体大小来计算
二.RGB值
-RGB通过三种颜色的不同浓度来调配不同的颜色
-r:red g:green b:blue
-每一种颜色范围在0~255（0%~100%）
-语法：RGB（红色，绿色，蓝色）
-rgb全0即黑，全255即白
-RGBA：在RGB的基础上增加一个a元素表示不透明（1表示不透明 0表示全透明 .5表示半透明）
-十六进制的RGB值
--语法：#红色绿色蓝色
--颜色浓度通过00-ff （如果颜色两位重复，即可表示#aabbcc -> #abc）
三.HSL
-h：色相（0-360），s：饱和度、颜色的浓度（0%-100%），l:亮度（0%-100%）
-HSLA（A和RGBA中的A一个意思，表示透明度）
四.盒子模型
- 组成：
内容区（content）、内边距（padding）、
边框（border）、外边距（margin）
- width和height是设置内容区的宽度和高度
-边框的设置，需要设置至少三个样式：
边框的宽度：border-width（有一个默认值3px）
边框的颜色：border-color
边框的样式：border-style
-border-width默认值是3px
值得情况：
四个值：上，右，下，左
三个值：上，左右，下
两个值：上下，左右
一个值：上下左右
-border-color同理；如果不写color，则边框默认值是black；
-border-style同理；如果不写style，则边框默认值是none，这个必须写；
样式有：solid实线，double双线，dotted点状虚线，dashed虚线
- 还有border-xxx-width
xxx可以是top、bottom、left、right
用来指定某一个边的宽度
=========>
--border简写属性：
===>
--outline和border相同，都是设置轮廓线的，但是，outline不会影响可见框的大小
- 不会影响下面元素的布局
--border-radius 设置圆角，设置的是圆的半径大小（值越大弧度越大）
-border-top-left-radius:50px ；左上角
border-top-right-radius:50px 100px；右上角的设置两个值 ==》得到这个效果
- （左上，右上，右下，左下）==》得到
- ==》得到椭圆角
- ==》得到圆形
-内边距（padding）
四个方向的内边距：上右下左
padding-top, padding-right
padding-bottom, padding-left
-内边距的设置会影响盒子的大小，背景颜色会延伸到内边距上
-盒子的大小由内容区、内边距和边框共同决定，计算大小时，要将这三个一起计算
-简写属性（padding：10px 20px 30px 40px）与border的简写类似
-外边距（margin）
-外边距不会影响盒子的可见的大小
-但是会影响盒子的位置
-有四个方向的外边距：
margin-top, 设置一个正值，上外边距，元素会向下移动
margin-right 默认情况下，设置其不会产生任何影响
margin-bottom, 设置一个正值，下外边距，其下边的元素会向下移动
margin-left设置一个正值 左外边距，元素会向右移动
margin也可以设置负值，往相反方向移动
-简写属性（margin：10px 20px 30px 40px）与border的简写类似
-margin会影响到盒子实际占用空间的大小
-垂直外边距的重叠（折叠）
-相邻的垂直方向的外边距会发生重叠；
-兄弟元素
--兄弟元素间的相邻垂直外边距会取两者之间的较大值
--兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理
-父子元素
--父子元素的相邻外间距，子元素的会传递给父元素（上外边距）
-水平方向的布局：
-在子元素的style中添加margin：0 auto；能使子元素在父元素里居中显示
-垂直方向的布局：
-如果子元素在父元素中显示高度溢出，则可以使用overflow：auto；
-overflow属性来设置父元素如何处理溢出的子元素
可选值：visable：默认值，子元素会从父元素中溢出，在父元素的外部显示
hidden：溢出的内容将会被裁减，不会被显示
scall：生成两个滚动条，通过滚动条可以查看完整的内容
auto：根据需要生成滚动条（推荐使用）
-overflow-x：水平方向布局 overflow-y：垂直方向布局
-行内元素的布局
-行内元素的盒模型
-行内元素不支持设置宽度和高度
-行内元素可以设置padding，但是垂直方向padding不会影响页面布局
-行内元素可以设置border,垂直方向的border不会影响页面的布局
-行内元素可以设置margin，垂直方向的margin不会影响页面的布局
-display用来设置元素显示的类型
可选值：inline将元素设置为行内元素
block将元素设置为块元素
inline-block将元素设置为行内块元素，既可以设置宽度和高度，又不会独占一行
table将元素设置为一个表格
none元素不在页面中（可以隐藏一个元素）
-visbility用来显示元素的状态
可选值：visable默认值，元素在页面中正常显示
hidden元素在页面中隐藏，不显示，但是依然占据页面的位置
