《2天轻松驾驭DIV+CSS》笔记

《2天驾驭DIV+CSS》
1、div+css 的叫法是不准确的，标准叫法是XHTML+CSS；
2、table的目的是存储数据，div是为了架设页面结构，两者职能不同，没有谁优谁劣。

3、W3C是World Wide Web Consortum的缩写，中文为W3C组织或万维网联盟，是出一系列网页标准的，包含结构、表现和动作标准。

4、四种样式的优先级按照“就近原则”：行内样式>内嵌样式>链接样式>导入样式，建议使用链接样式。

5、HTML页面中的元素就是通过CSS选择器进行控制的，有四种：标签、ID、类、通用选择器。

①标签选择器：就是一般的标签；
②ID选择器（id）：一个HTML页面只能使用一次，用“#”引用；
③类选择器(class)：一个标签可以用多个类选择器，不同值用空格分开，用“.”引用；
④通用选择器：对整个网页中的标签进行样式定义，用“*”引用。

6、无论什么样的选择器，只要有公共的CSS代码就可以用“选择器的集体声明”，起到精简代码的作用（类似小学的“提取公因式”）。

7、选择器的嵌套，如：
#div1 p a{color:#900;}
/*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/
8、CSS命名规则：要让不懂代码的人看了也知道这块起什么作用。

（以后选择第二个后面单词首字母都大写）
9、HTML标签包含块状元素和内联元素（div和p标签是块状元素，a标签是内联元素）
①块状元素：可容纳内联元素和其他块状元素，排斥与其他元素位于同一行，width 和height起作用。

②内联元素：只能容纳文本或其他内联元素，允许其他内联元素同位一行，但width 和height不起作用。

如果要让宽高起作用，可以把内联元素转化为块状元素，语句：display：block；
10、【第二课】浮动
#redBlock{
margin:20px 0 0 20px; /*上右下左*/
float:left; /*两个都加float才能处于同一行*/
}
#blueBlock{
float:left;
}
11、IE6双倍边距BUG出现要满足以下三个条件：
●要为块状元素；
●要左侧浮动；
●要有左外边距（margin-left）
●【解决办法】在css属性中加入“display：inline；”
12、clear:both：清除某一方块对下面产生的作用（即影响），但不会影响它本身的浮动。

13、渐变背景：将渐变背景切割为一个宽度为10p的小图，然后水平方向平铺（repeat-x）即可。

14、如何实现背景的显示顺序？最实用的就是设置为不同的盒子的背景，如先html，再body。

15、绝对路径不利于搜索引擎表现，相对路径在搜索引擎中表现良好。

16、有图片的时最好设置图片色的背景颜色，这是为了保证网速较慢、图片还没加载完成时先显示背景，增强用户体验。

17、图片
①Html中加入图片：
②Css中插入背景图片（渐变图片，横向拉长）：
18、激活状态的栏目是不受鼠标的移入和移出影响的，这时需要专门定义一个类选择器navActive，此时只要把在需要激活的栏目上加上这个class即可。

如首页：
展示效果：
19、在不设置div高度的情况下，无论内部元素再多也会自适应的办法：overflow：hidden
20、banner里面的图片大小为1000px*292px，无论图片原本大小，只要在#banner内，就是这个宽高。

21、每段文字都会缩进两个文字，每段文字距离下段文字之间的距离是30px
22、定位（只需设定TRBL中任意相邻两个即可）
a.Absolute：绝对定位，定位与父级内部某个位置，不受父级padding影响
1）如果没有TRBL和父级又存在文本，则以它前面最后一个文字的右上角为原点定位，但不隔开文字，覆盖于上方。

2）总结：要保证布局页面不错位需要满足的条件：设定TRBL，父级设定position 属性。

【满足以上两点才以父级为定位，否则以浏览器定位】
b.Relative：相对定位，布局页面，受到父级padding影响
1）如果没有TRBL和父级又存在文本，则以文本的底部为原点定位并将文字断开。

2）总结：不管有无父级或TRBL，均是以父级的左上角进行定位，但父级的padding 属性会对其影响。

23、CSS Hack是解决页面不能很好兼容多种浏览器的技巧方法，不会通过官方W3C认证。

1)！important：解决一些IE6显示效果与IE7/8/9/FF上效果不一样的情况。

IE6不能识别“！important”语句，会跳过它；其他浏览器可以识别，且拥有绝对优先级。

2)*：解决一些在IE6/7上显示效果与IE8/9/FF上效果不一样的情况，IE6/7可以识别，其他的不可以。

24、CSS Sprite: 单个图片方便修改，如果将图片整合，那么浏览器向服务器提交请求就会大大减少！
25、text-indent:2em：首行缩进两个文字的高度（因为汉字是方块字），只能加在块状元素上面。