CSS
css.doyoe.com
Cascading Style Sheets
在标签中使用 style='xx:xxx;'
在页面中嵌入 <style type="text/css"> </style > 块
引入外部css文件 <link rel="stylesheet" type="text/css" href="mystyle.css"/>
１. 标签选择器
div a span ….
２. id选择器
#idname
３. class选择器
.classname
４. 关联选择器 --classname中间有空格
.classname .subclassname .subsub
５. 联合选择器 --classname中间有逗号
.classname,.classname,.classname
６. 属性选择器
如下：<div class=”con”><input type=”text” name=”username”/><input type=”text” name=”passwd” /></div>
找到username属性
<style>
.con input[type=”text”][name=”username”]{border:1 solid red}
</style>
找到自定义的属性
<div name=”con”>abc</div>
找到自定义属性con
<style>
div[name=”conn”]{border:1 solid red}
</style>
京东购物车的里的购物车图案其实是张大图，通过前面设置一个窗口后面设置一张背景图，通过对背景图的position来来完成
<style>
.ci-left {
top: 9px;
left: 18px;
width: 18px;
height: 16px;
background: url(//misc.360buyimg.com/jdf/1.0.0/unit/globalImages/1.0.0/jd2015img.png) 0 -58px no-repeat;
background-p_w_picpath: url(https://misc.360buyimg.com/jdf/1.0.0/unit/globalImages/1.0.0/jd2015img.png);
background-position-x: 0px;
background-position-y: -58px;
background-size: initial;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-p_w_upload: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
_background: url(//misc.360buyimg.com/jdf/1.0.0/unit/globalImages/1.0.0/jd2015img.png) 0 -91px no-repeat;
}
</style>
<div></div>
_background这个属性是只对IE6起效
margin padding
padding用例京东登录框
margin:0 auto;可以水平居中
position 定位
fixed --固定 absolute --绝对 relative -相对 (通常absolute与relative一起用)
参考 http://www.cnblogs.com/canuseethat/archive/2010/09/16/1827804.html
对于简单的
<div style=”top:10px;left:10px;background-color:red”>div-1</div>
<div style=”background-color:grey”>div-1</div>
它们只是一行红底和一行灰底，top 和 left没有起作用；如果加上position:relative；那么第一行将会向下向右移动10px,浮动在第二行上，第二行原来怎么样，现在还是怎么样;如果加上position:absolute;那么第一行会向下向下移动10px,并且会变成内联标签，浮动在上层，而第二行会获得第一行的位置向上挪
display
none --不显示
block ――定义为块级标签，前后带有换行符
inline ――定义为内联标签，前后没有换行符
float left right none inherit
定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止
style=”clear:both” --清除之前的样式
overflow
规定当内容溢出元素框时如何处理
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
hidden 内容会被修剪，并且其余内容是不可见的
透明度
img{opacity:0.4;
filter:alpha(opacity=40); --适用IE
-moz-opacity:0.4; --适用firefox }
z-index
属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，可以为负数
应用：例如京东注册页面中，点击《京东用户注册协议》，会在原先页面上通过设置z-index和 opacity覆盖一层，可以看到底层但是不能操作，然后在这一层上再设置一层，这一层用来显示协议，并等待用户点击同意
