• HTML定位相关


    居中定位

    1. text-align:center; 让元素的文本内容和行内子元素居中 ,不能让块级子元素居中
    2. margin:0 auto; 让块级元素自身居中

     静态定位
    元素默认的定位方式
    特点: 元素以左上为基准,行内元素从左向右依次排列, 块级元素从上往下依次排列,一般情况下不能实现元素层叠效果.  通过外边距控制元素的位置
    格式: position:static;

    相对定位
    特点: 元素不脱离文档流(不管元素显示到什么位置都占着原来的位置),通过left/right/top/bottom控制元素的位置, 让元素相对于初始位置做偏移.
    应用场景: 当需要对某个元素位置进行调整,并且不影响其它元素时使用
    格式:

    position: relative; //当将块的position属性设置为relative时,与设置为absolute完全不同,这时子块是相对于他原本的位置定位,无论是否进行移动,其所占的位置仍然留有空位,后面的无定位块元素不会移动上来,因此,移动元素会导致覆盖其它框。若相对本身向上或向左的话要设置top,left为负值。

    绝对定位
     特点: 元素脱离文档流(不占原来的位置) ,通过left/right/top/bottom控制元素的位置,让元素相对于窗口(默认)或某一个上级元素做偏移,如果需要相对于某一个上级元素则必须把上级元素改成相对定位作为参照物.
    应用场景: 当需要实现层叠效果,让元素以页面中某一个上级元素为参照物时使用绝对定位
    格式: position:absolute

    1. /*设置为绝对定位, 元素脱离文档流,后面的元素会顶上来*/
    2. position: absolute;


    固定定位
    特点: 元素脱离文档流, 通过left/right/top/bottom控制元素的位置,让元素相对于窗口做位置偏移.
    应用场景: 当需要让某个元素固定在窗口某个位置时使用.
    格式: position:fixed;

    right: 20px;

    浮动定位
    特点: 元素脱离文档流, 从当前所在行向左或向右浮动, 当撞到上级元素边缘或其它元素时停止
    浮动元素一行装不下时会自动折行, 折行时有可能被卡住.
    当某个元素的所有子元素全部浮动时, 元素自动识别的高度为0,后面的元素会顶上来并且会把文本内容挤到旁边位置显示, 通过给元素添加overflow:hidden解决此问题    
    应用场景: 当需要将纵向排列的元素改成横向排列时使用.
    格式: float:left/right;

  • 相关阅读:
    基于ABP实现DDD--领域服务、应用服务和DTO实践
    SpringMVC 资源状态转移RESTful
    学生Dreamweaver静态网页设计 基于HTML+CSS+JavaScript制作简食餐厅美食网站制作
    用HTML+CSS做一个漂亮简单的个人网页(第二篇)
    css旋转小球
    2022年新一批获得能力评估CS认证证书的企业名单
    xss——权限维持,钓鱼
    Visual Studio自定义模板参数、备注
    如何在idea中创建一个SpringBoot项目(超详细教学)
    批量下载微信公众号要点
  • 原文地址:https://blog.csdn.net/weixin_48100716/article/details/126526296