记录学习----前端笔记02

CSS新属性

背景缩放
background-size: xxxpx;只改一个值 等比例缩放
background-size: xx%;
background-size:cover; ----->常用
图片进行等比例缩放 图片一定要保证宽度和高度同时满足盒子的大小，势必会有图片超出 溢出部分会被隐藏
background-size:contain;
保证图片等比例缩放 宽度和高度只有一个满足盒子的框高，就停止缩放 保护图片完整，但是有部分背景盖不住

多背景图片
一个元素可以设置多重背景图像
每组属性间使用逗号分隔
如果设置的多重背景图片之间存在交集，前面的背景图会覆盖在后面的 背景图纸上
为了避免背景颜色将背景图片盖住，通常间背景色定义在最后一组 ----不放在最后一组不能正常显示颜色和图片

盒子模型
盒子模型的稳定性
width>padding>margin
margin会有外边距合并的问题，并且在ie6中会有下面外边距双倍的问题

css3的盒模型
box-sizing
content-box 就是以前的盒子 会被撑大的盒子
border-box 不会被撑开的盒子

结构伪类选择器
直接写父元素 :nth-child时选择的不论子元素的类型，直接选择第几个孩子
li:frist-child 选择的是li的父元素的第一个孩子li孩子 如果第一个不是li那么没有任何效果
first-child
last-child
nth-child()
nth-child(even) 偶数
nth-child(odd) 奇数
nth-child(2n) n=0,1,2… 公式进行选择—公式中第一个不能写数字
需要前a 则写nth-child(-n+a)
nth-last-child() 从最后一个孩子开始数
E:first-of-type : 指定类型E的第一个
E:last-of-type : 指定类型E的最后一个
E:nth-of-type(n) : 指定类型E的第n个

目标伪类选择器
:target{}
用于选取当前活动的目标元素

属性选择器
选取带有某些带有特殊属性的标签选择器
a[title] 带有title的a标签
a[input=text] 属性值完全等于
a[class^=font] font开头的class
a[class$=font] font结尾的class
a[class*=font] 任意位置有font的class

类选择器 属性选择器 权重是0010

button disabled 禁用按钮

伪元素选择器
::first-letter 选择第一个字
::first-line 选择第一行
::selection 选中文字的样式

::before   ::after
div::before {
    content=""; 
}

在盒子内部的前面插入内容（行内）
不是真正意义上的元素
权重为0001
必须有content属性

文字阴影
text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色;
可以多组设置 用逗号隔开
凹凸文字
上左白色下右黑色 凸
反之凹