Css3新特性
css伪类和伪元素
伪类包含两种：状态伪类和结构性伪类
状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。常见的状态伪类主要包括：
css伪类用于向某些选择器添加特殊的效果
-
🔗应用于未被访问过的链接
-
:hover 应用于鼠标悬停到的元素
-
:active 应用于被激活的元素；
-
:visited 应用于被访问过的链接，与:link互斥
-
:focus 应用于拥有键盘输入焦点的元素
-
:lang 向带有指定 lang 属性的元素添加样式
结构性伪类是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。常见的包括：
:first-child 选择某个元素的第一个子元素；
:last-child 选择某个元素的最后一个子元素；
:nth-child() 选择某个元素的一个或多个特定的子元素；
:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type() 选择指定的元素；
:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
:first-of-type 选择一个上级元素下的第一个同类子元素；
:last-of-type 选择一个上级元素的最后一个同类子元素；
:only-child 选择的元素是它的父元素的唯一一个子元素；
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty 选择的元素里面没有任何内容。
例如：
some text
some text
伪元素是对元素中的特定内容进行操作，而不是描述状态。它的操作层次比伪类更深一层，因此动态性比伪类低很多。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中！常见的伪元素选择器包括：:first-letter 选择元素文本的第一个字（母）。
:first-line 选择元素文本的第一行。
:before 在元素内容的最前面添加新内容。
:after 在元素内容的最后面添加新内容。
注意事项
有时你会发现伪类元素使用了两个冒号 (:😃 而不是一个冒号 (😃，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。
所以，如果你的网站只需要兼容 webkit、firefox、opera 等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。
伪元素的应用:例如
清除浮动：如果父元素的所有子元素都是浮动的，父元素的高度则无法撑开。可以通过对父元素添加after伪类撑开父元素高度，因为after就是其最后一个子元素。
.clear:after {
content: ‘’;
display: block;
clear: both;
}
准备工作1：设置Meta标签
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
准备工作2：加载兼容文件JS
因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：
准备工作3：设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)
现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:
为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：
回归CSS3 Media
@media only screen and (max-width:750px) { //浏览器宽度小于750px时 字体为黑色
*{coloe:#000;}
}
@media only screen and (min-width:751px) { //浏览器宽度大于749px时 字体为红色
*{coloe:#fff;}
}
@media screen and (min-width:960px) and (max-width:1200px){//浏览器宽度大于960px并且下雨1200px时 字体为灰色
*{coloe:#ccc;}
}
弹性盒
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
父级元素上的属性
justify-content 子元素水平排列方式
center 居中
space-between 两端对齐,并且相邻两个间隔都相等
sapce-around 每一个两侧的间隔相等
flex-start 左对齐
flex-end 右对齐
aligen-items 单行子元素垂直排列方式
flex-start 顶部
flex-end 底部
center 垂直居中
baselin 项目的第一行文字的基线对齐
stretch 如果未设置高度或设为auto，将占满整个容器的高度
flex-direction 排列方式
row 横向排列
row-reversre 与横向排列的顺序相反
column 纵向排列
colume-reverse 与纵向排列的顺序相反
注意：当为纵向排列时，如果想要水平居中的话，应使用aligen-items而不是justify-content,因为此时的排列顺序恰好与不设置这个属性前的顺序相反。
flex—wrap 决定子元素的换行方式
nowrap 默认,不换行
wrap 换行
wrap-reverse 反转wrap序列
flex-flow 等于上面两个的缩写
flex-flow: column wrap;
子元素的属性
flex
flex:num;
num是系数，父级总共分成几份,它占几分之num;
子元素在划分父级元素宽度时，先划分固定宽度，其他的宽度再平分
flex-grow 定义子元素的放大比例
order 规定子元素的顺序
数值越小，越靠前默认值为 0
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
什么是 CSS3 中的动画？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
例子：
一、当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
二、改变背景色和位置：
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
CSS3 动画属性
@keyframes 规则和所有动画属性：
属性
描述
CSS
@keyframes
规定动画。
3
animation
所有动画属性的简写属性，除了 animation-play-state 属性。
3
animation-name
规定 @keyframes 动画的名称。
3
animation-duration
规定动画完成一个周期所花费的秒或毫秒。默认是 0。
3
animation-timing-function
规定动画的速度曲线。默认是 “ease”。
3
animation-delay
规定动画何时开始。默认是 0。
3
animation-iteration-count
规定动画被播放的次数。默认是 1。
3
animation-direction
规定动画是否在下一周期逆向地播放。默认是 “normal”。
3
animation-play-state
规定动画是否正在运行或暂停。默认是 “running”。
3
animation-fill-mode
规定对象动画时间之外的状态。
3
运行名为 myfirst 的动画，其中设置了所有动画属性：
/* Safari 和 Chrome: */：-webkit-animation
/firefox/（火狐） ：-moz-animation
/* Opera: */：-o-animation
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;/* Firefox: */
与上面的动画相同，但是使用了简写的动画 animation 属性：
div{
animation: myfirst 5s linear 2s infinite alternate;/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}
Css兼容性解决方案：
一、css hack
css hack，让css代码兼容IE浏览器，呈现出和其他厂商浏览器相同的UI界面。
方式一：条件注释法
方式二：属性前缀法
*color:red;//IE7+的hack
+color:red;
-color:red;//IE6-的hack
_color:red;//IE6-的hack
#color:red;//IE6的hack
color:red\0;//IE8-10的hack
color:red\9;//IE6-10的hack
color:red\9\0;//IE9-10的hack
color:red !important;
书写顺序，其他浏览器的css写在前面，IE7写在中间，IE6写在最后面
方式三：选择器前缀法，假如要给#id1的元素写样式，如下，
*#id1{};//IE6的hack
*+#id1{};//IE7的hack
还有\0、\9、等
二、css3兼容各版本浏览器前缀法
前缀
浏览器
-moz-
火狐等使用Mozilla浏览器引擎的浏览器
-webkit-
Safari谷歌浏览器等使用Webkit引擎的浏览器
-o-
Opera, 浏览器(早期)
-ms-
Internet Explorer (不一定)
把不带前缀的放到最后一行
需要添加浏览器引擎前缀的属性，有以下等：
@keyframes
移动和变换属性：
transition-property
transition-property
transition-timing-function
transition-timing-function
动画属性：
animation-name
animation-duration
animation-timing-function
animation-delay
边框：border-radius
阴影：box-shadow
隐藏：backface-visibility
column属性
flex属性
透视属性perspective
css选择器使用注意事项：
为保证兼容性，尽量不要使用太高级的选择器，比如,
p:first-of-type{};//选择每个p元素是其父级的第一个子元素
兼容性为，支持该属性选择器的第一个浏览器版本号，如下，
chrome 4+，IE 9+，firefox 3.5+，safiri 3.2+，opera 9.6+
三、css兼容性实例解决方案汇总：
1、父元素为flex属性，子元素为左固定宽，右自适应宽，但在IOS低版本系统中此布局失效，解决方案如下：
display: -webkit-flex; display: flex;
-webkit-flex-basis: 8.9rem; flex-basis: 8.9rem;
-webkit-flex-grow: 1; flex-grow: 1;
2、transform属性兼容性解决方案：
transform:rotate(180deg);
-webkit-transform:rotate(180deg);
3、block元素手动设置为inline-block元素时，横向布局出现间隙
解决方案：设父元素font-size:0;
4、input元素的placeholder属性，IE6-9不支持
5、定制个性化滚动条
滚动条出现的条件：
一、文档内容高度/宽度 大于 浏览器的高度/宽度;
二、文档内元素人为设置固定宽高后，再设置属性overflow || overflow-x || overflow-y : scroll，即可出现滚动条效果;
由于不同内核浏览器的css hack不同，因此，针对不同内核浏览器有不同的解决方案，以<div></div>元素为例，定制该元素的滚动条样式，水平方向禁止滚动，垂直方向可滚动：
weekit内核：以下选择器选择的内容，可理解为块级元素
.content::-webkit-scrollbar{width:2px; background:#fff}
//设置 滚动条 整体的样式
.content::-webkit-scrollbar-thumb{background:#f00}
//设置 滚动器 的样式
.content::-webkit-scrollbar-button{background:#0f0}
//设置 滚动条 顶部和底部 的按钮样式
.content::-webkit-scrollbar-track{}
//外层轨道 样式
.content::-webkit-scrollbar-track-piece{}
//内层轨道 样式，不包括 滚动器 部分
.content::-webkit-scrollbar-corner{}
//右下角 边角 样式
.content::-webkit-resizer{}
//可缩放的.content的 右下角 边角样式
268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
