标签：
css的分类（位置）：
css层叠样式表
1.内嵌 样式表
2.行内样式表
3. 外连
css选择器分类
基础选择器
标签
id选择器
类选择器
复合选择器
交集选择器（标签指定式） span.one
后代选择器 .one .two
并集选择器 （集体声明） .one,.two
通配符选择器 * 所有标签
body, h1{font-size:12px;}
<body>
<div></div>
<span></span>
<h1></h1>
</body>
伪类选择器
a:link
a:visited
a:hover
a:active
lv h a
背景：
背景颜色
背景图片 background-image:url(xxx.jpg);
背景平铺 -repeat: no-repeat
背景位置： -position:
background-position: top left center 方位名词
background-position:3px 10px; 精确像素
background-position:10px center; 这个背景图片 离横坐标是10像素的距离
fixed
边框：
border-color
border-width
border-style 样式 solid 实线
一个属性里面有多个值 ： 复合属性
border:1px solid #f00;
border-top
1.盒子模型（box）
盒子模型是我们css+div 的入门门槛 .
盒子模型的重要参数：
border 盒子边框
内部距离 内边距 内补白 padding
外边距 margin
方位 top left right bottom
2.margin 复合属性 （参数个数的写法）
这种写法同样适合于 padding
这样要求：
盒子距离上边距是 100px 下 是 200px 左边是0px 右边是20px
margin-top:100px;
margin-bottom:200px;
margin-left:0;
margin-right:20px;
简写： margin:100px 20px 200px 0;
margin:100px; （一个参数）
表示 上下左右都是100像素。
margin: 100px 30px; （两个参数）
表示 上下是100 左右是30
margin: 100px 30px 10px; （三个参数）
表示 上是100 左右是30 下是10
margin: 10px 20px 30px 40px;(四个参数)
表示 上是10 右是20 下是30 左是40 （顺时针）
3.关于padding的问题(盒子的实际大小)
padding会影响盒子大小.
盒子实际大小： 盒子本身大小+border+padding
例如： 一个盒子宽度 100 边框 是 10 内边距是20 问这个盒子实际大小是：
盒子=100+10*2+20*2 160 像素
152
100 +40 +12
100 = padding +border
88 + 5 + 1 =100
最终的大小240 = 盒子本身宽 +border + padding
240= 220 + 2+ 12+6
特别注意：
不是所有的padding都会影响盒子的大小。
如果这个盒子没有高和宽就不会影响盒子大小。
4.几个小点
4.1firebug 的使用 ctrl+shfit+c 测试元素 f12 调出
4.2稳定性：
盒子本身的宽和高是最稳定的 （高度剩余法）
其次是padding 值
最后margin值。
所以，我们本着的原则是：能用padding的地方就不要用margin。
其实，padding 也可以看做是盒子本身的宽度和高度。
4.3清除浏览器内外边距
这个是我们写网站css 的第一句话。（必须写）
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
4.4让盒子居中对齐
margin:0 auto;
注意： 让盒子内部的文字或者图片居中对齐： text-align:center;
但是让盒子居中对齐： margin：0 auto;
margin:auto 也行，最常用的还是margin：0 auto;
注意：这个盒子应该是块级元素。而且必须有宽。
4.5代码的书写顺序
1. 先集体声明清除浏览器样式
2. 声明body 字体大小 颜色 字体
3. 声明a 链接样式。
resize:none 不让火狐拖动文本域
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>评论页面</title> <style type="text/css"> body,div,ul,li,h1,h3,h4,h2,textarea,input,p{margin:0; padding:0;} body{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#3c3c3c;} a{color:#000; text-decoration:none;} a:hover{color:#F00; text-decoration:underline;} .box{ width:725px; height:220px; border:1px solid #abc; margin:0 auto; margin-top:100px; padding-left:25px; padding-top:30px;} .box h3 a{font-weight:normal; color:#F00; text-decoration:underline; margin-left:10px;} textarea{ width:670px; height:80px; border:1px solid #abc; margin:15px 0; padding:10px; font-size:12px; color:#CCC; resize:none;} p{margin-top:15px; color:red;} </style> </head> <body> <div class="box"> <h3>评论 <img src="images/110.jpg" /><a href="#">俺要打分</a></h3> <textarea>请输入您对的意见或者建议！！</textarea> <input type="image" src="images/tj.jpg" /> <p>暂时没有评论</p> </div> </body> </html>
5.<label></label> 标签
for id 来使用
<style type="text/css"> *{margin:0; padding:0;} .box{width:300px; margin:100px auto;} .search{width:175px; height:20px; border:1px solid #ccc; color:#CCC; background:url(search_03.png) no-repeat 5px center; padding-left:25px;} label{color:#3c3c3c; font-size:14px;} </style> </head> <body> <div class="box"> <label for="sear">搜索一下：</label><input type="text" value="请输入搜索内容..." class="search" id="sear" /></div> </body> </html>
1. Background:red; 除了颜色之外没有其他样式
Background-color:red; 只针对于颜色
-image repeat
Background-position : x y ;
a:link a:visited a:hover a:active
边框 上下左右 top right left bottom
内边距 padding
外边距 margin
盒子大小：
1. 盒子实体大小： 盒子本身宽和高+padding+border
2. 盒子的最终大小： 盒子本身的宽和高+padding+border+margin
Margin：10px 20px 30px 40px
*{margin:0; padding:0;}
设计网页代码写法:
(1) 清除浏览器样式 *{margin:0; padding:0;}
(2) 页面的整体声明： body { font-size:12px; c} ul ol
(3) 链接 a{color:blue;} a:hover{color:red;}
1.如果让斜体(em i) 变成正常字体： font-style:normal;
如果让加粗的字体 变成正常字体 ： font-weight:normal;
em{font-style:normal;}
盒子模型 边框
Textarea Resize 设置是否可以拖动 火狐默认是可以拖动的 resize:none; 不允许拖动
firefox 火狐浏览器
Firebug 火狐浏览器插件
Fireworks 图像处理软件（ps）
Fw dw ps flash 网页四剑客
Ps 装饰装潢 平面 网页
Fw 创造出来就是为了网页
外边距塌陷的规则
刚开始 人们觉得margin 塌陷是个bug 后来才发现，所有的浏览器都这样。
所以就不算bug
2. 外边距 只会在垂直之间产生塌陷；水平之间不受影响；
3.垂直之间塌陷的原则是以两方最大的外边距为准；50 100
4.只有两个盒子的垂直外边距完全接触才会触发。
一般情况下，垂直两个盒子出现这种情况下，比较少（并列）
出现情况比较多的是，嵌套关系的盒子。急需要我们去解决。
解决方法：
1. 给大盒子指定一个边框。可以解决 ，如果不希望看到边框，可以改成白色。
2. 溢出 overflow:hidden 大盒子加
overflow 溢出
visible| auto| hidden| scroll
Auto 内容如果超出，则显示滚动条 否则 不显示滚动条
Scroll 不管超不超出，则都显示滚动条。
hidden 超出的部分，不显示。
white-space
white-space： nowrap 强制一行内显示直到文本结束或者碰到<br/>
cursor 鼠标
.ani .cur
cursor:url(mao.ani); 设置鼠标样式
Cursor:pointer; 所有的浏览器都能识别
word-break:break-all;
适合长英文句自动换行。
浮动
3.1.标准流
标准流实际上就是一个网页内标签元素正常排列的顺序的意思；比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现列外的情况叫做标准流布局；
3.2. 浮动
Float ：left right
浮动是我们学习的第一种脱离标准流的方式；也就是说它不受文档流的限制，按照另外的一种方式去布局；
记住！学习浮动，浮动有一个主要的作用是可以让多个盒子水平排列，并且他是一种严格的对齐方式！
浮动找浮动， 不浮动找不浮动
一列固定宽度且居中
两列固定宽度且居中
转载请备注。
标签：
原文地址：http://www.cnblogs.com/brittany/p/4833725.html
