• 浮动:让默认(标准)文档流下的元素漂浮起来水平排列


    float--left左浮动;
    right右浮动;
    none不浮动;
    浮动排列的顺序不会改变,默认时谁在第一个,浮动就会排在第一个;

    浮动的影响:
    1、行内元素浮动之后可以支持宽高;
    2、文本会给浮动的元素让位;可以制作文本绕排的效果;
    3、在父级没有给高度的情况下,子级浮动后父级会没有高度;

    清除浮动:
    1、在父级内容的最后添加一个空的div,添加clear属性;
    clear--left清除左浮动;
    right清除右浮动;
    both清除所有(左/右)浮动;
    clear是清除上一个元素带来的影响;
    不推荐使用,因为会在页面上添加太多的无用标签,让页面的布局变得更复杂;

    2、给父级设置overflow:hidden;
    会触发bfc(block formatting context)块级格式化上下文;
    不推荐使用,因为这个属性和定位一起使用时会产生问题;

    3、使用伪元素after
    .clearfix:after {
    content:"";/*内容为空*/
    height:0;/*高度为0*/
    line-height:0;/*行高为0*/
    display:block;/*块级元素*/
    visibility:hide;/*隐藏*/
    clear:both;/*清除浮动*/
    }
    .clearfix {
    zoom:1;/*IE678*/
    }

    4、使用双伪元素after和before
    .clearfix:afer,.clearfix:before {
    content:"";
    display:table;
    clear:both;
    }
    .clearfix {
    zoom:1;
    }
    以上四种方式推荐使用第三种;

    列表样式:list-style

    定位:
    1、静态定位--static;按照标准文档流进行布局;

    2、相对定位--relative;相对自身;以自身的坐上角(坐标点)为参考;会保留原来的位置不被其他元素侵占;

    3、绝对定位--absolute;参考的是页面的左上角;绝对定位位置不会被保留;
    如果父级有定位,则参考父级的坐标点;如果父级没有定位,则会一级一级向上查找,直到html标签,中途有定位就会参照这个定位元素的坐标点;

    4、固定定位--fixed;相对于浏览器窗口的左上角;

  • 相关阅读:
    总结
    PHP的重载-使用魔术方法实现
    用PHP实现一些常见的排序算法
    MySQL分组聚合group_concat + substr_index
    各种链接地址
    在Linux服务器上使用rz命令上传文件时时老报:Segmentation Fault,上传失败
    新安装的windows 10无法更新报0x80240fff错误的解决方案
    通过SSH key获取GitHub上项目,导入到IDEA中
    解压.zip,.tar.gz文件到指定目录,重命名文件
    byte字节数组的压缩
  • 原文地址:https://www.cnblogs.com/tangdiying/p/10098564.html
Copyright © 2020-2023  润新知