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. 用soapUI测试xml格式的HTTP接口

    有些HTTP接口是直接传递parameter的,有些HTTP请求是将parameter转换为xml串进行传递的.现在要分享的就是如何用soapUI实现xml串的HTTP接口测试. 工具/原料   so ...

  2. IIS6独立用户建立网站的方法，提高网站安全性

    在Windows server 2003系统下,用IIS架设Web服务器,合理的为每个站点配置独立的Internet来宾账号,这样可以限制Internet 来宾账号的访问权限,只允许其可以读取和执行运 ...

  3. 【RF库Collections测试】Reverse List

    Name:Reverse ListSource:Collections <test library>Arguments:[ list_ ]Reverses the given list i ...

  4. [转]linux下释放文件内存

    在Linux系统下,我们一般不需要去释放内存,因为系统已经将内存管理的很好.但是凡事也有例外,有的时候内存会被缓存占用掉,导致系统使用SWAP空间影响性能,此时就需要执行释放内存(清理缓存)的操作了. ...

  5. 编译poco-1.7.8

    运行build_vs140.cmd,运行之前可以修改一些参数,例如编译64位 buildwin 140 build shared both x64 nosamples notests devenv 修 ...

  6. 在 Linux 使用 GCC 编译C语言共享库

    对任何程序员来说库都是必不可少的.所谓的库是指已经编译好的供你使用的代码.它们常常提供一些通用功能,例如链表和二叉树可以用来保存任何数据,或者是一个特定的功能例如一个数据库服务器的接口,就像MySQL ...

  7. 如何构建日均千万PV Web站点(二) 之~缓存为王~

    随着网站业务的不断发展,用户的规模越来越大:介于中国无比蹩脚复杂的网路环境:南电信:北联通:中间竟然只用一条链路进行互联通信!有研究表明,网站访问延迟和用户流失率正相关,网站访问速度越慢,用户越容易失 ...

  8. Java网络编程之TCP通信

    一.概述 Socket类是Java执行客户端TCP操作的基础类,这个类本身使用代码通过主机操作系统的本地TCP栈进行通信.Socket类的方法会建立和销毁连接,设置各种Socket选项. Server ...

  9. iOS - UITextView在调用textViewDidChange方法，九宫格相关中文输入的问题

    问题一 iOS textView在调用 UITextViewDelegate 的 textViewDidChange方法,九宫格相关中文输入的问题 有时候,需要在textViewDidChange处理 ...

  10. php sqlserver及xdebug扩展配置

    ;extension=php_bz2.dllextension=php_curl.dll;extension=php_fileinfo.dll;extension=php_ftp.dll;extens ...