CSS修饰属性

选择器

• id选择器（#）id = “”
• 类选择器（.）class = “”
• 属性选择器（属性名）
• 全局选择器（*）
• 优先级
  内联>id选择器>class选择器>属性选择器>全局选择器
• 后代选择器：E F{}
• 子代选择器：E>F{}
• 相邻兄弟选择器（只有向下相邻的生效）：E+F{}
• 通用兄弟选择器（E下的所有F都生效）：E~F{}

字体属性

• color：字体颜色
• font-size:字体大小（chrome最小12px）
• font-weight:字体粗细

属性	描述
boid	粗
boider	更粗
lighter	更细
100-900	由细到粗，400默认，700=boid

• font-style：字体样式

属性	描述
normal	默认
italic	斜体

• font-family：指定一个元素的字体
  （例：“Microsoft YaHei”,“Simsun”,“SimHei”）

背景

• background-color:背景颜色
• background-image:背景图片
  url(“地址”)
• background-position:背景图片位置
  （例：left top）
• background-repeat:图片如何填充

属性	描述
repeat	默认
repeat-x	水平平铺
repeat-y	垂直平铺
no-repeat	不平铺

• background-size:图片大小
  （%；px；cover；contain）

文本

• text-align：文本对齐方式（left，right，center）
• text-decoration：添加文本修饰（underline下划线，overline上划线，line-through删除线）
• text-transform：文本大小写（captialize单词首字母打写，upperrcase全部大写，lowercase全小写）
• text-indent：文本块中首行文本缩进（px）

表格属性

• border：例：1px solid red
• border-collapse：collapse（折叠边框）
• width：宽
• height：高
• vertical-align：垂直方向（left，right，center）
• padding：表格填充（px）
• background-color：表格背景颜色

盒模型

• margin:外边框
• border：边框
• padding：内边距
• content：实际内容

弹性盒模型CSS3

• display：flex弹性模型

• flex-direction：指定位置

  属性	描述
  row	横向从左到右
  row-reverse	反转横向
  column	纵向排列
  column-reverse	反转纵向

• justify-content：内容对位方式

  属性	描述
  flex-start	上
  flex-end	下
  flex-center	中

• align-items：对位方式

  属性	描述
  flex-start	左
  flex-end	右
  flex-center	中

• flex：权重占比（例：1:2:2）
  -float:浮动（left，right）

• 清除浮动：

  1. clear：清除左（left），右（right）浮动，左右都清除（both）
  2. overflow：hidden；和clear一起被使用
  3. 增加伪对象：.属性名::after{content:“”;display:block;clear:both;}

• postion:定位指定元素位置

  属性（可用left，right，top，bottom调整位置px）	描述
  relative	相对定位
  absolute	绝对定位
  fixed	固定定位

• Z-index：修改堆叠覆盖顺序（例：1,2,3）

• border-radius:圆角（px，%）

• box-shadow：阴影

  属性	描述(正数右下，负数左上)
  h-shadow	水平方向阴影位置px
  v-shadow	垂直方向阴影位置px
  blur	模糊距离px
  color	阴影颜色

• :hover{鼠标时覆盖执行的操作}

• animation:动画
  @keyframs name{
  0%{}
  50%{}
  100%{}
  }

  属性	描述
  name	动画名称
  timing-function	设置动画效果速率（ease默认逐渐变慢，linear匀速，ease-in加速，ease-out减速，ease-in-out先加速后减速）
  delay	动画开始的时间
  iteration-count	动画循环次数，infinite无限次数循环
  dirction	动画播放方向（normal默认向前播放；alternate动画播放在第偶数次向前播放，第奇数次向反方向播放）
  animation-play-state	控制动画播放状态（running播放，paused停止）

-媒体查询：

<meta name="viewport" content="width=device-width",initial-scale=1,maximum-
scale=1,user-scalable=no>

@media screen and (max-width:768px){
/*设备小于768px，手机*/
}
@media screen and (min-width:768px) and (max-width:992px){
/*设备小于992px大于768px，平板*/
}
@media screen  and (min-width:992px){
/*设备大于992px，网页*/
}

雪碧图

span{
    display: block;
    width: 100px;
    height: 120px;
    background-image: url(1.PNG);
    border: 3px solid red;
    background-position: -100px -10px;
}