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>

  • 相关阅读:
    FineReport自学习题第四题——图表
    SQL如何查询连续数字并且统计连续个数
    Arm Cortex-M3 MCU性能
    北汽蓝谷极狐阿尔法S与T
    长鑫存储DDR产品
    华虹宏力芯片制造主流工艺技术
    传统编译器与神经网络编译器
    Apple苹果公司组织架构
    GPU与CPU交互技术
    CMOS图像传感器与DDI显示芯片
  • 原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/11112085.html
Copyright © 2011-2022 走看看