重学前端——2 简单回顾css

css
文字阴影(css3)
text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色

层叠性
1 含义 多种css样式叠加,浏览器处理冲突的一种能力
2 原则 一般情况下，若出现样式冲突，会按照CSS书写的顺序 以最后的为准,样式不冲突，不会层叠
继承性
一般文本颜色和字号,font-开头的属性,text-开头的属性、line-开头的,color可以被继承
优先级
id选择器>class选择器>标签选择器
注意特殊情况
* 行内样式优先
* css定义了一个命令!important,该命令赋予最大的优先级
* 继承样式权重为0
* 权重相同,css遵循就近原则，谁靠近元素的样式具有最大的优先级

  总结
      1 首先观看选择器是否直接选中作用的元素还是通过继承影响作用的元素
      2 假如不是继承则按照权重的计算公式（id选择器个数 class选择器个数 标签选择器个数），假如三个选择器个数都一样，则就近原则（排在最后的优先级最大）
      3 假如都是继承的,谁描述的近(结构层级)就听谁的,当描述结构层级一样，则依次比较id选择器数量 class选择器数量 标签选择器数量,假如三种选择器数量也一样，就近原则(位置就近)

css3动画
@keyframes 动画名 {
0%
{

      }
   100%
   {

   }

}

元素执行动画
animation: 动画名 运动时间 运动曲线
无缝滚动
见案例

伸缩布局
传统的三等份

flex-direction 调整主轴方向
flex-direction: row 默认 水平从左到右
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
justify-content 调整主轴对齐
justify-content: flex-start;
默认值 表示让子元素从父容器的开头开始排序
justify-content: flex-end;
表示让子元素从父容器的后面开始排序但盒子顺序不变
justify-content: center;
表示让子元素在父容器中间显示
justify-content: space-between;
左右盒子贴近父盒子 中间的均分空白间距
justify-content: space-around;
相当于给每个盒子添加左右margin
align-items 调整侧轴对齐（垂直对齐） 对一行的情况排列
align-items: stretch; /默认 子元素高度会拉伸适应父容器（子元素没有设置高度前提下）/
align-items: center; /垂直居中/
align-items: flex-start;/上对齐/
align-items: flex-end;/下对齐/
flex-wrap 控制是否换行
flex-wrap: nowrap; 默认值 项目不拆行不拆列 收缩显示 一行内显示
flex-wrap: wrap; 项目必要时候拆行或拆列
flex-wrap: wrap-reverse; 项目必要时候拆行或拆列，但是相反的顺序
flex-flow flex-direction和flex-wrap的简写
flex-flow:flex-direction flex-wrap
排列方向 换不换行
order 控制子元素的排列顺序
order值越小越排在前面 值可以为负数 默认值为0
align-content
必须父元素设置 display: flex flex-direction: row
flex-wrap: wrap
其值可以设置 stretch center flex-start
flex-end space-between space-around
关于a标签中可以放div的问题
基于html5的新的内容标签的分类，新的模型中a标签被认为是transparent的，所以a标签内部能否放div取决于a的容器能否放div标签，取决于他们的content_modal（内容模型）