09-05总结

1，CSS选择器，大家写css选择器的时候，能共用的选择器尽量提取出来

2，差距生成的呢？

每天比别人落后一点，时间长了就跟不上了

这也是一个态度的问题

总之，不要指望老师放慢速度，自己尽快适应

3，选择器的继承

和CSS样式优先级，有类似之处

关联的选择器 > id选择器 > 类选择器 > 元素选择器

越精确的优先级越高

4，CSS常用的属性、值

字体属性：

Font-size：字体大小

Color：字体颜色

Font-style：字体样式  italic是斜体

Font-weight：字体加粗

Font-family：字体族谱  宋体 、黑体...

控制文本的属性

Letter-spacing：字母间隔

Word-spacing：文字间隔

背景属性

Background-color：背景颜色

Background-image：url() 背景图片

Background-repeat：背景平铺：

Background-attachment：背景附件：

Background-position：背景位置

DIV+CSS来布局网站

21世纪初，2000年左右，网站

搜索引擎，开始反思了：如何判断一个网是好是坏？

结果：看内容，看搜索引擎抓取内容的速度

Div+css-----div只写内容，然后css控制他的样式

1，由于之前的table，布局网站，层层嵌套，导致搜索引擎抓取的障碍增大，所以被淘汰，div 抓取内容比较顺利

2，Table----显示的时候，等整个table框架加载完毕一块显示，div---加载一部分显示一部分，如果页面太长的话，导致后面可能会出现空白

但是，网站布局也并不是绝对的，现在 数据报表，后台管理方面 table比较方便的

DIV+CSS布局网站的优点：

1，内容、显示相分离；

2，提高工作效率

3，利于改版和维护

4，利于搜索引擎优化

5，代码简洁，提高访问速度

盒子模型：

调试工具：

IE系列浏览器： IE Tester

非IE系列的浏览器：FF---Firefox 火狐浏览器---Firebug插件

工具---附加组件----Frebug---安装

安装软件：尽量不要出现 中文、特殊字符、空格

任何一个html的标签我们都可以看成是一个容器（盒子），既然有盒子肯定有 宽（width）、高（height），边框（border），内容和边框之间有一个空隙（padding），如果有多个盒子，会存在盒子与盒子之间存在边距，margin

需求1：

需求2：盒子这两个字 和包含他的盒子的 间距稍微大一点

需求3：盒子两个字 居中显示

 

 

 

 

注意：

1.

如果缺少左外边距的值，则使用右外边距的值。

如果缺少下外边距的值，则使用上外边距的值。

如果缺少右外边距的值，则使用上外边距的值。【上 右 下左】

padding：10px  ; 默认四个填充为10px;

padding：10px  20px;  对称值为 10 20 10 20;

padding：10px  20px  30px;  第四个值为20px;

 

2.absolute对文本流的处理采用浮动  脱离直接文本流读取

  relative不对文本流进行干预

 

3.goole chrome    和 fire fox   对margin-top的效果需要条件（float：left）的干预才能成效 IE 无差别