CSS布局与定位——height百分比设置无效/背景色不显示

html元素属性width和height的值有两种表达方式，一是固定像素如“100px”，一是百分比如“80%”，

使用百分比的好处是元素会按父元素宽高自动调节大小，有更好的自适应性，

但由于<body>元素默认宽度有效，默认高度无效，

因此<div>（定位方式为默认值static）父元素为<body>时width="100%" height="100%"，其高度设置是无效的，

如该<div>无内容，仅设置了背景色和边框，则<div>背景颜色和边框也不显示。

PS：当<div>的定位方式为绝对定位或固定定位，即position属性值为absolute或fixed时，

父元素为<body>时width="100%" height="100%"，其高宽设置均有效，默认为当前窗口的宽高百分比，

若设置了背景色和边框，则<div>背景颜色和边框均可显示。

absolute定位和fixed定位区别见【 CSS布局与定位——Positioning(定位)四种定位方式要点总结】。

CSS布局与定位——height百分比设置无效/背景色不显示的更多相关文章

  1. Head First HTML与CSS — 布局与定位

    1.流(flow)是浏览器在页面上摆放HTML元素所用的方法. 对于块元素,浏览器从上到下沿着元素流逐个显示所遇到的各个元素,会在每个块元素之间加一个换行: 对于内联元素,在水平方向会相互挨着,总体上 ...

  2. 【转】CSS设置DIV背景色渐变显示

     [原链接]http://www.2cto.com/kf/201310/248187.html <style type="text/css">     .linear{ ...

  3. CSS设置DIV背景色渐变显示

    本文转载自:http://blog.csdn.net/gingerredjade/article/details/12191741 <style type="text/css" ...

  4. css 布局之定位 相对/绝对/成比例缩放

    给body添加 overflow: hidden; 可以将页面所有的 滚动条隐藏,但必须要给body 设置一个高度 overflow: hidden; height:864px; 父元素必须要设置 p ...

  5. 测开之路三十八：css布局之定位

    常用的布局方式: static:静态定位(默认),什么都不用管,元素会按照默认顺序排列,排不下是会默认换行relative:相对定位(同一层),相对于某一个元素进行定位fixed:绝对定位,指定位置a ...

  6. 前端学习笔记--CSS布局--float定位

    1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...

  7. 前端学习笔记--CSS布局--层定位

    1.层定位概述: z-index:前后叠加顺序 2.position属性: 3.fixed: 2.relative: 移动后: static没有往上移动占据box1的位置. 3.absolute: 移 ...

  8. 深入css布局篇(2) — 定位与浮动

    深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...

  9. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

随机推荐

  1. vmware centos7系统虚拟机复制到其他电脑后不能联网问题解决

    虚拟机复制到别的电脑后,无法联网 使用ifconfig命令,没有显示出IP4的网址信息(显示ens33文件配置信息) 在网上查看相关资料,大部分说是mac地址不一致导致 如果配置了mac地址,那么在/ ...

  2. Scala单例对象和伴生对象

    1.Scala单例对象 Scala单例对象是十分重要的,没有像在Java一样,有静态类.静态成员.静态方法,但是Scala提供了object对象,这个object对象类似于Java的静态类,它的成员. ...

  3. Robot Framework配置发送邮件功能

    请参考:http://www.robotframework.net/?/article/118

  4. MQTT-C-PUB

    /* ============================================================================ Name        : mqtest ...

  5. lua中的字符串操作(模式匹配)

    (一). 模式匹配函数在string库中功能最强大的函数是:string.find(字符串查找)string.gsub(全局字符串替换)string.gfind(全局字符串查找)string.gmat ...

  6. IOS 通过脚本自动打包工具 webfrogs/xcode_shell

    博文转载至 http://www.2cto.com/kf/201506/408346.html ios 开发通过xcode 打包其实效率不是太高,所以就有人,用shell 写了一个,自动打包,发邮件, ...

  7. C++程序中调用其他exe可执行文件方法

    在编程过程中有个需求,点击某个按钮需要弹出系统的声音控制面板.在网上查了下代码中调用其他exe程序或者打开其他文件的方法. 自己借鉴网上的文章稍微总结下,加深下印象,也给方便自己用. 在代码中调用其他 ...

  8. PHP错误 。Parse error: syntax error, unexpected T_INLINE_HTML, expecting T_ENDSWITCH or T_CASE or T_DEFAULT

    If you wan't to use the alternative syntax for switch statements this won't work: <div> <?p ...

  9. /etc/profile /etc/profile .bash_profile .bashrc解释

    1.用户登录系统时,bash首先执行/etc/profile配置文件和/etc/profile.d/目录下的配置文件,这些配置文件对系统的所有用户都有效,它们设置了普遍性的环境变量. 2.然后,Bas ...

  10. 线程同步之ManualResetEvent类的用法

    笔者的一台激光测厚设备的软件, 它有一个运动线程, 一个激光数据处理线程. 运动线程做的事就是由A点移动到B点, 然后再由B点移动回A点. 激光处理线程要做的事就是采集指定数量点的激光数据, 随着采集 ...