zoukankan      html  css  js  c++  java
  • css浮动

    一.标准文档流:指元素根据块元素或行内元素的特性按从上到下,从左到右的方式自然排列。这也是元素默认的排列方式


      二.display属性

       display:更改块级元素和行内元素的相互转换
                block:块级元素的默认值
                inline:行内元素的默认值
                inline-block:同时具有行内和块级元素的特性
                none:隐藏元素内容

            三.float浮动

             left 元素向左浮动
       right 元素向右浮动
       none 默认值。元素不浮动,并会显示在其文本中出现的位置
       <style type="text/css">
        .layer01{
         float: left;
        }
        .layer02{
         float: right;
        }

       </style>

      四.clear清除浮动

       left 在左侧不允许浮动元素
       right 在右侧不允许浮动元素
       both 在左、右两侧不允许浮动元素
       none 默认值。允许浮动元素出现在两侧
       <style type="text/css">
        .layer01{
         clear:left;
        }
        .layer01{
         clear:right;
        }
        .layer01{
         clear:both;
        }
       </style>

      五.解决父级边框塌陷的方法

       1.浮动元素后面加空div
        <div class="layer05">
        <style type="text/css">
         .layer05{
          clear: both;
         }

        </style>

       2.设置父元素的高度
        <style type="text/css">
         #father{
          height: 500px;
         }
        </style>

       3.父级添加overflow属性
        visible 默认值。内容不会被修剪,会呈现在盒子之外
        hidden 内容会被修剪,并且其余内容是不可见的
        scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
        auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
        <style type="text/css">
         #father{
          overflow: hidden;
         }
        </style>

       4.父级添加伪类after
        <div id="father" class="clear"></div>
        <style type="text/css">
         .clear:after{
             content: '';          /*在clear类后面添加内容为空*/
             display: block;      /*把添加的内容转化为块元素*/
             clear: both;         /*清除这个元素两边的浮动*/
         }
        </style>

      六.inline-block和float的区别

       display:inline-block
       可以让元素排在一行,并且支持宽度和高度,代码实现起来方便
       位置方向不可控制,会解析空格
       IE 6、IE 7上不支持
       float 
       可以让元素排在一行并且支持宽度和高度,可以决定排列方向
       float 浮动以后元素脱离文档流,会对周围元素产生影响,必须在它的父级上添加清除浮动的样式

  • 相关阅读:
    linux一些配置
    tomcat启动后,页面无法访问
    利用jmeter实现多IP压测
    java操作数据库
    excle中表头分割单元格
    常用的最大流算法 Dinic 和 最小费用最大流SPFA写法
    [kuangbin]带你飞之'网络流'专题
    (留坑以后再看)一般图'最大匹配' 带花树 算法
    二分图'多重匹配'
    二分图'最大匹配' HK 算法
  • 原文地址:https://www.cnblogs.com/liu13-B/p/9934782.html
Copyright © 2011-2022 走看看