CSS学习

<!-- -  CSS--><strong></strong> 标签选择器 / 类型选择器class  类选择器  以英文句号（.）开头ID  ID选择器  以（#）开头的继承权值仅为0.1，标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：p{color:red;} <!-- 权值为1 -->p span{color:green;} <!-- 权值为1+1=2 -->.warning{color:white;} <!-- 权值为10 -->p span.warning{color:purple;} <!-- 权值为1+1+10=12 -->#footer .note p{color:yellow;} <!-- 权值为100+10+1=111 -->.xxx:after{content: ''; display: block; clear: both;}<!-- 清除浮动 -->内联元素块级元素overflow: auto;  <!-- 高度自由 -->overflow：hidden；  <!-- 超过自身的盒子都隐藏 -->display: inline-block;  <!-- 控制块级元素在一行 -->body{min-width:1280px;}   <!-- 设置屏幕最小宽度限制 --><!-- 效果延时 -->-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;<!-- 栅格化 盒子定-->-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;<!-- flex容器属性 --><!-- 决定主轴排列方向 -->flex-direction: row | row-reverse | column | column-reverse;<!-- 是否换行 -->flex-wrap: nowrap | wrap | wrap-reverse;<!-- 以上两点集合 -->flex-flow: <flex-direction> || <flex-wrap>;<!-- Y轴上的对齐方式。 -->justify-content: flex-start | flex-end | center | space-between | space-around;<!-- X轴上的对齐方式 -->align-items: flex-start | flex-end | center | baseline | stretch;<!-- X,Y轴上的对齐方式 -->align-content: flex-start | flex-end | center | space-between | space-around | stretch;<!-- flex项目的属性 --><!-- 排列顺序:数值越小，排列越靠前，默认为0 -->order: <integer>;<!-- 放大比例:默认为0，即如果存在剩余空间，也不放大 -->flex-grow: <number>;<!-- 缩小比例:默认为1，即如果空间不足，该项目将缩小。 -->flex-shrink: <number>;<!-- 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 -->flex-basis: <length> | auto;<!-- 默认值为0 1 auto。后两个属性可选，两个快捷值：auto (1 1 auto) 和 none (0 0 auto)-->flex: none | [ <'flex-grow'> <'flex-shrink'> || <'flex-basis'> ]<!-- 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 -->align-self: auto | flex-start | flex-end | center | baseline | stretch;<!-- 调试工具 -->火狐控制台(Ctrl+Shift+K)