html5高级

css

display：inline-block 框内行

块元素的特征

• 1.在没有设置宽度时，默认充满一行
• 2.默认独占一行
• 3.支持所有css命令

内嵌（内联、行内）的特征

• 1.同排可以继续跟同类的标签
• 2.内容撑宽度
• 3.不支持宽高
• 4.不支持上下margin
• 5.代码换行被解析

inline-block特征

• 1.块在一行显示
• 2.行内属性标签支持宽高
• 3.没有宽度的时候内容撑开宽度
• 4.代码换行被解析（两个inline-block之间会有个空白间距）（问题）
• 5.ie6、ie7不支持块属性标签inline-block（问题）

发现好店练习要求

1.考虑标签语义化，使用合适的标签
2.标签特性的转换
3.小竖线使用哪种方式进行编码(图片、边框、背景颜色、字符)
4.文字的行高设置
5.标签默认样式的处理(reset css)

1.合理应用标签，标签语义化
2.样式的配合，标签特性的转换
3.思考：模块之间的边框如何重合？

float

文档流是文档中可显示对象在排列时所占用的位置。
浮动：使文档脱离文档流，按照指定的方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

float的特征

• 1.块在一排显示
• 2.内联支持宽高
• 3.默认内容撑开宽度
• 4.脱离文档流
• 5.提升层级半层

清除浮动的方法

• 1.加高度
  问题：扩展性不好
• 2.给父级加浮动
  问题：页面中所有元素都加浮动，margin左右自动失效（floats bad！）
• 3.inline-block清除浮动
  问题：margin左右auto失效
• 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下还要添加.clear{*zoom:1;}

BFC（block formatting context）标准浏览器

• a、float的值不为none
• b、overflow的值不为visible
• c、display的值为table-cell，table-caption，inline-block中的任何一个
• d、position的值不为relative和static
• e、width|height|min-width|min-height（！auto）

haslayout IE浏览器

• a、writing-mode:tb-rl
• b、-ms-writing-mode:tb-rl
• c、zoom:(!normal)

overflow:hidden 清浮动方法

• 问题：需要配合宽度或者zoom兼容IE6IE7
• overflow:scroll|auto|hidden;
• overflow:hidden;溢出隐藏

浮动练习

1.必须用浮动布局（对浮动的知识点进行检验）
2.必须清浮动
3.结构、标签语义化
4.思考：扩展性，以后维护起来更方便

定位 position

相对定位的特征

• a、不影响元素本身的特性
• b、不使元素脱离文档流（元素移动之后原始位置会被保留）
• c、如果没有定位偏移量，对元素本身没有任何影响
• d、提升层级

绝对定位的特征

• a、使元素完全脱离文档流
• b、使内嵌支持宽高
• c、块属性标签内容撑开宽度
• d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移
• e、相对定位一般都是配合绝对定位元素使用
• f、提升层级

fixed 固定定位

z-index 层级定位

透明度

• 标准不透明度 opacity:0~1;
• IE滤镜 filter:alpha(opacity=0~100);/*IE6、7下的透明度设置*/

定位练习要求

1.定位的使用
2.层级的理解和应用
3.导航练习，当hover的时候需要有变化
4.相对定位和决定定位的配合使用
5.透明度的配合使用

表格/表单

表格标签

• table 表格
• thead 表格头
• tbody 表格主体
• tr 表格行
• th 元素定义表头
• td 元素定义表格单元

表格样式重置

• table{border-collapse;}单元格间隙合并
• th,td{padding:0}重置单元格默认填充
• <table border="1"></table>加属性border可以让表中的每个单元格都有一个边框，而设置table{border: 1px solid #000;}只有table外围有边框

单元格合并

• colspan 横向 删除该行()多出的单元格
• rowspan 纵向 删除每一行()多出的单元格

表单/表单元素

form表单

• <input type="" name="" value="" />
• text 文本框
• password 密码
• radio 单选
• checkbox 复选
• submit 提交
• reset 重置
• button 按钮
• image 图片
• file 上传
• hidden 隐藏

label 标签为input元素定义标注

<input type="checkbox" name="" id="a" />
<label for="a"></label>

checked 在页面加载时默认选定的input元素

<input type="checkbox" name="" checked />

disabled 属性规定应该禁用input元素

<input type="checkbox" name="" disabled />

select/option下拉选框

• 对高度的支持不兼容；

textarea 文本域

• 各个浏览器下的滚动条显示不兼容
• css3新增resize调整尺寸属性

表格表单练习要求

一、表格练习
1.表头、表主体的划分
2.单元格的合并
3.思考：在同一个table标签里如何处理行之间的空隙
二、表单练习
1.表单与表单控件的配合使用
2.单选可以使用图片，也可以直接使用表单的单选控件
3.思考：布局结构如何做到一个统一化

兼容性

css常见问题

• H5标签兼容
  IE6不识别 如header section footer 解决方法：通过js去动态的创建标签，创建的标签为自定义标签，默认为内联元素，document.createElement(“header”);所以还需要给元素设置样式display:block;但是每个标签都自定义会比较麻烦，可以使用插件html5shiv.js兼容h5标签
• 元素浮动之后，能设置宽度的话就给元素加宽度。如果需要宽度是内容撑开，就给它里边的块元素加上浮动
  第一块元素浮动，第二块元素加margin值等于第一块元素，在IE6下会有间隙问题
  解决方案：1.不建议这么写 2.用浮动解决，第二块元素也用浮动而不是加margin
• IE6下子元素超出父级宽高，会把父级的宽高撑开
  解决方案：不要让子元素的宽高超过父级
• p包含块元素嵌套规则
  p、td、h标签不要嵌套块元素，在chrome下会有问题，块元素会自动把这些标签分开自动结束
• margin兼容性问题
  1.margin-top传递 解决方法：触发BFC、haslayout
  2.上下margin叠压 解决方法：尽量使用同一方向的margin，比如都设置top或者bottom
• display:inline-block
  解决方案:*display:inline;*zoom:1;
• IE6最小高度问题
  IE6下最小高度19像素；解决方案：overflow:hidden;
• IE6双边距
  当元素浮动后再设置margin就会产生双倍边距
  解决方案：针对IE6 7添加*display:inline;
• li里元素都浮动 li在IE6 7 下方会产生4px间隙问题
  解决方案：针对IE6 7 添加*vertical-align:top;
• 浮动元素之间注释，导致多复制一个文字问题
  两个浮动元素中间有注释或者内联元素并且和父级宽度相差不超过3px
  解决方案：1.两个浮动元素中间避免出现内联元素或注释 2.与父级宽度相差3px或以上
• IE6 7父级元素的overflow:hidden 是包不住子级的relative
  解决方案：针对IE6 7 给父级元素添加相对定位 *position:relative;
• IE6下绝对定位元素父级宽高是奇数，绝对定位元素的right和bottom值会有1px的偏差
  解决方案：避免父级宽高出现奇数
• IE6下绝对定位元素和浮动元素并列绝对定位元素消失
  解决方案：浮动元素和绝对定位元素是同级的话定位元素就会消失，所以只要让他们不处于同级就可以避免
• IE6下input的空隙
  解决方案：给input元素添加*float:left;
• IE6下输入类型表单控件背景问题
  解决方案：设置background-attachment:fixed;

css hack

hack 黑客？ （原意：修改）
针对不同的浏览器写不同css样式的过程，就叫css hack！
\9 所有的IE10及之前版本的IE浏览器
+* IE7及IE7以下版本的ie浏览器认识
_ IE6及IE6以下版本的ie浏览器认识
远离css hack

PNG24兼容性问题

IE6不支持png24图片
解决方案：

• js插件（问题：不能处理body之上png24）

  DD_belatedPNG.fix('xxx');

• 原生滤镜

  _background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='xx.png',sizingMethod='crop');

样式优先级、提升样式优先级

默认 < 类型 < class < id < style(行间) < !important
!important提升样式优先级权重

<!–[if IE 6]>
<script type="text/javascript" src="下载下来的JS路径"></script>
<script>
DD_belatedPNG.fix('CSS选择器, 应用类型');
</script>
<![endif]–>