首页 > 其他 > 详细

第七章 浮动

时间:2018-06-19 11:10:24      阅读:197      评论:0      收藏:0      [点我收藏+]

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

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

第七章 浮动

原文:https://www.cnblogs.com/Tongchaofei/p/9197603.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!