css3笔记

E+F 选择器：找的是当前的后面的一个兄弟
E~F选择器： 找的是后面的所有兄弟
属性选择器：E[att];
eg:当前选中input，并且具有name属性input[name]{};
E[att=value];具有name属性，并且name属性等于username1的那一个input[name=username1]{}；
E[att^=value]: eg：input[name^=user]以user开头的
E[att$=value]：eg：input[name$=name]以name结尾的
E[att*=value]： eg：包含谁的

a：link未访问的链接
a：visited已访问的链接
a：hover鼠标移动到连接上
a：active选定的链接

focus：选中之后会发生样式改变
eg：input[name=username]：focus{}；
当元素的宽度窄，内容的宽度宽时：
中文：换行；英文没有空格不换行，有空格会在有空格的地方换行

伪类选择器和伪元素选择器的区别
伪类选择器：一定是真实存在的，例如：ul1 li：first-child，第一个孩子是真实存在的
伪元素选择器：不是真实存在的，建议用两个冒号：：，例如div6 ::first-line，第一行第一个字母不是真实存在的，看看是否存在这个元素

nth-child，选择的是第n个孩子，2n是偶数，2n+1是奇数，n是从0开始的，整个表达式从1开始
nth-child 检查的就是第几个孩子，比如说p是父元素的第二个孩子，但是是nth-child （1），就无法选中，必须同时满足这两个条件既是父元素的第一个，还得是p
nth-of-type检查的是这个类型的第几个孩子

empty，选中孩子为空的，注释算空
not：#ul1 li：not（.aa）{}选中ul1下的li里面className不是aa的.注意：not后面传入的是一个选择器
网页里的根节点是html
before，after的里面一定要有content，而且插入的这个都是行级元素，并且插入在内容的前面和内容的后面
什么叫元素塌陷？
子元素浮动，没有东西撑着父元素，父元素没有设置高，高就变成0了，造成了塌陷
解决塌陷的几种方法：给父元素设置定高（最好的办法也是最笨的办法）；
overflow：hidden；
父元素浮动；
给父元素定位；
想不让谁塌陷，就给谁加一个class，clearfix
.clearfix：：after{
content:”“；
display:block;
clear：both；//清除浮动
}
.clearfix{
overflow：auto；
zoom：1；
}
clear只能清除浮动，对定位没什么用
border-radius：50%；变成圆
空格是子孙后代，>是亲子代（有兼容性问题IE6用不了），直接相连是其满足前面的又满足后面的选择器
css3里面最重要的表格
前缀 浏览器
-webkit-xxx chorme和safari
-moz-xxx firefox
-ms-xxx IE
-o-xxx opera
xxx 标准
开启怪异盒模型的方式是去掉
怪异盒模型：高度宽度指的是内容+border+padding
w3c标准下的盒模型指的是内容
这两者和offsetwidth无关，offsetwidth取到的永远都是内容+border+padding
eg:width：200px；
padding：10px；
border：10px；
当输出offsetWidth的时候，怪异盒模型在IE6输出200，chorme输出240，w3c标准下的盒模型输出240

弹性盒模型
父元素：box，display：box（5种都需要写）
子元素：bos-flex，占父元素的份数，去分父元素的剩余空间，而不是整个的父元素的空间，flex是大于1的整数

box-align：垂直方向上的位置
box-pack：水平方向上的位置
justify：两端对齐

给你一个元素，如何让它水平垂直都居中？
行级元素：
给父元素加text-align:center;line-height: (height);
块级元素：
margin 0 auto
1.定位50%
margin-top，margin-left都变成负的自己的宽高的一半
2. 定位50%
transform：translate（-50%，-50%）；
3.给父元素加webkit-box
box-align：center
box-pack：center

transform：
transform:rotate(30deg)以中心顺时针旋转30度，负的时候逆时针旋转
transform-origin:left top;旋转中心：左上，一般情况下中心是center center
transform:translate(水平，竖直)，位移右下为正
scale：倍数>1放大，<1缩小（水平，垂直）
skew：切变(扭曲) 正：左

transition:width 2s linear 1s
(过渡) 属性 多少时间完成 匀速或变速 延时时间

要用animation，需要先写一个关键帧
eg：div{
width：200；
animation: xx 3s ease forwards
}
@keyframes xx{
0%{
width： 400px；
}
50%{
width： 600px；
}
100%{
width： 800px；
}
}
刚开始会在400px的地方开始动

transition会停在最后一帧，animation如果不设置的话会回到第一帧，想留在最后一帧的话可以加forwards00222255555
transform-style: preserve-3d:使被转换的子元素保持3D样式，设置在父元素中
perspective(视角):定义3D元素距视图的距离，物体到屏幕的距离，跟眼睛到屏幕没什么关系
给父元素加：有整体感，在舞台上，在左边看和右边看是不一样的
给子元素加：每个小元素相当于一个独立的舞台，所有的都一样，没有整体感

保持3d -webkit-transform-style：preserve-3d

让容器四周都有阴影:水平和垂直都不设置值，然后给个模糊程度，给个外延
box-shadow: 0 0 5px 5px rgb(0,0,0);

background-size:图片大小:一个100px 垂直会等比例缩放，第一个数字水平，第二个数字垂直，100%是按照水平方向的，cover是把整个覆盖，contains是有一个到达了边界就停止

skew没有3d

溢出文本显示省略号（单行）：
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;

未完待续。。。