当给元素设置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. ABP框架系列之三：(Entity Framework Integration-实体框架集成)

    ASP.NET Boilerplate can work with any O/RM framework. It has built-in integration with EntityFramewo ...

  2. 20155326刘美岑 《网络对抗》Exp2 后门原理与实践

    20155326刘美岑 <网络对抗>Exp2 后门原理与实践 实验内容 (1)使用netcat获取主机操作Shell,cron启动 (2)使用socat获取主机操作Shell, 任务计划启 ...

  3. salt 配置管理

    索引 saltstack入门 salt state sls 描述文件 saltstack配置管理高级功能 saltstack入门 192.168.86.3 salt 修改 [root@Zabbix-s ...

  4. C#情怀与未来

    C#情怀与未来,怨天尤人还是抓住机会,能否跟上dnc新时代浪潮?   经常看到有.NET圈子在讨论是否应该转其它语言   C#情怀是一方面,如果觉得C#未来没前途,光靠情怀是撑不住的, 建议对C#未来 ...

  5. ASP.NET MVC下使用AngularJs语言(二)：ng-click事件

    程序用户交互,用户使用mouse点击,这是一个普通的功能. 在angularjs的铵钮点击命令是ng-click. 创建Angularjs的app使用前一篇<ASP.NET MVC下使用Angu ...

  6. 浅谈ESB中的DataRow、DataSet、DataBag 、DataBox

    1 背景概述 笔者在学习公司产品AEAI ESB 的时候经常需要从数据库获取信息并将数据信息保存到一个结果变量中,为统计分析提供特定格式的数据以及跨数据库同步数据时通常会用到DataRow.DataS ...

  7. 通过Function Score Query优化Elasticsearch搜索结果(综合排序)

    在使用 Elasticsearch 进行全文搜索时,搜索结果默认会以文档的相关度进行排序,如果想要改变默认的排序规则,也可以通过sort指定一个或多个排序字段. 但是使用sort排序过于绝对,它会直接 ...

  8. IOS 整体框架类图值得收藏

    Cocoa框架是iOS应用程序的基础,了解Cocoa框架,对开发iOS应用有很大的帮助. 1.Cocoa是什么? Cocoa是OS X和 iOS操作系统的程序的运行环境. 是什么因素使一个程序成为Co ...

  9. postgresql-删除重复数据

      greenplum最终的方法是: delete from test where (gp_segment_id, ctid) not in (select gp_segment_id, min(ct ...

  10. python字符串操作简单方法

    1.join #将字符中的每一个元素按照指定分隔符进行拼接 test='你说话带空格' print(test) t=' ' x='_' print(t.join(test)) print(x.join ...