CSS 基础小结

元素宽高特点

1、块级元素

（1）可以设置宽高
（2）不能和其他元素共在一行，独占一行
（3）当没有设置宽高时，宽度和父级宽度一样，高度由元素内容的高度决定
（4）当设置宽高时，元素的宽高就是设置的值

2、行级元素

（1）不可以设置宽高，设置的宽高无效
（2）可以和其他元素共在一行
（3）行级元素的宽高由元素内容的长短而决定

3、行内块级元素

（1）可以设置宽高
（2）可以和其他元素共在一行
（3）当没有设置宽高时，宽高由元素内容的长短而决定
（4）当设置有宽高时，元素的宽高就是设置的值

元素类型转换

任何元素都可以进行类型转换，元素类型之间可以相互转换
元素类型转换不会影响元素自身的性质

（1）转换为 块级元素 ：display：block
（2）转换为 行级元素 ：display：inline
（3）转换为 行内块级元素 ： display：inline-block

元素显示/隐藏

元素隐藏：display-none;

（1）页面结构任然存在
（2）元素所占空间会被隐藏

元素显示：

（1）display：block; — 显示块级元素
（2）display：inline; — 显示行级元素
（3）display：inline-block; — 显示行内块级元素

尺寸单位

1、像素：px

（1）屏幕上的一个点作为单位，稳定精确
（2）用的最多的尺寸单位

2、em单位

（1）em是以自身字体大小作为参考，是自身字体大小的倍数
（2）当自身字体大小改变时，em会随着改变

3、rem单位

（1）rem是以根元素（html元素）字体大小作为参考，是根元素字体大小的倍数
（2）当根元素字体大小改变时，rem会随着改变

4、%单位

（1）%是以父元素作为参考，是父元素的百分比
（2）当父元素改变时，使用%做单位的子元素会随着改变

颜色的表示方法

1、颜色名称

（1）html 与css 规范中定义了1447种可用的颜色名
（2）颜色名用的较少

2、16进制颜色值

（1）#rrggbb ，rr（红），gg（绿），bb（蓝）
（2）16进制整数规范颜色成分，所有值必须介于00与ff之间
（3）使用较多

3、rgb颜色值

（1）通过定义三种（红，绿，蓝）颜色的强度来定义颜色
（2）所有值必须介于0到255之间

4、rgba颜色值

（1）在rgb颜色的基础上增加了透明度
（2）a：alpha表示透明度，取值0到1
（3）a取值为0时，表示完全透明；a取值为1时，表示完全不透明；值越小，透明度越高