CSS设置百分比值的问题
当给元素设置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设置百分比值的问题的更多相关文章
- css relative设置top为百分比值
前言: 最近在学习HTML.CSS的过程中,想模仿一下百度首页.发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化(效果如下图所示),于是自己研究了一下并记录下来. 效果实现 <!D ...
- css百分比值到底参考谁？
一.元素宽高设置百分比 (1)width / min-width / max-width 参考块级父元素的宽度 (2)height / min-height / max-height 参考块级父元素的 ...
- 巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）
本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...
- 巧用margin/padding的百分比值实现高度自适应
原文:https://segmentfault.com/a/1190000004231995 一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padd ...
- margin/padding百分比值的计算
1.百分比介绍 一般元素的宽度用百分比值表示时,元素的总宽度包括外边距取决于父元素的width,这样可能得到"流式"页面,即元素的外边距会扩大或缩小以适应父元素的实际大小.如果对这 ...
- 在饼图上显示百分比值(报表生成器和 SSRS)
在饼图上显示百分比值(报表生成器和 SSRS) 默认情况下,图例中显示了类别来标识每个值. 如果使用了类别标签标记饼图,则可能希望在图例中显示百分比. 注意 在 SQL Server Data Too ...
- 定位（left 、right 、top 、 bottom）、padding、margin 值设为百分比值时
定位(left .right .top . bottom): top 为例 right 为例 padding.margin : 当padding.margin 值设为百分比值时,其百分比会相对于父元素 ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- css 设置背景图片模糊，内容不模糊
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...
随机推荐
- 连续子数组和的最大值plus
package wodeshiyao; import java.io.BufferedWriter; import java.io.File; import java.io.FileInputStre ...
- ActiveMQ_5死信队列
activemq死信队列 DLQ-死信队列(Dead Letter Queue)用来保存处理失败或者过期的消息. 出现以下情况时,消息会被redelivered: A transacted sessi ...
- 关于java poi itext生成pdf文件的例子以及方法
最近正在做导出pdf文件的功能,所以查了了一些相关资料,发现不是很完善,这里做一些小小的感想,欢迎各位“猿”童鞋批评指正. poi+itext,所需要的jar包有itext-2.1.7.jar,poi ...
- c++两个类相互调用
有可能会碰到两个类之间的相互调用的问题,例如:定义了类A和类B,A中使用了B定义的类型,B中也使用了A定义的类型 class A { B b; }; class B { A a; }; 编译器在声明A ...
- C++ MFC棋牌类小游戏day6
双人单机小游戏做完了,规则那部分还没介绍,暂时不打算介绍了,因为写的这个bug太多,我打算重新修改. 链接:https://pan.baidu.com/s/1XQKPSv0Tw36Qi2TeaRJiM ...
- WebViewJavascriptBridge浅析
WebViewJavascriptBridge是一个Objective-C与JavaScript进行消息互通的三方库.通过WebViewJavascriptBridge,我们可以很方便的实现OC和Ja ...
- ESB结合门户Portlet实现数据分析
1 背景概述 笔者在公司做集成项目时,通常会涉及ESB与Portal结合实现图表数据分析功能.通过ESB获取数据库信息,然后在门户上采用Portlet接收ESB中的数据URL最后展现到门户上.本文为项 ...
- Android 经验之文件下载
在Android 开发中,我们肯定会接触到下载需求,那么如何通过技术实现呢? 一.简单实现: 通过了解HTTP原理,我们应该可以知道,HTTP学习的时候,可以通过HTTPGET方式来进行文件下载: n ...
- 第十节：详细讲解一下Java多线程，随机文件
前言 大家好,给大家带来第十节:详细讲解一下Java多线程,随机文件的概述,希望你们喜欢 多线程的概念 线程的生命周期 多线程程序的设计 多线程的概念 多线程的概念:程序是静态的,进程是动态的.多进程 ...
- Shell-18--正则表达式
a* a出现0或任意次,没有意义,会全输出