当给元素设置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. QT中报错collect2:ld returned 1 exit status的可能原因。

    参考:https://blog.csdn.net/u014546553/article/details/78781547 1.编译成功的例子在后台执行,有时一闪而过,如果再次build ,则会提示上述 ...

  2. ABP框架系列之二十七：(Feature-Management-特征管理)

    Introduction Most SaaS (multi-tenant) applications have editions (packages) those have different fea ...

  3. qhfl-3 Course模块

    课程模块,包括免费课程以及专题课程两个,主要是课程的展示,点击课程进入课程详细页面 根据功能设计表结构 为了方便,每张表在数据库中添加了中文名 from django.db import models ...

  4. hdu 1325 && poj 1308 Is It A Tree?(并查集)

    Description A tree is a well-known data structure that is either empty (null, void, nothing) or is a ...

  5. Linux 线程编程2.0——线程同步-互斥锁

    当我们需要控制对共享资源的存取的时候,可以用一种简单的加锁的方法来控制.我们可以创建一个读/写程序,它们共用一个共享缓冲区,使用互斥锁来控制对缓冲区的存取. 函数 pthread_mutex_init ...

  6. CPU Hardwar

    GPU负责把线程块分配到各个SM上处理. CUDA对申请的线程块何时运行,以及在哪个SM上运行是没有保证的.这恰好是GPU的优势,这种方式带来了灵活性,不需程序根据SM的数量去配置程序. 但是一个bl ...

  7. Spring集合注入

    1.集合注入 上一篇博客讲了spring得属性注入,通过value属性来配置基本数据类型,通过<property>标签的 ref 属性来配置对象的引用.如果想注入多个数据,那我们就要用到集 ...

  8. 9.indicate、xutils、json

    json数据  页签详情页数据   public class TabData { public int retcode; public TabDetail data;//不是数组的话类型就是这个 pu ...

  9. 人生苦短：Python里的17个“超赞操作

    人生苦短,我选Python”.那么,你真的掌握了Python吗?   1. 交换变量 有时候,当我们要交换两个变量的值时,一种常规的方法是创建一个临时变量,然后用它来进行交换.比如: # 输入 a = ...

  10. 机器学习与Tensorflow（4）——卷积神经网络与tensorflow实现

    1.标准卷积神经网络 标准的卷积神经网络由输入层.卷积层(convolutional layer).下采样层(downsampling layer).全连接层(fully—connected laye ...