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. vux 使用 loading 组件

    1)声明引入Loading import { Loading } from 'vux' 2)在模版底部添加 组件(需要添加到 template>div 标签里) <template> ...

  2. MFC之自绘控件

    在描绘MFC界面时,MFC自带的控件样式是绝对不满足界面的需求的. 所以我们就要在MFC自带控件基础上对控件样式进行重绘. 在采用自绘前界面样式 采用自绘后界面样式 是不是自绘控件后看起来正常了很多? ...

  3. HTML5和CSS3扁平化风格博客(基础篇)

    多学一点总是好的~ 自始至终都觉得的css和html效果比较美观,于是在看慕课网教程时,自己也跟着敲了深爱着的前端代码 这部分分为两部分:①基础篇:http://www.imooc.com/learn ...

  4. 使用java发送QQ邮件

    使用java发送邮件的时候,需要先下载两个jar包,连接如下: JavaMail mail.jar 1.4.5 JAF(版本 1.1.1) activation.jar 然后将这连个包导入,博主用的是 ...

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

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

  6. iOS - 实现语言本地化/国际化

      实现iOS语言本地化/国际化(图文详解) 前言 语言本地化,又叫做语言国际化.是指根据用户操作系统的语言设置,自动将应用程序的语言设置为和用户操作系统语言一致的语言.往往一些应用程序需要提供给多个 ...

  7. 在mac终端先打开mysql

    以打开xampp下的mysql为例: mysql执行文件是放在bin目录下的,不要cd bin后键入mysql,而应该直接在bin的上级目录时键入bin/mysql,这样才能进入到mysql命令行模式 ...

  8. QT开发之旅一DS7400主机调试工具

    接触QT三年有余,期间因为工作需要断断续续学习过,2010年开始接触,当时好像是4.7版本,现在都已经到5.2版本了,更新真快,前阵子安装了下5.2版本,还是有很多变化的,不过感觉好像编译速度慢了很多 ...

  9. truncate表恢复

    Fy_Recover_Data 2014.03.07 更新 -- 现在可以从离线文件中恢复被Truncated的数据了 2014新版本的恢复思路 与 2012的不同 2014年是离线恢复 http:/ ...

  10. Elasticsearch学习之快速入门案例

    1. document数据格式 面向文档的搜索分析引擎 (1)应用系统的数据结构都是面向对象的,复杂的(2)对象数据存储到数据库中,只能拆解开来,变为扁平的多张表,每次查询的时候还得还原回对象格式,相 ...