CSS05

复习昨天知识

浮动

Float:left |  right

    特点：

      ☞浮动的元素不占位置（脱标）

      ☞可以将行内元素转化为行内块元素

　　☞块级元素在一行上显示

      ☞设置了浮动的元素，影响其后面的元素

   作用：

　　　　☞解决文字图片环绕问题

　　　　☞制作网页导航栏

　　　　☞网页布局

 

清除浮动：

　　清除浮动的影响。

 

定位

 

☞静态定位（static）

☞绝对定位（absolute）看脸型

            ◆绝对定位绝对脱标（不占位置）

            ◆行内元素转化为行内块元素

            ◆如果父盒子没有设置定位，以浏览器左上角为基准设置定位

            ◆如果父盒子设置定位，  以父容器左上角为基准设置定位

☞相对定位（relative）自恋型

            ◆看自己的位置设置定位

            ◆相对定位没有脱标，占位置

            ◆子绝父相（子元素设置绝对定位，父元素设置相对定位）

                一般情况下会使用子绝父相。

 ☞固定定位（fixed）

            ◆固定定位也脱标了（不占位置）

            ◆行内元素转化为行内块元素

新知识

盒子居中

Margin:0   auto; 只能让标准流下的盒子居中显示

 

定位的盒子居中显示（重要）

 

    ◆先走父盒子宽度的一半： left:50%;

    ◆往回走自己宽度的一半

 

 标签包含规范

     ☞div可以包含任何标准流下的元素

     ☞ p标签中不能包含div 和 标题标签 及列表标签。

     ☞标题标签可以包含其他标签。

     ☞行内元素最好不要包含其他标签。

 

规避脱标流

           ☞网页布局过程中，能用表流布局就用标准流布局。

           ☞标准流不能解决用浮动

          ☞浮动不能解决用定位

           ■使用margin-left| margin-right  取值为auto可以将盒子自动冲到另一边。

 

图片与文字垂直对齐

 

   每一种inlne-block元素  都有一个默认的vertical-align:baseline

  ☞vertical-align:middle  垂直对齐。 vertical-align与inline-block更搭配。

 

 

 Css可见性

 

 

     ☞overflow: hidden     将超出部分进行隐藏

 

     ☞display:  none 直接将元素隐藏

 

　　　   　 display：block       将元素显示(与js配合更搭)

 

     ☞visibility:hidden 将元素隐藏

 

   　　　　 display: none;    将元素隐藏后不占位置

 

　　　　　 visibility: hidden; 将元素隐藏后占原来的位置

 

 

内容移除文字（logo优化）

 

或者

 

 

 

 精灵图使用（重点）

     ☞浏览器中的坐标系

            圆点以右为正方向，圆点以下为正。

 

     ☞CSS精灵是一种处理网页背景图像的方式。精灵图也是一种背景图片

     ☞精灵图的使用

           ◆使用fw一定要用打开的方式打开精灵图

           ◆使用精灵图作为背景图片的时候，常与background-position配合使用

           ◆测量精灵图中的元素的坐标使用矩形选择器

或者使用快捷键  字母：  k

 

 

制作精灵图步骤

       选择透明文档

 

 

 

滑动门  （次重点）