【php基础班】第7天 overflow属性、CSS引入方式、定位、布局、margin合并问题、浏览器兼容
第一节 overflow属性
1. overflow属性 hidden scroll auto
2. display属性 block inlineinline-block none
Block块显示
inline按行内显示
inline-block双重作用。既有行的特点又有块的特点
在一行内显示，有行高
None:不显示，display:none;
第二节 CSS引入的方式 行内，内嵌，外部
a) 行内
i. 在标签内部，直接使用style=”CSS规则”
ii. 容易写错：<p style=”color=red;”>文字</p>
1. 这个地方用冒号
b) 内嵌
i. 写在<head></head>中
ii. 写法
iii. <styletype=”text/css” >样式</style>
c) 外部
i. 通过link，将外部的样式表文件（*.css）,引入当前页面。
ii. 写法：
1. <linktype=”text/css” rel=”stylesheet”href=”*.css” />
2. Rel说明，当前文件与链接的文件是什么关系
3. Stylesheet样式表的关系。
4. Href:指定样式表文件在什么地方（路径）
5. 备注：我们在做网站时开发时，通常用的就是这种方式。
第三节 CSS优先级
当CSS冲突的时候
就近原则
行内样>内嵌样式>外部样式
行内样式>id>class>标签
//权重值，特性值
CSS继承
和文本相关的一般都会继承。、
边框，宽，高，margin,padding 背景等都不继承。
继承的权重为0
第四节 定位技术
1. xhtml+css 定位技术
DIV布局就是DIV+CSS，标准的说法应该是xhtml+css。是一种网站设计标准。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。CSS是英语Cascading Style Sheets（层叠样式表单）的缩写。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。div是html(超文本语言)中的一个元素,div+css是一种网页的布局方法,这一种网页布局方法有别于传统的table布局,真正地达到了w3c内容与表现相分离。div是标签 css是层叠样式表。
2. 定位属性：position:static fixed relative absolute
n position: （配合着定位坐标
u Left距左边， top距上边， right 距右边， bottom距底边
n ）
u static 静态，不定位
u fixed 固定， 脱离正常的文档流，比普通元素层级要高。相对于浏览器窗口进行定位。
u relative
l 相对定位。相对于谁？（相对于自己，霸道的相对）
u absolute
l 绝对定位，相对于最近的具有定位属性（不管是相对定位，或者绝对定位都可以）的元素进行定位。
n 脱离正常文档流，层级高于普通元素。
n 相对于它的祖先，有定位属性的祖先。
n 如果没有，相对于body定位。
n 相对定位与绝对定位
n 外层元素通常设置相对定位，不用坐标。
n 内层元素设置绝对定位。配合着定位坐标。
第五节 限时抢
第六节 margin合并的问题
n margin,上下合并（大吃小），左右叠加
第七节 常见布局
第八节 浏览器兼容性
浏览器市场份额：http://tongji.baidu.com/data/browser
常用兼容性技巧
初始化清除浏览器默认值及HACK法：
初始化清除浏览器默认值：ul,li,body{margin:0;padding:0}
.box{
color:white;
background:blue;/*ff,7*/
background:red\9; /*ie6 7 8*/
*background:black;/*ie6 7*/
_background:orange;/*ie6*/
}
第九节 HTML5
1. HTML5简介
HTML5前身为webapplications1.0,是作为下一代互联网标准，用于取代htm4.01和xhtml1.0.
增加了新的标签和属性
加强网页结构的语义化
增加本地存储等功能
万维网的核心语言、是超文本标记语言（HTML）的第五次重大修改,2014年10月28日，W3C万维网联盟宣布，经过近8年的艰苦努力，标准终于制定完成并发布。
广义HTML5：它包括，HTML5,CSS3,Javascript,API
HTML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准
http://www.chinaw3c.org/archives/677/
2.HTML5特性
• 语义特性
w 更好的意义和结构。更加丰富的标签
• 本地存储特性
w 基于HTML5开发的网页有更短的启动时间，更快的联网速度，这些全得益于HTML5 APPCache，以及本地存储功能
• 设备兼容特性
w HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。
• 网页多媒体特性(Class:MULTIMEDIA)
w 支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。
• 三维、图形及特效特性
w 基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。
• CSS3特性
w CSS3中提供了更多的风格和更强的效果
• ……
• 多设备跨平台
• 自适应网页设计
音频
• <audio></audio>
• src 音频的路径
• autoplay ＝“true,false”
• controls=“是否显示控制面板”
• loop =“” 循环的次数
• 格式：mp3,oga,wav
视频
• <video></video>
• src
• width
• height
• controls
• autoplay
• 格式：mp4,oga
新属性
• autocomplete(off,on) 自动完成，默认是打开的
• autofocus:自动获取焦点
• required：要求需要填写
新input类型
• url
• color
• date
• month
• time
• number
• tel
mark:高亮显示
progress:
布局小标签
• header
• nav
• footer
• article
• aside
• section
• details
• summary