css第五天.ppt

* /wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/ * * css基础第五 复习浮动（float） 1：浮动 语法：float:left | right 特点：浮动不占位置；浮动脱离标准流；浮动实现模式转换 2：清除浮动 1：给父元素设置高度 2使用clear:both 3：父元素添加 overflow：hidden 4：使用伪元素清除浮动 .clearfix:after{content:; height:0; line-height:0; display:block; visibily:hidden; clear:both} .clearfix{zoom:1} 3:浮动作用：网页导航制作，网页布局 复习 定位（position） 1:定位分类 语法 介绍 position:static 静态定位 position:absolute 绝对定位 position:relative 相对定位 position:fixed 固定定位 1：静态定位（static） 按照标准流的显示方式 取消定位：position:static 2：绝对定位(absloute) 看脸型 特点：1 绝对定位不占位置 2 绝对定位脱离标准流 3绝对定位模式转换 4 父元素以浏览器左上角为基准 5 子元素以父元素左上角为基准 3：相对定位（relative) 自恋型 特点：1：相对定位占位置 2:不能实现模式转换 3:以元素本身左上角为基准 4：子绝父相（子元素设置绝对定位，父元素设置相对定位） 4：固定定位（fixed）固执性 特点：1 不占位置 2：固定定位也可以说实现模式转换 复习 css初始化 及 overflow 方法 1：css初始化作用 -------解决浏览器默认样式导致兼容性问题 写法参见 淘宝，新浪，腾讯css初始化 2：overflow 定义了当文本超出边框时显示方式 overflow:visible 默认值。内容不会被修剪，会呈现在元素框之外。 overflow:hidden 内容会被修剪，并且其余内容是不可见的。 overflow:scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 步骤：1 设置父盒子为相对定位 2 设置子盒子left值为父盒子宽度一半 3 设置子盒子左边距为自己宽度一半 总结：margin:0 auto 只能让在标准流的盒子居中 高级技术知识之定位盒子居中显示 css标签包含规范 规范： 1：行内元素尽量里面包含行内元素 不推荐: a href=”#” h2 标题 /h2 /a 2: 有些块级元素不能包含其他块级元素 标题标签，段落标签不能包含div 尤其是P标签不能包含div 规避脱标流 由于浮动，定位都脱离了标准流，会对网页布局造成一定的影响，在以后的网页布局中优先考虑：标准流，浮动，定位 使用margin-left:auto 规避脱标 margin-left:auto 让盒子左侧充满 margin-right:auto 让盒子右侧充满 margin:0 auto 居中对齐的由来 规避脱标流之 让图片和文字垂直对齐 使用 vertical-align:middle 让行内，行内块元素设置垂直距离 vertical-align:middle 常与 display:inline-block 配合使用， 表格对此属性最敏感 css可见性 overflow:hidden;