当给元素设置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. 11. English vocabulary 英语词汇量

    11. English vocabulary 英语词汇量 (1) The exact number of English words is not known.The large dictionari ...

  2. base operand of '->' has non-pointer type 'const Comple

    base operand of '->' has non-pointer type 'const Comple ->操作符前面的操作数类型不是指针类型 错误原因 函数(&对象) { ...

  3. 51nod1683

    代码参考:http://blog.csdn.net/sdfzyhx/article/details/74359927 //dp[i][j][k]表示到了第i列,最下边的点最短路为j,剩下的点之间的关系 ...

  4. js-闪烁的文字

    <!DOCTYPE html><html>    <head lang="en">        <meta charset=" ...

  5. Vuejs——（6）Vuejs与form元素

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   资料来于官方文档: http://cn.vuejs.org/guide/forms.html 本 ...

  6. UWP忽略短时间内重复触发的事件

    原链接:UWP忽略短时间内重复触发的事件 - 超威蓝火 做移动端开发的可能都会遇到这种需求,当用户点击一个按钮之后,由于没有异步,或者设备性能很差等等原因,程序卡住了.但是用户不知道是咋回事啊,就开始 ...

  7. mysql之select语法

    一:连接查询(外链接outer和内链接inner) 连接查询是另一种类型的多表查询.连接查询对多个表进行JOIN运算,简单地说,就是先确定一个主表作为结果集,然后,把其他表的行有选择性地“连接”在主表 ...

  8. [Objective-C语言教程]预处理器（18）

    Objective-C预处理器不是编译器的一部分,而是编译过程中的一个单独步骤. 简单来说,Objective-C预处理器只是一个文本替换工具,它指示编译器在实际编译之前进行必要的预处理. 我们将Ob ...

  9. 通过Anaconda在Ubuntu16.04上安装 TensorFlow(GPU版本)

    一. 安装环境 Ubuntu16.04.3 LST GPU: GeForce GTX1070 Python: 3.5 CUDA Toolkit 8.0 GA1 (Sept 2016) cuDNN v6 ...

  10. python列表常用方法

    list是一个类,用中括号括上,逗号分隔,元素可以是数字,字符,字符串,也可以是嵌套列表,布尔类型. 1.通过索引取值 li=[1,12,9,'age',['wangtianning',[19,'10 ...