显示 、 列表 、 定位

1、浮动 元素 对 父层元素带来的影响

   影响：一个元素内如果包含了浮动元素，那么该元素的高度可能会变成0。

   原因：浮动元素 脱离了 文档流，理论上讲，就不在父层容器内

   解决方案:

       1、显示设置父层元素的高度

       2、通过overflow:hidden 来撑起父层元素的高度

******************************************************************

1、显示方式

   1、块级元素

      <div></div>

      hn

      p

      特点：单独占一行

   2、内联元素/行内元素

      span , b , i , u , s , a

   display属性:

      改变元素的显示方式 比如：由行内 改变成块级

   取值:

       1、none

          隐藏,让生成的元素没有框
 特点：隐藏之后在页面不显示，并且不占据页面空间

       2、block

          让行内元素 变成 块级元素
 使用场合：想显示修改行内元素的宽度和高度的时候，可以将其显示形式设置为 block(块级)

       3、inline

          将 块级元素 更改成 行内元素

       4、inline-block

          行内块
 特点：本身为行内元素，但是具备块级元素的特点
       多个行内块会在同一行内显示，但是可以改变其宽度和高度
 使用场合：想改变行内元素的宽度和高度的时候去使用

2、显示效果

   属性：visibility

   作用：真正实现元素显示 与 隐藏的

   取值：

       1、visible 

          默认值，元素可见

       2、hidden

          隐藏，元素可以隐藏，但是空间依然保留

       3、collapse

          用在表格上，删除一行和一列时不影响表格的布局

   visibility 与  display 的区别

   1、visibility 是真正实现元素的 显示与隐藏的

      而 display 是改变元素的显示方式的。

   2、visibility:hidden ，能够实现元素的隐藏，但是会占据页面空间

      display:none ，没有显示方式，能实现元素的隐藏，并且不会占据页面空间

   3、visibility取值：hidden,visible,collapse

      display取值：none,block,inline,inline-block

3、opacity

   透明度

   属性：opacity

   取值：0 - 1 之间的小数

         值越小，越透明
值越大，越不透明

4、vertical-align

   属性：vertical-align

   取值：top ， middle ，bottom ，baseline(基线对齐)

5、cursor

   当鼠标放在某个元素上时，可以改变鼠标的显示状态

   属性：cursor

   值：

      default 默认

      pointer : 小手

      crosshair : +

      text: I

      wait: 圆圈在转

      help: 箭头加问号

**********************************************

1、列表

   1、列表项标志

      list-style-type

      取值：

         1、无序列表
   none , disc , circle , square
2、有序列表
   none , decimal , lower-roman , upper-roman
3、none

   2、列表项图像

      属性:list-style-image

      取值:url(图像的路径)

      list-style-type:none;

      list-style-image:url(Images/type.png);

   3、列表项位置

      属性：list-style-position

      取值：

            outside : 在文本区域之外
   inside : 在文本区域之内

   4、列表属性(综合)

      属性:

        list-style:type url() position;
常用值：list-style:none;

   5、用法

      1、CSS重写

         将一些标签的默认样式修改掉
*{
margin:0px;
padding:0px;
list-style:none;
}

      2、导航

      <ul>
<li>
<h3>图书、音像、数字商品</h3>
</li>

      </ul>

       

2、定位

   1、什么是定位

      ... ...

   2、定位方式

      1、浮动定位

         脱离文档流，不占用页面空间，会靠在包含框的左边或者右边，或者离他最近的浮动元素

      2、相对定位、绝对定位、固定定位、[静态定位]

   3、定位属性

      1、定位方式相关属性

         position
取值:
     1、static : 默认，静态定位
     2、relative : 相对定位
     3、absolute : 绝对定位
     4、fixed : 固定定位

      2、与定位位置相关属性

         top
bottom
left
right
以像素为单位的值

      3、堆叠顺序

         z-index : value;
值越大越靠近用户

   4、static

      页面中默认定位方式，即文档流定位

   5、相对定位

      相对于当前元素本身出现的位置而实现定位的一种方式

      实现方式:

        position:relative;
通过 top bottom left right 来实现位置移动

      使用场合：

        1、会进行位置的微妙的调整
2、配合着绝对定位使用

   6、绝对定位

      特点：脱离文档流，不占据页面空间

      定位位置：相对于【最近】的【已定位】的【祖先】元素

                如果祖先元素没有进行定位，它的位置就相对于最初的包含块(body)

      <nav>

        <div>
 <p>
  <span></span>
 </p>
</div>

      </nav>

      已定位：非static ， 指 relative、absolute、fixed

      实现方式：

         position:absolutel
top,bottom,left,right : 位置偏移量,相对于最近的已定位的祖先元素去偏移。

      使用场合:

         1、弹出菜单的位置
   所有的弹出菜单都是绝对定位

   7、固定定位

      将元素固定在页面上的某一个位置，不随滚动条滚动而发生改变

      语法:

           position:fixed;
  top、left、right、bottom