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. win10屏幕投影

    不管是做设计还是看电影玩游戏编代码,多屏幕总是可以带来方便的.屏幕投影之前需要连接屏幕:通过VGA线连接.通过HDMI线连接.或者通过无线连接. 介绍Win10实现屏幕投影设置:https://jin ...

  2. RAC的搭建（三）--Grid的安装

    1. 安装cvuqdisk.rpm补丁包 在两个Oracle RAC 所有节点上安装操作系统程序包cvuqdisk.如果没有cvuqdisk,集群验证实用程序就无法发现共享磁盘. 该包在p104045 ...

  3. 深入浅出MFC——MFC多线程程序设计（七）

    1. 从操作系统层面看线程——三个观念:模块(MDB).进程(PDB).线程(TDB) 2. “执行事实”发生在线程身上,而不在进程身上.也就是说,CPU调度单位是线程而非进程.调度器据以排序的,是每 ...

  4. 查询SQlServer相同表结构差异

    USE [数据库名] GO ); ); ); ); SET @DataName1='库1'; SET @DataName2='库2'; SET @TableName1='表1'; SET @Table ...

  5. Android设计和开发系列第二篇：Action Bar(Develop—API Guides)

    Action Bar IN THIS DOCUMENT Adding the Action Bar Removing the action bar Using a logo instead of an ...

  6. 【PHP】快递鸟 物流查询接口实现

    官方网址: http://www.kdniao.com 即时查询api: http://www.kdniao.com/api-track 需要登录 ,申请一下 用户ID 和 API key 代码实现: ...

  7. 【大数据系列】HDFS初识

    一.HDFS介绍 HDFS为了做到可靠性(reliability)创建了多分数据块(data blocks)的复制(replicas),并将它们放置在服务集群的计算节点中(compute nodes) ...

  8. css案例 - mask遮罩层的华丽写法

    mask遮罩蒙层使用通常的写法的bug 通常写法pug .mask 通常写法css .mask{ position: absolute; top: 0; right: 0; bottom: 0; le ...

  9. 行逻辑链接的顺序表实现稀疏矩阵的相乘(Java语言描述)

    行逻辑链接,带行链接信息.程序有空指针BUG,至今未解决.还是C/C++适合描述算法数据结构.以后复杂的算法还是改用C/C++吧. 有BUG的代码,总有一天会换成没有BUG的. package 行逻辑 ...

  10. 第二步 使用Cordova 3.0(及以上版本) 创建安卓项目(2014-6-25)

    参考资料: http://www.cnblogs.com/numtech/p/3233469.html http://blog.sina.com.cn/s/blog_9e245c690101jurr. ...