前端基础div+css.ppt

标准： p哥写的不是HTML，是寂寞。/p p我说：br/不要迷恋哥，哥只是一个传说/p 最佳： p哥写的不是abbr title=Hypertext Markup LanguageHTML/abbr，是寂寞。/p pcite我/cite说：br/q不要迷恋哥，哥只是一个传说/q/p title 元素的额外信息 html标签：/tags/index.asp 1、所有书写均在英文半角状态下的小写； 2、id，class必须以字母开头； 3、所有标签必须闭合； 4、html标签用tab键缩进； 5、属性值必须带引号； 6、!-- html注释 -- 7、/* css注释 */ 8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签； 9、p,dt,h标签 里面不能嵌套块属性标签； 10、a标签不能嵌套a； 11、内联元素不能嵌套块； 第四天 浮动 inline-block/float（浮动） 回顾:inline-block 特性： 1、块在一排显示 2、内联支持宽高 3、默认内容撑开宽度 4、标签之间的换行间隙被解析（问题） 5、ie6 ie7不支持块属性标签的inline-block（问题） float浮动： 1、块在一排显示 2、内联支持宽高 3、默认内容撑开宽度 4、脱离文档流 5、提升层级半层 float/文档流 float:left | right | none | inherit; 文档流是文档中可显示对象在排列时所占用的位置。 浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。 clear:left | right | both | none | inherit；元素的某个方向上不能有浮动元素 clear:both; 在左右两侧均不允许浮动元素。 清浮动方法 1.加高 问题：扩展性不好 2.父级浮动 问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！） 3.inline-block 清浮动方法： 问题：margin左右自动失效； 4.空标签清浮动 问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差） 清浮动方法 5.br清浮动 问题：不符合工作中：结构、样式、行为，三者分离的要求。 6.after伪类 清浮动方法（现在主流方法） .clear:after{content:;display:block;clear:both;} .clear{zoom:1;} after伪类： 元素内部末尾添加内容； :after{content添加的内容;} IE6，7下不兼容 zoom 缩放 a、触发 IE下 haslayout，使元素根据自身内容计算宽高。 b、FF 不支持； 浮动兼容性问题 IE6双边距BUG（IE6下块属性标签浮动，并且有横向margin，横向margin加倍。）： a、IE6 b、浮动 c、横向margin d、块属性标签（加display:inline;） IE6下 li部分兼容性问题： a、左右两列布局，右边右浮动IE6 IE7下折行；(左边元素浮动) b、IE6 IE7 li 下元素都浮动 在IE6 IE7下 li 下方会产生4px间隙问题；（加vertical-align:top；） vertival-align / img问题 vertical-align 垂直对齐方式 a、加垂直对齐方式的同排元素都要加垂直对齐方式； b、垂直对齐方式可以解决元素下方间隙问题； 图片下方间隙问题 a、display:block; (改变标签本身特性) b、overflow:hidden; (必须知道图片高度) d、vertical-align (暂时最完美的方案) 第五天 定位 表格 如何让图1中的div2移动到如图2上的位置； 思路：哪些css命令能够影响盒子显示的位置呢？ relative相对定位/定位偏移量 position:relative; 相对定位 a、不影响元素本身的特性； b、不使元素脱离文档流； c、如果没有定位偏移量，对元素本身没有任何影响； 定位元素位置控制 top/right/bottom/left 定位元素偏移量。 absolute绝对定位/定位层级 position:absolute; 绝对定位 a、使元素完全脱离文档流； b、使内嵌支持宽高； c、块属性标签内容撑开宽度； d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移； e、相对定位一般都是配合绝对定位元素使用； z-index