CSS3

font-size:12px;
font-family:"微软雅黑";
font-weight:字体粗细 normal|bold
font-style:字体风格 normal italic oblique倾斜
font:font-style font-weight font-size/line-height font-family综合设置字体样式

选择器

类选择器
    申明 ：.类名{}   
    引用类样式 ：class=""
多类名选择器
ID选择器
    #{}   调用id=""
通配符选择器 *{}
伪类选择器 
>链接伪类选择器
    a:link 未访问
    a:visited 已访问
    a:hover 鼠标悬浮
    a:active 选定 不松开鼠标
>结构伪类选择器
    :first-child
    :last-child
    :nth-child()  nth-child(odd)奇数  nth-child(even)偶数
>目标伪类选择器
    :target

CSS颜色 color : red|green 十六进制 rgb(255,0,0)或rgb(100%,0%,0%)
line-height：行间距
text-align：水平对其方式 center|right|left
text-indent：首行缩进 em
letter-spacing：字间距
word-spacing：单词间距
color:rgba(r,g,b,a)：颜色半透明
文字阴影 text-shadow:水平位置 垂直位置 模糊距离 阴影颜色

sublime快捷键

标签名+tab
div10 + tab
ul>li 有父子关系 ul>li5
div+p 有兄弟关系
.red #two 带类名或id 例如：.nav+.header+.main>.left+.right

内部样式表<style type="text/css">
行内样式表 <div style="color:blue;">
外部样式表 <link rel="stylesheet" href="style.css" type="text/css">

标签显示模式display
块级元素：h1-h6 p div ul ol li
行内元素：a strong b em i del s ins u span
行内快元素：img input td
块转行内：display:inline
行内转块：display:block

CSS复合选择器

交集选择器： h3.class{} p.red{} 标签选择器.类别选择器
并集选择器：div, p, span{}
后代选择器：div p{}
子元素选择器：.nav > li{}只选择亲儿子
属性选择器：a[title]{}
input[type=text]{}
div[class^=font]{} 表示以font开始
div[class$=footer]{} 表示以footer结束
div[class*=tao]{} 表示包含tao

伪元素选择器：

p::first-letter{} p::first-line{} p::selection{}当选择文字的时候
div::before{content："";}
div::after{content："";}

背景background

background-color
background-image: url(images/1.jpg); 背景图片
background-repeat: repeat-x|repeat-y|repeat|no-repeat 是否平铺
background-position: left top(top|bottom|left|right|center) 或 10px 10px;
background-attachment: scroll|fixed
background: #000 url(images/ms.jpg) no-repeat fixed center -25px;
背景透明：background: rgba(0,0,0,0.3);
背景缩放：background-size: 100px 200px 或 50%；
cover铺满 contain保证图片完整
凹凸文字：凸起：text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
凹起：text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;

文本的装饰：text-decoration：none|underline|overline|line-through

CSS三大特性

CSS层叠性 样式冲突，遵循的原则是就近原则。
CSS继承性
CSS特殊性 权重不同 类选择器权重 0,0,1,0 ； 标签权重0,0,0,1 ；ID选择器权重0,1,0,0；
伪类选择器权重0,0,1,0 ；!important权重最大
继承的权重为0

盒子模型

盒子边框 border：border-width border-style border-color;
border-width: 1px;边框宽度
border-color: pink;边框颜色
border-style: none|solid|dashed|dotted|double;边框样式
border-top-width: 1px;
border-top-color: red;
border-top-style: solid;
border-top: 1px solid red;
border: 1px solid blue;
表格的细线边框 border-collapse:collapse;边框合并
圆角边框：
border-radius: 10px;
border-radius: 50%;圆
border-radius: 10px 40px;左上角和右下角10px 右上角和左下角40px

内边距 padding

padding-left padding-right padding-top padding-bottom
padding:10px 20px;上下 左右
padding:10px 20px 30px;上10px 左右20px 下30px
padding:10px 20px 30px 40px; 上 右 下 左

外边距 margin

margin-left margin-top margin-right margin-bottom
margin:30px auto;水平居中 ；必须是块级元素和指定宽度
清除内外边距 *{margin:0;padding:0;}
行内元素只有左右外边距，没有上下外边距，尽量不要给行内元素指定上下的内外边距
外边距合并问题：垂直的块级元素，以最大的外边距为准

list-style: none;取消列表样式

CSS3盒子模型

box-sizing:  
        content-box:   盒子大小为width+padding+border 此值为其默认值，
其让元素维持W3C的标准Box Mode；
        border-box:    盒子大小就是width   padding和border不撑开盒子 

盒子阴影

box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸(影子大小) 阴影颜色 内外阴影(inset|outset)

浮动(float)

普通流(normal flow) 或文档流

块级元素自上而下显示

浮动(float)

使用display:inline-block；转换为行内块元素,就可以放在一行,但是元素之间有空隙,不方便处理
float: left;
浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动
子盒子的浮动不会压住父盒子的padding和margin
一个父盒子里面的盒子，如果其中一个子级有浮动的，则其他子级都需要浮动，这样才能一行对齐显示。
块级元素和行内元素添加浮动具有行内块的特性；
浮动的目的就是让多个块级元素在同一行显示

版心和布局流程

版心即可视区，一般在浏览器中水平居中显示
一列固定宽度且居中
两列左窄右宽型
通栏平均分布型

清除浮动

clear:both;
父级添加overflow:hidden;
使用after伪元素清除浮动

.clearfix:after{
      content:".";
      display:block;
      height:0;
      visibility:hidden;
      clear:both;
}
.clearfix{//*代表ie6,7能识别的特殊符号，zoom就是ie6,7清除浮动的方法
      *zoom:1;
}

使用before和after双伪元素清除浮动

.clearfix:before, .clearfix:after{
      content:"";
      display:table;
}
.clearfix:after{
      clear:both;
}
.clearfix{
      *zoom:1;
}

定位position

子绝父相的由来(子绝父相最合适)：

1. 相对定位 占有位置 不脱标
2. 绝对定位 不占用位置 完全脱标

定位水平居中：left:50%;margin-left:自身宽度的一半。
定位垂直居中：top:50%;margin-top:自身高度的一半。

固定定位：position:fixed;
固定定位的元素跟父亲没有任何关系，只认浏览器。
固定定位完全脱标，不占有位置，不随着滚动条滚动。

叠放次序：z-index:1;

只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位无此属性，亦不可指定此属性。

四种定位总结

静态static 不脱标，正常模式 不可以使用边偏移 正常模式
相对定位relative 不脱标，占有位置 相对自身位置移动
绝对定位absolute 完全脱标 ，不占有位置 相对于定位父级移动位置
固定定位fixed 完全脱标 ，不占有位置 相对于浏览器移动位置

定位模式转换

跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式。

元素的显示与隐藏

display:none;隐藏元素，不再占有位置 block显示
visibility:hidden;隐藏元素，占有位置 visible显示

overflow溢出

overflow：visible;默认的，超出显示
auto;超出显示滚动条
scroll;一直显示滚动条
hidden;超出部分隐藏

CSS高级技巧

鼠标样式

cursor: default | pointer | move | text

轮廓outline

outline:0 | none //取消轮廓线

防止拖拽文本域resize

resize:none;

vertical-align垂直对齐

vertical-align: baseline(默认) | top | middle(常用) | bottom
一般实现图片，表单和文字对齐

去除图片底部空白间隙

vertical-align:top | middle;

溢出的文字隐藏

word-break:自动换行

break-all;//允许单词拆开
keep-all;//不允许单词拆开
主要处理英文单词

white-space

normal;默认
nowrap;强制同一行显示所有文本

text-overflow文字溢出

clip;
ellipsis;//超出部分省略号
必须搭配overflow:hidden;white-space:nowrap;

---

滑动门

a{
margin:100px;
display:inline-block;
height:33px;
background:url(images/ao.png) no-repeat;
padding-left:15px;
}
a span{
display:inline-block;
height:33px;
background:url(images/ao.png) no-repeat right;
padding-right:15px;
}
<a href="#">
        <span></span>
</a>
//1.a设置背景左侧，padding撑开合适宽度
//2.span设置背景右侧，padding撑开合适宽度，剩下由文字继续撑开宽度
//3.之所以a包含span就是因为整个导航都是可以点击的

伪元素

div::before{
}
div::after{
}
div:hover::before{}//鼠标经过之后，前面插入一个伪元素

过渡

transition: 要过渡的属性 花费时间 运动曲线 何时开始
transition-property
transiton-duration:
transition-timing-function:linear | ease | ease-in | ease-out | ease-in-out
transition-delay
eg：transition: width 0.6s ease 0s,height 0.3s ease-in 1s;
transition:all 0.5s;

变形transform

移动： transform: translate(50px,50px);

translateX(100px),translateY(100px);
translate(50%);//不以父级宽度为准，以自己的宽度为准
//让定位的盒子居中对齐
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);

缩放

transform:scale(1.2,1.5);
//谁做动画，谁家过渡

旋转

transform:rotate(90deg);
transform-origin: top right;//设置中心点

倾斜

transform:skew(deg,deg);

3D变形

rotateX();
rotateY();
rotateZ();
透视perspective
perspective:500px;//视距越小，效果越好
translateZ()

#######动画
@keyframes 动画名称{//定义动画
from{}
to{}
}
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
eg:animation: go 2s ease 0s infinite alternate;//引用动画

伸缩布局

//父级元素添加 flex
display: flex;
min-width:280px;//最小宽度
flex-direction: row | column;
//子盒子添加份数，不跟单位
flex: 1;
margin: 0 5px;//盒子不会被挤下来；

justify-content调整主轴对齐

flex-start; //让子元素从父元素的开头开始排序
flex-end；//让子元素从父元素的后面开始排序，盒子顺序不变
center；
space-between; //左右的盒子贴近父盒子，中间的平均分布空白间距
space-around; //相当于给每个盒子添加了左右margin外边距

align-items侧轴对齐

flex-start; //上对齐
flex-end; //底对齐
center; //垂直居中
stretch；//让元素的高度适应父容器（子元素不给高度的前提下）

flex-wrap控制是否换行

nowrap; //不换行
wrap;//换行
wrap-reverse;//翻转

align-content

center；space-around; space-between; flex-start ; flex-end; stretch;

flex-flow是flex-direction，flex-wrap的简写形式

flex-flow: flex-direction flex-wrap;

order控制排列顺序

从零开始玩转前端与移动开发（第二阶段CSS3）