css3知识总结1
一、选择器
1.属性选择器（IE7及以上支持）
E[attr]-只使用属性名，但没有确定任何属性值；
E[type=”value”]-指定属性名，并指定了该属性的属性值；
E[attr~=”value”]-指定属性名，并且具有属性值，此属性具有多个属性值，并且以空格隔开（即针对 attr=”value1 value2 value3” 的情况），而且等号前面的“~”不能不写；
E[attr^=”value”]-指定了属性名，并且有属性值，属性值是以value开头的（value可以是属性值的第一个字母）；
E[attr$=”value”]-指定了属性名，并且有属性值，而且属性值是以value结束的（value可以是属性值的最后一个字母）；
E[attr*=”value”]-指定了属性名，并且有属性值，而且属值中包含了value（value可以是单个字母）；
E[attr|=”value”]-指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）。
2.结构选择器（IE9及以上支持）
E:nth-child(n) 表示E父元素中的第n个子节点(n从1开始)。若该子节点是E元素，则有效果，若该子节点是其他非E元素，则无效果。
E:nth-last-child(n) 表示E父元素中的倒数第n个字节点，其他同E:nth-child(n)。
E:nth-of-type(n) 表示E父元素中的第n个E元素。
E:nth-last-of-type(n) 表示E父元素中的倒数第n个E元素。
E:first-child 表示E元素中的第一个子节点。
E:last-child 表示E元素中的最后一个子节点。
E:first-of-type 表示E父元素中的第一个E元素。
E:last-of-type 表示E父元素中的最后一个E元素。
E:empty 表示空的E标签。
E:only-child 表示E父元素中只有该E一个子节点。注意：子节点不包含文本节点。
E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点。
3.伪类
E:target 表示当前的URL片段的元素类型，这个元素必须是E。（IE9及以上支持）。
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
div{ width: 100px; height: 100px; background: #ededed; display: none;}
div:target{ display: block;}
style>
head>
<body>
<a href="#div1">div1a>
<a href="#div2">div2a>
<div id="div1">div1div>
<div id="div2">div2div>
body>
html>表单：
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio
E~F表示E元素后面的F元素
E:checked和E~F结合模拟单选框
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
label{
margin: 0 5px;
float: left;
overflow: hidden;
position: relative;
}
label input{
position: absolute;
left: -50px;
top: -50px;
}
span{
display: block;
width: 30px;
height: 30px;
border: 1px solid #999;
}
input:checked~span{
background: orange;
}
style>
head>
<body>
<label>
<input type="radio" name="tab" />
<span>span>
label>
<label>
<input type="radio" name="tab" />
<span>span>
label>
<label>
<input type="radio" name="tab" />
<span>span>
label>
body>
html>文本：
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时
比如：选中后的文字背景为灰色
p::selection{
background: #ededed;
}E::before 生成内容在E元素前（配合content使用）
E::after 生成内容在E元素后（配合content使用）
Content 属性
p::before{
content: 'My name is Della';
}二、文本
颜色模式：rgba（0-255,0-255,0-255，0-1）
文字阴影：text-shadow：x y blur color, x y blur color…；
应用：文字模糊效果
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
p{
font-size: 40px;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
color: rgba(0,0,0,1);
}
p:hover{
color: rgba(0,0,0,0);
text-shadow: 0 0 8px rgba(0,0,0,0.5);
}
style>
head>
<body>
<p>我说了所有的谎p>
body>
html>文字描边：-webkit-text-stroke:宽度 颜色（只有webkit内核支持）。
文字排列方式：direction (全兼容)
rtl 从右向左排列
ltr 从右向左排列
注意要配合unicode-bidi 一块使用
p{
width: 200px;
direction: rtl;
unicode-bidi: bidi-override;
}文字溢出省略号：
p{
width: 200px;
border: 1px solid #999;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}三、弹性盒模型
浏览器内核前缀：
-webkit-：Safari，Chrome
-moz-：Firefox
-o-：Opera
在使用弹性盒模型的时候，父元素必须要加display:box 或 display:inline-box（box或inline-box需加前缀）；
box-direction：元素排列顺序(加前缀)
-normal 正序
-reverse 反序
box-ordinal-group：设置元素的具体位置(加前缀)
.box div:nth-of-type(1){
-webkit-box-ordinal-group: 3;
}
.box div:nth-of-type(2){
-webkit-box-ordinal-group: 1;
}
.box div:nth-of-type(3){
-webkit-box-ordinal-group: 2;
}-webkit-box-flex：定义盒子的弹性空间。
.box div:nth-of-type(1){
-webkit-box-flex: 1;
}
.box div:nth-of-type(2){
-webkit-box-flex: 5;
}
.box div:nth-of-type(3){
-webkit-box-flex: 3;
}-webkit-box-pack：对盒子水平富裕的空间进行管理
start 所有子元素在盒子左侧显示，富裕空间在右侧
end 所有子元素在盒子右侧显示，富裕空间在左侧
center 所有子元素居中
justify 富余空间在子元素之间平均分布
-webkit-box-align：在垂直方向上对元素的位置进行管理
star 所有子元素在据顶
end 所有子元素在据底
center 所有子元素居中
盒模型阴影：
-webkit-box-shadow:[inset] x y blur [spread] color
参数
inset：投影方式
-inset：内投影
-不给：外投影
x、y：阴影偏移
blur：模糊半径
spread：扩展阴影半径，先扩展原有形状，再开始画阴影
color：阴影颜色
倒影：
-webkit-box-reflect（目前只在chrome实现）
-webkit-box-reflect: below 0px -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,1) 100%);三个参数：
倒影方位：above|below|left|right
倒影距本体的距离（可选）
渐变（可选）
resize：自由缩放，一定要配合overflow:auto
both 水平垂直都可以缩放
horizontal 只有水平方向可以缩放
vertical 只有垂直方向可以缩放
resize: both;
overflow: auto;box-sizing 盒模型解析模式
标准盒模型：实际的宽/高 = width/height + 2padding + 2border;
怪异盒模型：width/height就是该盒子的大小，是包含内边距padding和边框border宽度在内的(这种情况发生在html文档中没有文档声明的情况下);
doctype声明，让浏览器使用标准模式。
box-sizing:content-box，采用标准模式解析计算，默认模式；
box-sizing:border-box，采用怪异模式解析计算；
分栏布局：（webkit内核可用）
column-width：250px 栏目宽度
column-count：4 栏目列数
column-gap：20px 栏目距离
column-rule：1px solid #cccccc 栏目间隔线
四、新增UI样式
圆角：
border-radius:1-4个数字 / 1-4个数字
前面是水平半径，后面是垂直半径，不给“/”则水平和垂直一样。
border-radius: 20px； ——1个值：四角都一样
border-radius: 20px 40px；——左上&右下20px，右上&左下40px
border-radius:10px 20px 40px；——左上10px，右上&左下20px，右下40px
border-radius:10px 20px 30px 40px；——左上10px，右上20px，右下30px，左下40px