zoukankan      html  css  js  c++  java
  • 行内元素进行绝对(absolute),固定(fixed)定位后会变成块级元素·

    行内元素进行绝对定位后会变成块级元素·

    position:absolute;

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    /* *{
    padding: 0;
    margin: 0;
    } */
    span{
    position: absolute;

    /* 一定要写四个位置,否则无法居中显示 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    400px;
    height: 400px;
    background: rgba(255, 0, 255, .6);
    margin: auto;
    }
    </style>
    </head>
    <body>
    <span>行内元素进行绝对定位后会变成块级元素</span>
    <a href="#">行内元素进行绝对定位后会变成块级元素</a>
    <a href="#">样式,先写width,height,position,top,right,bottom,left确定位置</a>
    <a href="#">再写不影响布局的color,background,font-size,font-family等等</a>
    </body>
    </html>

    ==============================================

    行内元素进行固定定位后会变成块级元素·

    position:fixed;

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    /* *{
    padding: 0;
    margin: 0;
    } */
    span{
    position: fixed;

    /* 一定要写四个位置,否则无法居中显示 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    400px;
    height: 400px;
    background: rgba(255, 0, 255, .6);
    margin: auto;
    }
    </style>
    </head>
    <body>
    <span>行内元素进行绝对定位后会变成块级元素</span>
    <a href="#">行内元素进行绝对定位后会变成块级元素</a>
    <a href="#">样式,先写width,height,position,top,right,bottom,left确定位置</a>
    <a href="#">再写不影响布局的color,background,font-size,font-family等等</a>
    </body>
    </html>

  • 相关阅读:
    什么是Python???
    python中闭包详解
    python类中的__init__和__new__方法
    python中不需要函数重载的原因
    装饰器详解
    IDEA中导入非maven项目(从eclipse中迁移过来的)
    CLion、cmake、mingw、openCV安装
    跨域问题的一些思考
    maven中jar包手动导入
    对于序列化的理解
  • 原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/11112085.html
Copyright © 2011-2022 走看看