1、长度单位

像素 px
一个像素 相当于屏幕上的一个小点

百分比 %

  • 浏览器根据父元素的样式计算该值
  • 父元素200 子元素50% 那么就是100
  • 好处：父元素属性值发生变化 ，子元素也会按照比例发生改变【自适应页面经常使用】


em**

  • 和百分比类似，当对于当前字体大小来计算
  • 1em == font-size:1px;
  • 使用em时 字体大小发生变化时，em也会改变，在设置字体相关的样式时，用em

    2、字体样式

    color:red; //文字颜色

font-size:; // 文字大小
默认文字大小16px

font-famliy; ; // 字体
可以同时指定多个字体 【英文字体 ， 中文字体】，隔开
详情查看帮助文档

简写
font: ;
文字的大小（倒数第二个） 和 字体必须写 （倒数第一个）

3、颜色单位

在CSS中可以直接使用颜色的单词
RGB值

  • 通过red green blue 三元色来设置
  • background-color : rgb(255，0，0) ;
  • 0-255 的值

  • 十六进制的RGB值

    • background-color : #红绿蓝;
    • background-color : #ff0000;

      4、行高

      line-height: 20px ; 行高20px
      如果只传一个数字 1 那么就是1倍 正常 【1.5 就是1.5倍】
      行间距= 行高 - 字体大小
      对于单行文本 可以将行高设置的和父元素高度一致 【变成居中】
      line-height 一定写在 font：；下面

      5、文本样式

  • text-transform

    • uppercase 大写
    • lowercase 小写
    • capitalize 每个单词首字母大写


  • text-decoration
    • underline 下划线
    • none 标准 默认
    • overline 上划线
    • line-through 删除线


  • letter-spacing 字符间距
  • word-spacing 单词间距
  • text-algin 用于设置文本的对齐方式
  • center 居中
    • left 靠左对齐
    • right 靠右对齐
  • justify 两端对齐
  • text-indent 缩进
    • text-indent：2em； 缩进两个字

开发时的字体大小一般都是 12px