css3基础

1.属性选择器

[attr=val],[attr*=val],[attr`=val],[attr$=val]

2.结构性伪类选择器

root、empty,target(与a href ="#xx"),first-child,last-child,

nth-child(a*n+b),nth-last-child(){注意要选择的子元素：nth-child(n)先去找父元素在相对父元素所有子元素计算（）里的值 odd 奇数 even偶数}

Nth-of-type(){不存在上述问题只找同类型元素}

3.元素状态伪类（伪元素注意加前缀-webkit-，-moz-,-o-,-ms-）

E:hover,active,focus,enable,disable,read-only,read-write,checked,default,indeterminate,::selection(对文本的选择) before after

用before after可以实现插入文本、图像、编号等（content属性）

优点可以为编写页面节省时间，用其添加的图片可以打印出来，追加的背景图不可以

Content:attr(alt);可以将某个属性值显示为标题等 open-quote/close-quote

添加多个标题：

h1:before{content:counter(mycounter) '.';}

H1{counter-increment:mycounter;counter-reset:subcounter;}

H2:before{content:counter(subcounter) '.';}//h2:before{content:counter(mycounter)'-'counter(subcounter)'.';}//中编号嵌入到大编号里子编号是重新开始的

H2{counter-increment:subcounter;margin-left:20px;}//

4.对文字与字体相关样式

添加文字阴影：text-shadow:x-len y-len m-radius color;可以指定多个阴影div{text-shadow:3px 3px 2px #f39800,5px 7px #ccc,-2px -4px 3px #c0ff00}

文本自动换行：word-break:normal,keep-all(只能在半角空格或连字符处) break-all（允许在单词内换行）

让长单词与url自动换行：word-wrap：break-all

字体服务端web Font与 @font-face ：

属性 font-style,font-variant(normal small-caps inherit ),font-weight,font-stretch(字体是否收缩 normal wider narrow ultra-condensed extra-condensed semi-condensed semi-expanded extra-expanded)

@font-face{ font-family:WebFont; src:url('') foramt("opntype")} div{ font-family:WebFont; font-style:italic;font-weight:bold;}

使用客户端字体

@font-face{ font-family:Arial; src:local('Arial'); }

Font-size-adjust:修改字体种类时保持字体不变

5.盒类型

block inline inline-block

float 会浮动上去现代浏览器水平间距 iE6有3px inline-block 并列显示时元素以bottom 垂直现代浏览器会有水平间距

text-overflow:

Inline-table :是table块元素可以嵌入行内
list-item : 将元素是为列表
run-in: 若元素后面还有block元素则被包含在里面
compact：若元素后面还有block元素则至于左侧
table ，inline-table，table-row（tr） table-cell（td th） table-row-group（tbody） table-header-group(thead),table-footer-group,table-colum(col),table-caption)
overflow: auto, scroll hidden, visible
while-space空白符 pre-line (空白符合并允许自动换行保留换行符)
normal （空白符合并允许自动换行忽略换行符）

                                        nowrap      （空白符合并不允许自动换行忽略换行符）
                  pre      （保留换行符空白符不自动换行）
                  pre-wrap （保留空白符换行符允许自动换行）

text-overflow:ellipsis(神略符号) 要同时与 nowrap （空白符合并不允许自动换行忽略换行符）一起使用
box-shadow: 10px 10px 5px #ccc;可以叠加
box-sizing：content-box/border-box/padding-box
background-clip:border/padding/content
background-origin:content/border/padding 内容绘制的位置
background-size：width height
background-position：

border-radius

border-image:url() a b c d/border-width topbottom leftright(repeat stretch round);

变形

transform

1.rotate(xxdeg)旋转

2.scale(num)放缩

3.skew(xxdeg/xxdeg yydeg)倾斜

4.translate(xxpx yypx); 平移

transform-origin:left top;基点

动画

transition：property duration timing-function

eg : -webkit-transform:left 1s linear,-webkit-transform 1s linear;…….

Animation的功能

@-webkit-keyframes mycolor{
0%{………可以使多个属性值…………},
50%{……………………},
.….….….….….….…...
}

div.demo:hover{
-webkit-animation-name:mycolor;

-webkit-animation-duration:5s;

-webkit-animation-timing-function:linear;

}

timing-function(linear/ease/ease-in/ease-out/ease-in-out)

多栏布局与盒布局：解决display|float的底部不齐的缺点

-webkit-column-count:x; -webkit-column-xem;

display:-webkit-box|-moz-box

区别：

多栏布局栏与栏之间的宽度必须相等，另外使用多栏布局是不可能具体指定什么烂显示什么内容适合于显示文章不适于安排整个网页

弹性和布局： (子元素)自适应宽度-moz-box-flex:num(当父元素设置widthheight设置至少一个元素为该属性则填满父元素) ; 改变显示顺序：-moz-box-oridinal-group:num;

定义父元素改变排列方向：-webkit-box-orient:vertical|horizontal;

垂直水平居中：

文字text-align:center;

div元素(默认排列方式h)的垂直居中css3 box-align:center;（start|center|end）

流媒体：

@media screen|all|print|braille… and(exp)

颜色-alpha hsl(色调饱和度亮度)

rgba设置的透明不影响文字 opacity 会影响文字 transparent 背景文字边框全透明

outline-color|style|width

outlin-offset:num

resize:none|both|horizontal|vertical|inherit

color…:initial 取消

弹性盒布局

box-flex：<number>

默认值：0

取值：

<number>：

使用浮点数指定对象所分配其父元素剩余空间的比例。

#box{display:box;240px;height:100px;margin:0;padding:10px;list-style:none;}
.box li{50px;padding:7px;}
#box li:nth-child(1){box-flex:1;}
#box li:nth-child(2){box-flex:1;}
#box li:nth-child(3){box-flex:2;}

从上面的代码，我们可以知道a,b,c的宽度分别为50+7*2=64px，三者加起来即192px，所以剩下的240-192=48px才是父元素的剩余空间，于是a,b,c按照设定的1:1:2来分配这48px，a分得12px，b分得12px，c分得24px，所以最终a=64+12=76px，b=64+12=76px，c=64+24=88px

媒体查询

字体

Text-shadow：length length length color;（横向距离、纵向距离、模糊半径、颜色）

多个字体阴影以逗号隔开。

Word-break 让文本自动换行（normal、keep-all、break-all）

Word-wrap让长单词与URL地址自动换行（break-word）

使用服务器端字体 web font 与@font-face

@font-face{

font-family:webfont;

src:url('font/Fontin_sans_R_45b.oft') format('opentype');

}

format使用文件格式有两种OpenType ------对应的文件扩展名.otf

TrueType -------对应的文件扩展名.ttf

在IE下，只能使用微软自带的Embeded OpenType字体，文件扩展名.eot 不需要是使用format。

Font-size-adjust修改字体种类而保持字体尺寸不变。

盒相关样式

overflow、overflow-x、overflow-y、text-overflow

Text-overflow:ellipsis，可以在盒的末尾先是一个代表省略的符号“…”。但是text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围有效。

多出内容显示"…"

div{

overflow:hidden;

text-overflow:ellipsis;

-webkit-text-overflow:ellipsis;

-o-text-overflow:ellipsis;

white-space: nowrap;

300px;

border: 1px solid red;

}

Box-shadow:length length length color;（横向距离、纵向距离、模糊半径、颜色）

div{

-moz-box-shadow: 0 0 50px gray;

-webkit-box-shadow: 0 0 50px gray;

300px;

height: 400px;

}

Box-sizing --- 指定针对元素的宽度与高度计算方法 (content-box、border-box、在FF中还可以为padding-box

)

div {

box-sizing:

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

-ms-box-sizing: content-box;

}

多栏布局

column-count:n ---将一个元素中的内容分为多栏进行显示。

使用多栏布局的时候，需要将元素的宽度设置成多个栏目的总宽度

column- ----设置每一栏的宽度而不设定元素的宽度。指定每栏宽度而不设定元素的宽度的话，则需要在元素外面单独设立一个容器元素，然后指定该容器的元素宽度。否则指定的每栏宽度被浏览器视为未设定。

Column-gap: 用来设置多栏之间的间隔距离。

Column-rule: 在栏与栏之间增加一条间隔线，并且设定该间隔线的宽度、颜色。

盒布局

display: -webkit-box;

盒布局与多栏布局的区别：

使用多栏布局时，各栏宽度必须相等的，在指定每栏宽度时，也只能为所有栏指定一个同意的宽度，栏与栏之间不可能不一样。也不可能具体指定什么栏中显示什么内容。

-webkit-box-flex:n -----使盒布局变为弹性盒布局。

box-ordinal-group: ----改变各元素的显示顺序。该属性使用一个表示序列号的整数属性值，浏览器在显示的时候根据该序列号从小到大来显示这些元素。

-webkit-box-orient:vertival /horizontal-----------改变元素的排列顺序。将元素从水平方向改为垂直方向。从垂直方向改为水平方向。

对元素使用多个box-flex:

如果多个元素使用相同的box-flex，则多个元素的高度相等，其它元素不变。

多个元素使用box-flex，而且box-flex的值不一样时。会将剩余的空白部分按比例分给各个box-flex元素。

box-pack和box-align属性用来指定元素中文字、图像以及元素水平方向或垂直方向上的对齐方式。

水平垂直居中：box-pack:center; box-align:center;

FlexBox布局

伸缩容器（flex containers）是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目（flex items）

伸缩容器有一个CSS属性“flex-flow”用来决定伸缩项目的布局方式。如果伸缩容器设置了“flex-flow”值为“row”，伸缩项目排列由左向右排列：

如果“flex-flow”值设置为“column”，伸缩项目排列由上至下排列：

这里将展处样设置伸缩容器，使用伸缩项目在一行中显示：

.container {

display: flex;

flex-flow: row;

}

一个伸缩容器中的所有伸缩项目既可以排列在单行也可以多行排列。这个主要由“flex-flow”是否设置为“wrap”来决定。如果伸缩容器设置了“wrap”属性值，当伸缩项目在伸缩容器中无法在一行中显示的时候会另起一行排列。

这里展示了如何将伸缩容器设置为“wrap”:

.container {

display: flex;

flex-flow: row wrap;

}

Media queries

@media screen and (min-1000px){

}

@media screen and (min-640px) and (max- 999px){

}

@media screen and (max- 639px){

}

@important url(corlor.css) screen and (min-1000px)