CSS三

伪类选择器

---

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

背景

---

background-color      背景色
background-image：url(路径)     背景图片
background-repeat:   平铺
repeat   平铺
no-repeat  不平埔
repeat-x   横向平铺
repeat-y   纵向平铺
background-position    背景位置
top  |   buttom   |   center   |  left   |  right
background-attachment    背景附着 
scroll      背景滚动     fixed    背景固定
background-color: rgba(0,0,0,0.3)背景半透明

CSS三大特性

---

1.层叠性：就近原则
2.继承性：子标签会继承父标签属性
3.优先级:行内>id>类>标签

边框

border   外边框
border-width   边框宽度
border-style    边框样式
solid  实线     dashed  虚线      dotted  点线   
border-color   边框颜色
border-collapse  边框合并

内边距 (会把盒子撑大)

padding   内边框

外边距

margin   
marhin:auto    盒子居中 

插入图片和背景图片

---

插入图片我们用的最多比如产品的展示类移动位置只能靠盒模型
背景图片我们一般用于小图标背景或超大背景图

插入图片 img    移动位置可以通过margin  
背景图片background-images      自带方法移动

圆角边框

---

 border-radius: 50%;

盒子阴影

---

box-shadow
一共四个值第一个水平阴影，第二个垂直阴影，第三个模糊，第四个调整大小

浮动

---

float：left

定位

---

相对定位：会在自己原来位置上进行偏移 ，偏移之后会保留原来的位置
绝对定位：不会保留位置，一般用于自绝父相
固定定位：会固定在那个位置，随着页面滑动也不会消失

元素的显示和隐藏

---

display:none   不保留位置
visibility:visible   
visvility:hidden   保留位置
overflow:hidden 溢出隐藏

鼠标样式

---

cursor
default    默认的
pointer    小手
move       移动
text          文本
not-allowd   禁止 

轮廓线

---

一般不用outline，去掉
input  {
		outline：none；
		}

文本域

textarea {
	outline:none;
	resize:none;
	}

垂直居中

---

vertical只针对行内元素和行内块元素
 baseline 底部    middle  居中    top   顶部

文字溢出省略号

---

先强制一行内显示文本
white-space:nowrap
超出部分进行隐藏
verflow:hidden
将超出部分用省略号代替
text-overflow:elllipsis

css精灵技术

---

有效减少服务器接受和发送请求的次数，提高页面加载速度
将图片放在一张图片上通过postion进行定位

滑动门

---

a设置背景左侧，padding撑开合适宽度
span设置背景右侧，padding撑开合适宽度剩下由文字继续撑开宽度
之所以a包含span就是因为整个导航都是可以点击的