css基本常识

1，默认所有的元素都是跟父元素有margin和padding的，所以一般使用*{margin:0;padding:0}来清楚样式

2，margin:0 auto可以让该div元素水平居中显示，line-height设置为该div的height可以让该div垂直居中显示

3，清楚ul无需列表前面的小点:ul{list-style:none}

4，关于float属性的解释：html默认从上到下，从左到右排列，遇块换行。给元素设置float属性之后，该元素就可以从标准流中脱离出来，进行左右浮动，紧贴着父元素的左右边框，有none(默认值),left,right

5，设置文字水平居中:text-align:center

6，多级选择#header .inner li a{}是分层次的多级选择，类似于路径，不是并列设置样式。并列设置的格式为#header， .inner， li， a{}

7，为链接去掉下划线已经设置文本样式

a{//多级选择
text-decoration:none;#去掉下划线
color:;
font-color;
}

设置a的鼠标放上事件

a:hover{
background:;
color:;
display:block;
}

8，字体，文本样式可以继承，即外层传给子层

9，设置背景图的时候，默认平铺，因此需要no-repeat;

10，当一个DIV设置了浮动之后，其后的DIV都会浮动，因此需要clear清楚浮动，有left right both三个值

11，solid表示实线

12，overflow:表示当子元素超出父元素大小时的处理方式，可能值为：
visible:默认,不做任何处理
hidden:超出部分被裁剪掉
scroll:加上滚动条
auto:当超出时会有滚动条，不超出则没有滚动条
inherit:规定从父元素继承。
overflow:一般放在父元素上，规定子元素超出时的显示状态

13，display:将普通内联元素变成块级元素，可能的值为：
block:变成块级元素
inline:把块级变成内联元素
inline-block:设置区块元素不要独占一行，如果能容下则不占一行
none:隐藏该元素

14，每个盒子其实都是有厚度的
内边距:边框和内容区之间的距离,通过Padding来设置
padding: a b c d;
a表示上，b表示右，c表示下，d表示左
如果写两个表示上下,左右

15，外边距：边框距离外围空白区域的距离就是外边距，上右下左，注意body默认跟外面是有间距的，所有的元素都是默认有外边距的，一般是10px。

16，即使div宽度很小，但是div是块级元素，会独占一行，浮动可以让某个div元素脱离标准流，漂浮于标准流之上

17，clear:清楚浮动
left:不允许左边有浮动的对象
right:不允许右边有浮动对象
both:两边都不允许有浮动对象

18，多个元素设置浮动：被设置成浮动的元素会组成一个流，并且会，横着紧挨排队，直到父元素的宽度不够才会换一行

19，相对定位与绝对定位:
positive:relative;
此时要配合left top bottom right使用,表示偏移量,即会在原来的位置再偏移，注意不是页边距，而是漂移
left right只能用1个,top和bottom只能一个
即相对定位是相对原来的位置漂移

positive:absolute
也要配合left right top bottom使用
设置的偏移值在页面的左上角，
即不是相对原来的位置，而是根据整个页面的左上角来偏移
left right只能用1个,top和bottom只能一个
为元素设置绝对定位之后，元素不会再占据原来的空间，脱离原来的流

positive:fixed
固定定位：
也要配合left right top bottom使用
固定定位是相对浏览器的窗口进行定位,与绝对定位有区别是不受滚动条影响

重叠元素的堆叠顺序:必须要配合定位来使用
z-index:设置的值越大越在上层，可以为负值，设置重叠元素的顺序

20，块级元素相对于父元素居中
1 元素设置宽度
2 margin的4个值都设置为0 auto即可

21，当需要同时设置多个标签属性时，中间用,隔开即可
p, h1, body...{}

22，浮动元素和非浮动元素之间需要间隙时，只能在浮动元素中设置margin，否则没有反应

23，让背景图居中：
background:url() 0px center no-repeat;

24，构造列表
ul或者ol配上li使用
从元素中取出指定class的子元素
ul.list li.li-0 //list和li-0都是class的名称
ul也是块级元素
list-style:去掉ul前面的小点
li是块级元素，可以加上高度
text-indent:设置文本缩进
ul.list{height:31px;border-bottom:1px solid #ccc;
line-height:31px;font-family:微软雅黑;
text-indent:30px;}

25，内联元素：只占元素长度，块级元素：占一行长度

26，CSS中子和父的概念：嵌套的元素是父元素，被嵌套的元素是父元素，一个元素的上一级即父元素，下一级为子元素，下N级(N>0)为后代元素

27，元素的宽度和高度若用百分数表示，则相对于父元素的高度和宽度，width="50%" height="50%"表明宽度和高度都站父元素的50%。

28，a是内联元素，不独占一行

29，title="鼠标悬停时显示的内容"，target="_blank"设置新标签中打开链接

30，块级元素可以嵌套内联元素，内联元素不可嵌套块级元素。内联可以嵌套内联，快级元素可以嵌套块级

31，使用map标签来为图片局部区域添加标签
<img usemap="#id"></img>

<map id="id" name="id">
<area shape="rect" coords="a,b,c,d" alt="" href="" targety="_blank">
<area shape="rect" coords="a,b,c,d" alt="" href="" targety="_blank">
<area shape="circle" coords="a,b,r" alt="" href="" targety="_blank">
</map>

32，<optgroup></optgroup>可以给Option分组

33，css简单选择器:

id选择器:
#id{.....}
类选择器
.class{},一个标签可以有多个类<p class="class1 class2"></p>
标签选择器
body{backgroud:url() norepat;}

34，css复杂选择器：

交集选择器
一个标签选择器后边跟一个类选择器或者一个ID选择器,中间不能有空格，它要求必须是属于某一个标签的，并且声明了类选择器或者ID选择器，例如：
div.mycolor{class为mycolor的才会被选择}
div#mydiv{id为div的层才会被选中}
并集选择器
就是多个选择器以逗号相连，只要满足其中之一都会被选中
div,p,h1,div.mycolor,div#mydiv{}
后代选择器
是以空格相连的多个选择器，外层的选择器写在内层选择器前面
根据元素的后代关系来作为筛选的条件
div h1.first span.firstletter{}

伪类选择器,选中的是某个状态,标签:状态
a:hover{}
div:hover{font-size:;color:;}
p:hover{}

通配符选择器:
*{}

35，font-size属性可以继承，text-indent:文本缩进

36，text-align:left/right/center文本对齐
line-height:文本行高
word-spacing:单词间隔，只作用于英文单词
letter-spacing:字母间隔，可以作用于单词和汉字
text-decoration:underline/none:文字下划线
font-family:字体
font-style:normal/italic/oblique:字体风格
font-weight:normal/bold：文本加粗

样式继承:以上文本属性都可以继承。不需要继承的话，可以冲掉继承，在style1后面加上style2，可以冲掉style1

37，默认的background-color:tramsparent。background-image:url(a.gif) repeat-x/repeat-y/no-repeat 

38，边框
border:1px solid/danshed #ccc//solid和dashed表示实线和虚线
border-left, border-right, border-top, border-bottom可以分别加上边框

39，cursor:pointer//鼠标放上显示手型

40，制作导航时设置li浮动可防止换行

display:block；将链接改为块基本元素
然后设置width：设置宽度
a{
display:block;
width:;
text-align:center;
line-height:;
}

41，设置元素的左右移动，使用margin来实现

42，font-family:a b c d//若电脑中有字体a则使用a，否则依次用b,c,d

43，text-aligh:可以继承

43，有的时候margin无效果的时候就试试padding
44，label和input换行,将label的display变成block

45，label的for属性
<label for='id1'>
<input id="id1">
当点击label时，光标会定位到input上

46，img默认是内联元素，form是块级元素

47，设置样式单独对某个浏览器有用
_background:;ie6有效
+background:;ie7有效
backgound:\0;ie8有效
background:\9;ie9有效

48，设置边框：border:none或者border:0px solid #ccc;

49，text-align：对所有的内联元素都有用，包括img

50，text-decoration:line-through;加删除线

51，子元素设置float之后，父元素就失去高度

52，CSS三种写法的优先级:
1,行内样式
2,内页样式
3,外部样式

53，设置不透明度：
使用CSS设置不透明度时，由于IE浏览器与其他标准浏览器设置不一样，所以需要两行
opacity:0.9，取值范围:0.0,1.0对于谷歌、火狐、IE9以上
filter:alpha(opacity=90);取值范围0,100，对IE6,7,8有效