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

     使用场合

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

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

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

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

        

  • 相关阅读:
    转: 尽己力,无愧于心 存储过程
    转: 尽己力,无愧于心 FastReport.Net 常用功能总汇
    关于Ansi_Nulls、Quoted_Identifier、Ansi_Padding的用法
    数学建模
    数学建模
    深度学习
    C#复习
    Keras的两种网络模型
    xaml转义
    C# 文件目录操作
  • 原文地址:https://www.cnblogs.com/zycs/p/12085006.html
Copyright © 2011-2022 走看看