zoukankan      html  css  js  c++  java
  • 浮动:让默认(标准)文档流下的元素漂浮起来水平排列

    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;相对于浏览器窗口的左上角;

  • 相关阅读:
    c# 调用DeepAI
    c#
    c# Polygon 画多边形,
    WPF BitmapSource /BitmapImage 获取像素点颜色
    前端面试题汇总
    element 动态合并表格
    JS的乘、除、加、减法结果会有误差,在两个浮点数相乘的时候会比较明显
    shell中针对数字、filename字符串等的判断参数的总结
    Android TV : 电视输入框架(TIF)剖析
    ubuntu更新系统函数手册
  • 原文地址:https://www.cnblogs.com/tangdiying/p/10098564.html
Copyright © 2011-2022 走看看