怎么样的布局或者说HTML结构才是简单干净的呢？这里教大家一个快速测试的方法。你首先禁掉你页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果你的内容排列有序，方便阅读，那么你的这个结构不会差到哪里去。

大屏pc分辨率：min-width:768px; 一般pc分辨率：min-width:640px; 平板分辨率：min-width:480px; 手机分辨率：min-width：320px;

创建flex容器：

Flex项目：

1. 主轴方向：flex-direction [ row（水平） | column（垂直） ]

2. 项目移到顶部： [ flex-strat ]

• 主轴垂直：设置 align-items 

• 主轴水平：设置 justify-content

• 即： row + align-items、column + justify-content创建flex容器：

  1	.flexcontainer{ display: -webkit-flex; display: flex; }

  Flex项目：

  • 主轴垂直：设置 align-items 

  • 主轴水平：设置 justify-content

  • 即： row + align-items、column + justify-content

1. 主轴方向：flex-direction [ row（水平） | column（垂直） ]

2. 项目移到顶部： [ flex-strat ]

box-sizing:border-box(宽高只包含内容宽度，不包括border和padding)

box-sizing:content-box(宽高包含内容宽度+border+padding)

animation-fill-mode

none:默认，结束最后一帧返回到初始帧

backwards:告诉动画在第一关键帧上等待动画开始(delay的时间)

forwards:在动画结束时停在最后一个关键帧上而不回到动画的第一帧上

both:或者同时具有这两个效果。

box-shadow中正负值X代表右和左；正负值Y代表下和上
比如：
2px 2px  右下 
2px -2px  右上
-2px 2px  左下
-2px -2px 左上

transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，(transition:需要过渡效果的元素，过渡花费的时间，过渡效果的时间曲线，过渡效果何时开始)用逗号（“，”）隔开例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。

transition-timing-function缓动函数:

ease默认值是先慢，中间快，然后最后慢，效果与ease-in-out类似，但是这个慢，相对于ease-in-out的强调指明的慢，要快一些。

linear:恒速

ease-in：慢速开始

ease-out:慢速结束

• transition-property:指定过渡或动态模拟的CSS属性

• transition-duration:指定完成过渡所需的时间

• transition-timing-function:指定过渡函数

• transition-delay:指定开始出现的延迟时间

.5s ease .1s

动画过渡的持续时间 动画类型 延迟时间

transform-origin改变元素中心位置（重置原点）达到需求原点位置进行变形。

通过transform-origin改变元素原点到左上角，然后进行顺时旋转45度：

.wrapper div {
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.transform-origin div {  -webkit-transform-origin: left top;
  transform-origin: left top;}

scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

“:read-write”选择器非只读状态时的样式.不是只读控件的文本。

input[type="text"]:-moz-read-write{
  border-color: #f36;
}
input[type="text"]:read-write{
  border-color: #f36;
}

“:read-only”只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

 <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />

css中：

input[type="text"]:-moz-read-only{
  border-color: #ccc;
}

“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的.

有的时候设计要求,不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。

Firefox浏览器还需要添加前缀::-moz-selection

选中文本时，背景变橙色，字体变白色：

::selection{

  background: orange;

  color: white;

}

::-moz-selection{

  background: orange;

  color: white;

}