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)