当给元素设置width：100%；height：100% 的时候没有反应

　　因为，元素的宽高是根据内容来自动适应的，当设置百分比值时，是根据这个元素的父元素来确定百分比的

如果父元素没有固定的值，那就需要设置值才能正常显示如：

　　

    .box{

            width: %;

            height: %;

            background: #;

        }

    </style>

    <div class="box">

    </div>

　　此div在页面中没有任何效果，所以要把div的上级元素body设设置了

body{

            width: %;

            height: %;

            padding: ;

            margin: ;

        }

        .box{

            width: %;

            height: %;

            background: #;

        }

    </style>

    <div class="box">

    </div>

</body>

　　设置了body还是没有反应，body上还有一个html元素

　　

</head>

<body>

    <style>

        html,body{

            width: %;

            height: %;

            padding: ;

            margin: ;

        }

        .box{

            width: %;

            height: %;

            background: #;

        }

    </style>

    <div class="box">

    </div>

</body>

</html>

这样就好了！整个页面都变成灰色的了

CSS设置百分比值的问题的更多相关文章

  1. css relative设置top为百分比值

    前言: 最近在学习HTML.CSS的过程中,想模仿一下百度首页.发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化(效果如下图所示),于是自己研究了一下并记录下来. 效果实现 <!D ...

  2. css百分比值到底参考谁？

    一.元素宽高设置百分比 (1)width / min-width / max-width 参考块级父元素的宽度 (2)height / min-height / max-height 参考块级父元素的 ...

  3. 巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

    本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...

  4. 巧用margin/padding的百分比值实现高度自适应

    原文:https://segmentfault.com/a/1190000004231995 一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padd ...

  5. margin/padding百分比值的计算

    1.百分比介绍 一般元素的宽度用百分比值表示时,元素的总宽度包括外边距取决于父元素的width,这样可能得到"流式"页面,即元素的外边距会扩大或缩小以适应父元素的实际大小.如果对这 ...

  6. 在饼图上显示百分比值(报表生成器和 SSRS)

    在饼图上显示百分比值(报表生成器和 SSRS) 默认情况下,图例中显示了类别来标识每个值. 如果使用了类别标签标记饼图,则可能希望在图例中显示百分比. 注意 在 SQL Server Data Too ...

  7. 定位（left 、right 、top 、 bottom）、padding、margin 值设为百分比值时

    定位(left .right .top . bottom): top 为例 right 为例 padding.margin : 当padding.margin 值设为百分比值时,其百分比会相对于父元素 ...

  8. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  9. css 设置背景图片模糊，内容不模糊

    需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...

随机推荐

  1. java对PDF文档的各种操作

    https://www.cnblogs.com/h--d/p/6150320.html(仅以提醒,导航的作用)

  2. jquery监听滚动条

    $(".lx").scroll(function(){ var $this =$(this), viewH =$(this).height(),//可见高度 contentH =$ ...

  3. MSF内网渗透 扫描模块

    端口扫描 auxiliary/scanner/portscan scanner/portscan/ack        ACK防火墙扫描 scanner/portscan/ftpbounce  FTP ...

  4. docker gitlab安装

    mkdir -p /data/docker/volumes/gitlab chmod 777 /data/docker/volumes/gitlab cd /data/docker/volumes/g ...

  5. unique(未完成)

    const unique = arr => { const sortedArr = arr.sort((a, b) => a > b); const first = sortedAr ...

  6. PHP查看内存使用

    第一想法:memory_get_usage() 用microtime函数就可以分析程序执行时间memory_get_usage可以分析内存占用空间 SQL的效率可以使用打开慢查询查看日志分析SQL 找 ...

  7. 纯css进度条效果

    <!--html代码--> <!DOCTYPE html> <html lang="zh"> <head> <meta cha ...

  8. git checkout tags with the same name as a branch

    显式指定某个 tag git checkout refs/tags/ git checkout refs/tags/v0.1 显式指定某个 branch git checkout refs/heads ...

  9. js验证身份证号，超准确

    js验证身份证号,超准确 看程序前先来了解下身份证号的构成:身份证号分为两种,旧的为15位,新的为18位.身份证15位编码规则:dddddd yymmdd xx p    其中 dddddd:地区码  ...

  10. 生成多个git ssh密钥

    如果你已经有了一套名为 id_rsa 的公秘钥,将要生成另外一个公钥,比如 aysee ,你也可以使用任何你喜欢的名字. 步骤如下: 1.生成一个新的自定义名称的公钥: ssh-keygen -t r ...