zoukankan      html  css  js  c++  java
  • 浮动的一些知识点

    一、浮动定义:会强制改变display为inline-block,使元素排队列,(排列方式由属性值决定,left / rihgt), 使该元素处于半脱离文档状态

    二、浮动元素处于半飘离状态,能看到浮动元素的主要有文字和具有inline属性的元素,所以由此引发 一个问题,和一个应用

      (1)一个问题:父容器无法看到子级浮动元素

          解决方法:

            方法一:触发css hack,改变渲染规则,常见的方法如下:

                overflow:hidden;

                position: absolute;

                display: inline-block;

            方法二(最标准方法):after伪元素清除浮动(注意:ie6,7 不兼容伪元素的处理, *ie6、7能识别,_仅ie6能识别)

                

    <div class="wrapper">
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
        </div>
    .wrapper:after {
        display: block;
      content: '';
      clear: both;
       *zoom: 1; /*解决ie6、7不兼容伪元素的问题*/ } .content { float: left; 200px; height: 200px; background-color: orange; }

      (2)一个应用:实现图片的文字环绕效果

      正常文字是和图片的底部对齐,通过设置图片float可以让文字从图片顶部开始对齐,实现文字包围环绕图片的效果,像报纸上排版类似

    <img src="p1.jpg">
    img {
        float: left; /*或right*/          
    }

        

  • 相关阅读:
    正则表达式中的贪婪模式与非贪婪模式详解
    关于Python中正则表达式的反斜杠问题
    每日思考记录(1)
    软件设计——2018年上半年选择题重要知识点
    统一过程UP
    软件设计复习7
    软件设计复习6
    软件设计复习5
    软件设计复习4
    软件设计复习3
  • 原文地址:https://www.cnblogs.com/Walker-lyl/p/5854387.html
Copyright © 2011-2022 走看看