zoukankan      html  css  js  c++  java
  • CSS3中的浮动

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


      二.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 浮动以后元素脱离文档流,会对周围元素产生影响,必须在它的父级上添加清除浮动的样式

  • 相关阅读:
    各项硬件使用剖析(一)---让你一眼就能区分瓶颈是Memory、processor ORdisk!
    基本算术运算符
    网页计算器 && 简易网页时钟 && 倒计时时钟
    页面加载后累加,自加1&&判断数字是否为两位数
    累加按钮,自加1&&输入两个数字,比较大小
    用typeof查看数据类型&&用parseInt解析数字,并求和
    鼠标移过,改变图片路径
    单一按钮显示/隐藏&&提示框效果
    简易选项卡&&简易JS年历
    函数传参,改变Div任意属性的值&&图片列表:鼠标移入/移出改变图片透明度
  • 原文地址:https://www.cnblogs.com/szhhhh/p/9206997.html
Copyright © 2011-2022 走看看