本文详细介绍了CSS中的长度单位，包括像素、百分比、em和rem等，以及RGB和RGBA颜色表示法，同时深入探讨了HSL色彩模型。此外，文章还全面解析了CSS盒子模型，包括内容区、内边距、边框和外边距的设置，特别是边框的简写属性、圆角和轮廓线的设定。最后，讨论了内边距的垂直折叠和元素的布局策略，如水平、垂直方向及行内元素的布局特性。
目录
-RGBA：在RGB的基础上增加一个a元素表示不透明（1表示不透明 0表示全透明 .5表示半透明）
一.长度单位
-像素；
-百分比；将其属性值设置为相对于其父元素属性的百分比
-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 元素在页面中隐藏，不显示，但是依然占据页面的位置
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
