二、CSS基础

css——层叠样式表

选择器

• 用于匹配HTML元素

  • 有不同的匹配规则
  • 多个选择器可以叠加

• 值得关注的选择器

  • 元素选择器 a{}
  • 伪元素选择器 ::before{}（是真实存在的元素）
  • 类选择器 .red{}
  • 属性选择器 [type=radio]{}
  • 伪类选择器 :hover{}（是元素的状态）
  • ID选择器 #id{}
  • 组合选择器 [type=checkbox]+label{}
  • 否定选择器 :not(.red){}
  • 通用选择器 *{}

• 分类和权重

  • ID选择器 +100
  • 类 属性 伪类 +10
  • 元素 伪元素 +1
  • 其他选择器 +0

  （不进位，10个类选择器 ！= ID选择器）

• 解析方式和性能（从右往左解析，加快解析速度，更快确定元素）

选择器权重

• !important优先级最高
• 优先级:外部css文件
• 相同权重后写的生效

字体

• 字体族
  • 衬线字体 serif
  • 非衬线字体 sans-serif
  • 等宽字体 monospace（每个字母占得空间一样）
  • 手写体 cursive
  • 花体 fantasy
• 多字体fallback(指定多个字体，一个字体指定后找不到就往后找)
• 网络字体、自定义字体

@font-face {
   font-family: "IF";
   src: url("./IndieFlower.ttf");
 }
.custom-font{
    font-family: IF;
}

• iconfont
  
  阿里巴巴矢量图标库

行高

• 行高的构成
  • 行高是由line-box决定的，line-box是由inline-box组成的
  • line-height会撑起line-box的高度
  • line-height不会影响inline元素本身的高度，inline元素高度是由字体大小决定的
• 行高相关的现象和解决方案
  • 利用line-height可实现垂直居中
  • 不同字体大小的内联元素通过vertical-align实现不同的对齐方式（默认基线对齐）
  • div中有文本和图片，图片下会有空白（img和文字基线对齐），将img的vertical-align：bottom(按底线对齐)
• 行高的调整

背景

• 背景颜色

  • 颜色英文单词 white/green/red/blue
  • 十六进制格式 #ff0000
  • hsl(色相，饱和度，亮度)
  • hsla(色相，饱和度，亮度，透明度)
  • rgb
  • rgba

• 渐变色背景

  • linear-gradient(to right, red, green)
  • linear-gradient(45deg, red, green)
  • linear-gradient(45deg, red 0, green 10%,blue 80%)--百分百为区域

• 多背景叠加

  经典例子

  background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%),
              linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%);
  background-size: 30px 30px;(设置渐变背景大小大小，会在背景平铺)
  
  

  效果图

• 背景图片和属性

  • background: url(...)
  • background-repeat:repeat/repeat-x/repeat-y/no-repeat
  • background-position:center/尺寸
  • background-size:尺寸大小
  • 雪碧图：多张图集合到一张图里，只需要一个http请求，通过background:url，background-position展现出某张图；图标大小变化，background-size改变雪碧图大小

• base64和性能优化

  • base64：一种文本格式，代表图片本身
  • background:url(data:img/png;base64 ........)
  • 节省http连接数
  • 文件的体积会增大，因此只适用于小图标
  • 增大了解码开销

• 多分辨率适配

  • 把大图缩小，在移动端会清晰很多

边框

• 边框属性

  • 线型（solid/dashed/dotted）
  • 大小(粗细)
  • 颜色

• 边框背景图

  • border-image:url(...) 30 round
    // 30代表边框的角上的像素,round代表边框中间的重复按整数重复

    
    
    效果图

• 边框衔接（三角形）

  • 利用border画三角形、梯形

滚动

当内容超过容器，就可以使用滚动

• 滚动行为和滚动条
  • visible (滚动条隐藏，内容超出容器)
  • hidden (滚动条隐藏，超出的内容隐藏)
  • scroll (始终显示滚动条)
  • auto (内容长时有滚动条，内容短无滚动条)

文字折行

• overflow-wrap(word-wrap) 通用换行控制
  • 是否保留单词
• word-break 针对多字节文字
  • 中文句子是否作为单词
• white-space 空白处是否断行

装饰性属性

• 字重 font-weight：bold/noraml/100等
• 斜体 font-style:itatic
• 下划线 text-decoration
• 指针 cursor(pointer 手型)

CSS Hack

• Hack即不合法但生效的写法
• 主要用于区分不同浏览器
• 缺点：难理解 难维护 易失效
• 替代方案：特性检测
• 替代方案：针对性加class