zoukankan      html  css  js  c++  java
  • CSS中margin和position:relative的定位问题

    一、代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .bb{
                background: burlywood;
                height: 50px;
    
                margin-left: 100px;
                width: 100%;
            }
    
            .cc{
                background: burlywood;
                height: 50px;
    
                margin-left: 100px;
                /*此为默认的,等同于不写*/
                width: auto;
            }
    
            .dd{
                background: burlywood;
                height: 50px;
    
                position: relative;
                left: 100px;
                width: 100%;
            }
    
            .ee{
                background: burlywood;
                height: 50px;
    
                position: relative;
                left: 100px;
                /*此为默认的,等同于不写*/
                width: auto;
            }
        </style>
    </head>
    <body style="position: relative">
    <div class="bb"></div>
    <br>
    <div class="cc"></div>
    <br>
    <div class="dd"></div>
    <br>
    <div class="ee"></div>
    </body>
    </html>

    二、效果图

    最左边的时候:

    最后边的时候:

    三、结论

    1. div不明确设置width,那么默认的为auto.
    2. 只有使用 margin-left+auto 定位的时候,才能使div刚好占满整个屏幕。
    3. 可以理解的在使用 margin-left+100% 的时候,div会向右边多出margin-left的距离。(因为100%是相对于其父元素而言,即当前的body)

    四、问题

    无法理解的是使用position:relative的时候,不管width如何设置都不能刚好占满屏幕,why?

  • 相关阅读:
    日常记Bug
    Docker部署Django
    杂记:防火墙、企业微信登陆、RestFrameWork
    Python2和Python3的编码
    杂记:Django和static,Nginx配置路径,json_schema
    xlwt模块的使用
    企业微信登陆
    markdown八条基础语法
    webstorm 添加markdown支持
    【electron系列之二】复制图片
  • 原文地址:https://www.cnblogs.com/LiuChunfu/p/5149905.html
Copyright © 2011-2022 走看看