学习网页结构

长度单位
1、像素  px
       就是屏幕上一个个发光的小点，我们眼睛是看不出来的，像素是我们pc端最常用的一个单元，它是一个固定单元
2、百分比 %
       是父元素宽高的百分比，是一个相对单位，会随着父元素宽高的变化而变化，一般情况下，做流式布局比较多
3、em
        也是一个相对单元，相对于当前元素的字体大小来计算最终大小，也就是1em=1个font-size。如果当前元素没有设置字体大小，那么会继承祖先元素的字体大小，最终继承到HTML默认字体大小，是16px
4、rem
        也是一个相对单元，相对于根标签HTML的字体大小来计算最终大小
也就是1rem=1HTML的font-size

颜色单位
1、在CSS可以直接使用颜色的单词来表示不同的颜色
red、green、yellow、black等
缺点：颜色单纯太多了，不好描述
2、使用RGB值来表示不同颜色
rgb（红色，绿色，蓝色）
      颜色的值 0~255之间  0最小，255最大
直接用电脑或插件可以吸取颜色的比值，ctrl+alt+a
3、RGBA      
      rgba（red，green，blue，alphe）
      alphe  透明度 0~1之间设置透明度，0是透明，1是不透明
4、使用十六进制的rgb值来表示颜色，原理上和上面GRB原理一样
      十六进制：0~9abcdef，00表示最小，代替0~255的0，ff表示最大，代替0~255的255
      用十六进制的值来表示0~255之间的数值，表示红色，绿色，蓝色的浓度
       语法：##ff0000，像这样两两重复的表示，可以省略一位，简写成#f00
         #f0f0f0这样的不可以省略
          例子：#f00  #0f0  #00f  #ccc  #eee  #333
5、HSL值（H-色相 0-360，S-饱和度0-100%，L-亮度0-100%）
HSLA值  A是alpha 透明度 0-1之间

字体的样式
1、color              设置字体颜色
2、font-size        设置字体大小
3、font-family    设置指定文字的字体
（字体是设计师设计好，提前规定好，我们直接使用即可）
4、@font-face    自定义字体
@font-face{font-family：'名字'；
src：url（./）；}

在网页中将字体分成5大类：
serif     ['serif]       （衬线字体） 
sans-serif             （非衬线字体）
monospace          （等宽字体）
cursive ['ka:siv]       (草书字体)
fantasy [ ' faentasi]  (虚幻字体)
可以将字体设置为这些大的分类，当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体，用来兜底

设置文字斜体   font-style：；
可选值：
normal 默认值  文字正常显示
italic     文字倾斜（比较常用）
oblique  文字倾斜（了解就行）

设置文字的加粗   font-weight：；
可选值：
normal  默认值  文字正常显示
bold   文字加粗
bolder  文字加粗
100~900 之间数值  100最细  900最粗  注意没有单位

设置一个小型大写字母
font-variant
可选值：
normal  默认值  文字正常显示
small-caps 设置小型大写字母

font简写
可以统一设置文字相关的一些样式
注意：
①必须要有字体大小和文字的字体
②字体大小必须在倒数第二位
   文字的字体必须在倒数第一位

行间距

1、行高（line height） 文字占有的实际高度
行高=上间距+文字的大小+下间距
上间距=下间距
如果要设置行与行之间空白的距离，可以通过设置行高来实现
line-height样式名
可选值：
①直接写大小，单位：px/em/rem/%
②直接写倍数，1/2/3/4/5/6/......是当前字体大小的倍数
③可以写百分比，100%，200%，300%......

2、单行文本在父元素中垂直居中
只需要设置行高跟父元素高度一致即可实现

3、font中也可以指定行高
font：字体大小/行高  字体类型；

文本样式

1、text-transform             可以用来设置文本的大小写
可选值：
none      文本正常显示，默认值
uppercase  让字母大写
lowercase    让字母小写
capitalize   单词首字母大写

2、text-decoration             可以用来设置文本的修饰
可选值：
none                文本正常显示，默认值
underline         添加一个文本的下划线
overline           添加一个文本的上划线
line-through    文本删除线

3、letter-spacing                可以指定字符间的间距

4、word-spacing                可以设置单词之间的距离

5、text-align                       用于设置文本的对齐方式
可选值：
left            文本靠左对齐，默认值
right         文本靠右对齐
center      文本居中对齐
注意：设置文本的对齐方式必须给文本一定的空间，如果行内元素的话，它的宽度是被内容撑开的，也就无法设置

6、text-indent                      设置首行缩进
常用的长度单位：em

7、white-space：；               设置网页如何处理空白

8、text-overflow                    文本溢出包含元素时发生的事情
可选值：ellipsis   省略号
 
9、设置文本阴影
text-shadow：h-shadow  v-shadow  blur  color；
4个参数 （参数之间以空格隔开）
①阴影的水平位移距离，正值向右，负值向左  必填
②阴影的垂直位移距离，正值向下，负值向上   必填
③阴影的模糊半径        选填，默认是0px
④阴影的颜色，一般情况用rgba比较多    选填，默认是字体颜色               

10、box-shadow：h-shadow  v-shadow  blur  color；   
4个参数跟text-shadow阴一样
唯一不同的是
阴影的颜色 默认是黑色

11、vertical-align     设置元素垂直对齐的方式
可选值：
baseline        基线对齐   默认值   以x的最下方为标准
top               文本靠上
bottom         文本靠下
middle          文本居中
作用：
①设置图文对齐的方式
②可以解决图片三像素的问题
引入图片后，图片与图片之间会有三像素的空白，正常情况，这个空白我们要去掉
方法一：vertical-align  不能用baseline
方法二：设置其父元素的font-size为0
方法三：设置图片为块元素
方法四：使图片脱离文档流，设置它浮动或者绝对定位皆可