ZG前端学习系统day03 2020-11-04

• css基础的选择器
  id选择器(id) ：使用 ：id ="名字’ #名字{ } id值是唯一的 标识符的命名 (数字 字母 下划线 中划线组成 但是数字和符号不可以作为开头）使用场景：一般用于js中获取id元素或者用于外围结构起的id名
  标签选择器 使用： 标签名{ } 应用场景： 一般使用在去除某些默认的样式
  类选择器 使用 ：class = “名字” .名字{ } 一个标签可以使用不同的class属性 一个class属性可以被不同的标签使用
  通配选择器 使用：*{ } 应用场景：一般用于去除默认样式 *{ margin：0；padding：0；}

• css基础的优先级
  id>class>标签>通配
  一个标签使用不同class即优先级相同的时候采用就近原则

• css盒子模型：
  content + padding + border + margin

• css的常见属性—— ——font
  单独使用：
  font-style: italic(斜体） normal（默认值）
  font-width:bold/700（加粗） normal（默认值）
  font-size:字体的大小 默认的情况下字体的大小是16px
  font-family:字体的类型 当为中文的时候应该加上引号 单个英文单词可以不加 多个英文单词的时候还必须加引号 当同时存在中文和英文的时候应该先写英文然后是中文从左向右依次加载 如果能够加载就不会解析后面的字体 可以允许多个值存在但是中间用逗号连接
  line-height:行高 上边距+字体大小+下边距 可以设置使字体垂直居中
  复合写法 注意：应该注意复合的顺序 font-size和line-height中间使用/进行连接 并且font-size和font-family两者必须存在

• css的常见单位 ：
  分为绝对单位和相对单位：
  绝对单位：px（像素）
  相对单位 ：%相对于父元素大小进行百分比缩放 em当自身有font-size有大小的时候相对于自身的大小 如果自身没有相对于父级元素 rem相对于html的font-size进行大小设置

• css的常见属性—— ——text
  text-align 文字水平样式 可以选择的值 left （默认）right center justify
  text-decoration给文字添加装饰效果 overline underline line-through none
  text-indent 首行缩进

• 盒子border属性
  单独表示：border-width border-style（solid dashed double dotted none） border-color
  颜色的使用： 1英文单词 2#十六进制 3rgb（，，） rgba（，，，）

• 盒子padding属性（内边距）
  padding-top padding-right padding-bottom padding-left
  复合：padding ：10px；（一个值表示上右下左）10px 20px （2个值表示上下 ，左右）
  10px 20px 30px（三个值表示 上，右左，下）10px 20px 30px 40px（4个值表示上，右，下，左）

• 盒子margin属性（外边距）
  margin-top margin-right margin-bottom margin-left
  复合写法同padding