定位和position定位

定位有:普通流定位 、浮动定位 、相对定位 、 绝对定位 、 固定定位

特点

   普通定位:被称为文档流定位,是页面元素默认的定位方式(块级:从上到下,独占一行;行级:从左到右,不独占一行)

    浮动定位:

    1.浮动元素脱离文档流,未浮动元素上前补位

    2.浮动元素会停靠在父级元素的左边或者右边,亦或者紧跟其他元素边缘

    3.浮动元素只会在当前行内

    4.浮动只在父级元素内

    5.多个块级元素处于一行

  浮动引发的效果

    当父元素的width显示不下所有浮动元素时,最后一个元素换行,元素浮动起来,对行内元素影响最大

    文本、行内元素、行内块元素,采用文字环绕的方式排列,是不会被浮动元素压在底下,会巧妙避开浮动元素

  清除浮动(只有三个值)

    clear:left;right,both  

  浮动元素对父级元素的影响

    原因:如果父级元素的hight没有设置或者没设置自适应,当部分元素全部浮动起来,父级hight为0

    解决方法

     1>.直接给父级设置px高

      弊端:需要准确的px高

     2>.设置父级浮动

      弊端:对后继元素有影响

     3>.为父级设置overflow:hidden

      弊端:如果子集内容有溢出显示,会被一同隐藏

     4>.父元素追加空元素  设置clear清楚浮动

position定位

   1、static  默认定位      

   2、relative 相对定位 :原位置保留, 原来位置左上角进行偏移

      使用场合:元素位置的微调

   3、absolute 绝对定位:  脱离文档流,相对于body进行位置偏移

    注意:我们一旦设置绝对定位后,元素就具有漂浮效果

   4、fixed 固定定位 : 脱离文档流,不受滚动条影响,body标签左上角进行位置偏移

   5、relative和absolute的结合使用:在偏移的父元素内添加相对定位,在该元素内添加绝对定位

 使用场合

  多个块级元素在一行内显示,浮动

  元素实现自身位置的微调,相对定位

  实现弹出内容和排版时,绝对定位和相对定位的结合

  顶部固定 左边导航固定 广告,固定定位

    

原文地址:https://www.cnblogs.com/zycs/p/12085006.html