当给元素设置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. 10. Halloween 万圣节

    10. Halloween 万圣节 (1) On October the 31st,across Britain and the USA,thousands of children are dress ...

  2. 使用Linux自带日志滚动工具logrotate滚动redis日志示例

    截至到redis-5.0版本,redis仍然不会自动滚动日志文件,如果不处理则日志文件日积月累越来越大,最终将导致磁盘满告警: # ls -lh total 12G -rw-r--r-- 1 redi ...

  3. OpenCV从2到3的过渡

    与版本2.4相比,OpenCV 3.0引入了许多新算法和功能.有些模块已被重写,有些已经重组.尽管2.4中的大多数算法仍然存在,但接口可能不同.本节描述了一般性的最显着变化,过渡操作的所有细节和示例都 ...

  4. modelsin联合仿真

    1-选择eda仿真工具  tool->options->eda tool options 2-assignments->settings->eda tool settings- ...

  5. hadoop2.4.0伪分布式搭建以及分布式关机重启后datanode没起来的解决办法

    1.准备Linux环境 1.0点击VMware快捷方式,右键打开文件所在位置 -> 双击vmnetcfg.exe -> VMnet1 host-only ->修改subnet ip ...

  6. springboot之使用redistemplate优雅地操作redis

    概述 本文内容主要 关于spring-redis 关于redis的key设计 redis的基本数据结构 介绍redis与springboot的整合 sringboot中的redistemplate的使 ...

  7. Javascript高级编程学习笔记（6）—— 流程控制语句

    话不多说,我们直接开始进入今天的主题 流程控制语句 首先什么是流程控制语句呢? 顾名思义,就是控制流程的语句. 在JS中语句定义了ECMAScript中的主要语法,让我们可以使用一系列的关键字来完成指 ...

  8. 详解 leetcode 猜数字大小 II

    375. 猜数字大小 II 原题链接375. 猜数字大小 II 题目下方给出了几个提示: 游戏的最佳策略是减少最大损失,这引出了 Minimax 算法,见这里,和这里 使用较小的数开始(例如3),看看 ...

  9. Swift5 语言指南(十九) 错误处理

    错误处理是响应程序中的错误条件并从中恢复的过程.Swift为在运行时抛出,捕获,传播和操纵可恢复的错误提供了一流的支持. 某些操作无法保证始终完成执行或生成有用的输出.Optionals用于表示缺少值 ...

  10. 机器学习基石笔记：09 Linear Regression

    线性回归假设: 代价函数------均方误差: 最小化样本内代价函数: 只有满秩方阵才有逆矩阵. 线性回归算法流程: 线性回归算法是隐式迭代的. 线性回归算法泛化可能的保证: 根据矩阵的迹的性质:tr ...