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. python与VScode

    用VScode写python是非常方便的.vscode是一个功能非常强大的编辑器,下面介绍大致的使用方法: 下载安装python,配置环境变量. 下载安装VScode(vscode会自动连接pytho ...

  2. VC++6.0相对路径无效的解决办法

    我们在开发程序时,常常需要操作相关的文件.操作文件一般有两种方法:绝对路径和相对路径.绝对路径是从盘符开始的,相对路径则是相对于当前目录. 绝对路径很简单,一般也不会出错,但是在实际开发过程中要慎用绝 ...

  3. centos上yum安装异常处理

    最近在centos上通过yum来安装程序,出下了以下问题: Loaded plugins: fastestmirror Setting up Install Process Loading mirro ...

  4. Apache ActiveMQ Fileserver远程代码执行漏洞

    扫端口的时候遇到8161端口,输入admin/admin,成功登陆,之前就看到过相关文章,PUT了一句话上去,但是没有什么效果,于是本地搭建了一个环境,记录一下测试过程. 环境搭建: ActiveMQ ...

  5. （原创）Windows下使用android ADT工具dmtracedump.exe绘图

    在windows下使用dmtracedump绘图时,出现如下错误: 'dot' 不是内部或外部命令,也不是可运行的程序 或批处理文件. 应该是没有dot这个执行程序,安装:Graphviz程序,然后将 ...

  6. linux个性化定制登录信息

    1./etc/motd /etc/motd即messageoftoday(布告栏信息),每次用户登录时,/etc/motd文件的内容会显示在用户的终端.系统管理员可以在文件中编辑系统活动消息,例如:管 ...

  7. 【ipad神坑】ipad麦克风听不到声音怎么回事 微信QQ语音视频对方都听不到

    今天遇到了这个问题 说话听不见,但是敲击ipad,可以明显的听到击打的声音 siri也是可以听到 上网上找,大多都是说恢复设置,重启,隐私麦克风权限等解决方案 都是浪费感情 全部尝试过了,依然没有用. ...

  8. Python在mysql中进行操作是十分容易和简洁的

    首先声明一下,我用的是Windows系统! 1.在Python中对mysql数据库进行操作首先要导入pymysql模块,默认情况下,Python中是没有安装这个模块的, 可以在Windows的命令行中 ...

  9. echarts - 特殊需求实现方案汇总

    五分钟上手echarts echarts中 设置x||y轴文案.提示文字等为固定字数,超出显示"..." 关于echarts下钻功能的一些总结.js echarts - 特殊需求实 ...

  10. CreateTimerQueueTimer在DllMain中调用导致的loader lock

    开发一个COM组件在Windows 7上注册成功,但是Windows XP SP3版本却导致regsvr32.exe进程挂起.用WinDbg查看发现提示: Break- seconds... WARN ...