CSS3
新增选择器
类选择器、属性选择器、伪类选择器,权重都为10(E[att]{ }权重为1(E)+10=11 ;E:first-child{}权重为1(E)+10=11 );伪元素选择器权重与标签选择器相同为1(E::before权重为1(E)+1=2)
属性选择器
语法:用中括号包裹属性名-->[属性名称],如:E[att] { } 表示选中具有att属性的E元素
● 利用 "属性=值" 来选择元素,如:E[att = value]{}表示选中具有att属性,且属性值为value的E元素
● 用"属性^=值" 选择元素,如:E[att^=val]{ }表示选中具有att属性,且属性值以val开头的E元素 (div[class=icon]{ }表示选中具有class属性且属性值是以icon开头的div元素)
● 用"属性=值"选择元素,如:E[att=值" 选择元素,如:E[att=值"选择元素,如:E[att=val]{ }表示选中具有att属性,且属性值以val结尾的E元素
● 用"属性*=值" 选择元素,如:E[att*=val]{ }表示选中具有att属性,且属性值中含有val的E元素
结构伪类选择器
主要根据文档结构来选择元素,常用于根据父级选择里面的子元素
● 注意!E:nth-child(n)与E:nth-of-type(n)用法基本相同。区别在于:前者是先选中第n个子元素,然后判断是不是E,若不是E,则样式不生效;后者是先选中指定的元素E,然后再确定是第几个E
● E:nth-child(n)是给所有子元素排序,然后选中第n个,再看是不是要选中的元素E;E:nth-of-type(n)是给指定的元素E排序,再选择指定元素E中的第n个
● 重点! E:nth-child(n)选中父元素中的第n个子元素E。括号中的n可以是具体的数字(具体的某一个元素)也可以是关键字和公式
● E:nth-child(even){ } ,其中even选择偶数序号的元素,odd选择奇数序号的元素(even、odd属于关键字)
● E:nth-child(公式) { },当公式为n时(这个字母必须是n),n会从0开始计算并自增,依次选中所有元素(0和超过元素个数的数字会自动跳过);当公式为2n时,依次选中偶数位置的元素;当公式为5n时,选中位置为5的倍数的元素;公式为n+5时,选中位置为5,6,7....的元素;公式为**-n+5**则表示选中前5个(n=0,1,2...)
● 拓展用法--> E:nth-last-child(n),选择倒数第n个元素
伪元素选择器
● 伪元素选择器可以利用css生成一个元素,而不用真正设置HTML标签,简化了HTML结构。before和after创建一个元素,属于行内元素(行内盒子),并且新创建的这个元素在文档树中是找不到的,因此称为伪元素
● element::before{ }在父元素element里面的内容最前面创建元素
● element::after{ }在父元素element里面的内容最后面创建元素
● 注意!在伪元素选择器中,必须要有一个content属性!element::before{ content: '';}
伪元素使用场景-->清除浮动。当父盒子不方便给定高度,而子元素都浮动脱标的情况时,父盒子无法由子元素撑开,高度为0,从而影响其他布局
● 1.额外标签法(隔墙法)
● 在最后一个浮动元素的后面插入一个块级盒子,并设置属性clear: both;
● 2.父元素添加overflow: hidden;
● 3.父级添加after伪元素
● CSS3盒子模型
● 通过box-sizing属性来指定盒模型
● box-sizing: content-box;(默认)即盒子大小为:width+padding+border
● box-sizing: border-box;盒子最终大小为width,即给定的宽度
● 这样设置给盒子加padding和border都不会撑开盒子了(前提是padding+border的值不超过width,超过了还是会变大的)
● CSS3过渡transition(重点)
● 过渡动画:从一个状态渐渐过渡到另一个状态
● 语法-->transition: 要过渡的属性 花费时间 运动曲线 何时开始 (注:transition属性通常要搭配 :hover伪类选择器来使用)。若要同时改变多个属性,则在上面的"何时开始"之后加一个逗号,在继续写下一个要变化的属性;也可以直接写一个all,然后再:hover中把要变化的属性写出即可
● 想要过渡的属性,有宽度高度,背景颜色,内外边距都可,若想所有属性都变化过渡,就写all
● 花费时间,单位为秒s
● 运动曲线,默认是ease(逐渐慢下来),可以省略
● linear匀速
● ease-in加速
● ease-out减速
● ease-in-out先加速后减速
● 何时开始,单位是秒s,可以设置延迟触发时间,默认是0s,可以省略
CSS3 2D转换transform
移动translate
● 语法-->transform: translate(x,y); 也可以单独写transform: traslateX(x);或transform: translateY(y); 其中x和y可以是具体数值(px),也可以是百分比(注意!这里用百分比的距离是盒子自身的宽高的百分比);此外translate对行内元素无效
● 移动盒子的方法:定位,外边距margin,2D转换translate
● transform: translate(x,y);移动盒子的优点:不会影响其他元素的位置
旋转rotate
● 语法-->transform: rotate(度数); 度数单位为deg,比如transform:rotate(45deg);度数为正数时顺时针,负数为逆时针;旋转中心点默认是元素的中心
设置转换中心点transform-origin
● 设置转换的中心点transform-origin: x y; (这种设置类似于背景位置的设置-->background-position: x y ;)可以通过设置x轴和y轴的位置来更改旋转、缩放等操作的中心点
● 默认的x和y都是50%,等价于center,即旋转中心是元素的中心
● x和y可以是方位名词top,bottom,left,right,center,也可以是具体数值px
缩放scale
● 语法-->transform: scale(x,y); 注意这里的x和y是不带单位的,是倍数的意思
● 2D转换综合写法
● transform: translate(x,y) rotate(180deg) scale(1.2);
● 注意:在进行综合写法时要注意将移动translate写在最前面,书写顺序会影响转换的结果(先旋转会改变坐标轴的方向)