• 定位和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的结合使用:在偏移的父元素内添加相对定位,在该元素内添加绝对定位

     使用场合

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

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

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

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

        

  • 相关阅读:
    Oracle86和92语法的连接,子查询,集合的操作
    Oracle笛卡尔积,分组,多表连接
    Oracle排序,伪列,字符函数,数字函数,日期行数
    Oracle基本的数据类型以及简单sql查询
    用while语句打印阶乘
    Switch小练习
    if语句多表达式与一个表达式
    三元操作符
    整数的二进制表达
    与或
  • 原文地址:https://www.cnblogs.com/zycs/p/12085006.html
Copyright © 2020-2023  润新知