hight属性值类型一览表

value	describtion
auto	默认
length	绝对长度
%	相对长度
inherit	继承

这里笔者主要介绍相对长度的用法，关于绝对长度读者可以参考CSS尺寸单位px % em rem详解获取更多信息。

height的%值的使用

定义：

这个值是一个百分比，它是基于包含它的块级元素的百分比。

实例：

<!DOCTYPE html>

<html>

  <head>

    <title>height.html</title>

    <meta name="content-type" content="text/html; charset=UTF-8">

<style>

div{

  width:50%;

  height:50%;

  border:1px solid red;

}

body{

  border:1px solid green;

  display:block;

  height:100px;

}

</style>

</head>

<body>

<div>I am box with width 50% and height 50%</div>

</body>

</html>

读者可以在Chrome浏览器中按下“F12”,选择“element”查看，读者可很快发现<div>的高度恰好为父元素<body>的50%。

需要注意的

在上面的示例中，我们验证了height的相对值的用法。但是读者需要注意，如果父元素没定义hight，则子元素的hight用百分比就不起作用，此时的高度值就相当于auto值，除非用绝对值改变。这里hight没定义是指，根本没写height，与把height定义为0px不同。读者可试一试下面这段代码：

<body id="b" style="width:0px;height:0px;">

<br>

<div id="er" style="width:50%;height:50%;border:1px solid red;"></div>

然后再body的style属性去掉，再试一试。

<body id="b">

参考文章：

http://www.runoob.com/cssref/pr-dim-height.html

本博客为博主原创作品，如需转载请注明出处。

CSS中详解height属性的更多相关文章

CSS中详解hight属性
目录结构: // contents structure [-] hight属性值类型一览表 height的%的使用定义实例需要注意的参考文章 hight属性值类型一览表 value descr ...
css filter详解
css filter详解 filter 属性详解属性名称类型说明 grayscale 灰度值为数值取值范围从0到1的小数(包括0和1) sepia 褐色值为数值取值范围从0到1的小数( ...
css中的width,height，属性与盒模型的关系
这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属 ...
CSS选择器详解（伪类）转 http://blog.csdn.net/Panda_m/article/details/50084699
CSS选择器详解之伪类伪类对大小写不敏感结构伪类选择器结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...
JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
带你走进CSS定位详解
学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位定位属性列表 position top bot ...
此博客使用的CSS样式详解！
此博客使用的CSS样式详解! 页面使用的博客园模板为:LuxInteriorLight,可以在博客皮肤里找到. 页首屏蔽广告代码 <script>console.log("顶部标 ...
CSS中width和height与盒子模型的关系
盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...
Spark Streaming揭秘 Day28 在集成开发环境中详解Spark Streaming的运行日志内幕
Spark Streaming揭秘 Day28 在集成开发环境中详解Spark Streaming的运行日志内幕今天会逐行解析一下SparkStreaming运行的日志,运行的是WordCountO ...

随机推荐

WIN10系统如何使用传统WIN7开始菜单
安装StartlsBack 默认按WIN键就可以回到WIN7的菜单了右击WIN可以点击属性,详细设置菜单样式
android studio中为项目添加依赖包的方法
右键项目,Open Module Settings 打开后选择Dependencies选项卡,点最右边的加号: 选择Libriay dependencies,从下拉列表里面选择就可以了.
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
代码如下: var date1=new Date(dateTimes[z][1]); 在火狐下可以正常取得时间,在IE7下却是 NaN.纠结老长时间,放弃了new date 然后再老外的论坛中找了 ...
Transaction And Lock--READ COMMITTED隔离级别下的"脏读"
在READ UNCOMMITTED事务隔离级别下或使用WITH(NOLOCK)来查询数据时,会出现脏读情况,因此对于一些比较"关键"的业务,会要求不能使用WITH(NOLOCK)或 ...
磁盘I/O的性能评估方法
磁盘I/O的性能评估方法 http://blog.synology.com/blog/?p=2086 通常,我们很容易观察到数据库服务器的内存和CPU压力.但是对I/O压力没有直观的判断方法.磁盘有两 ...
【转】Window 通过cmd查看端口占用、相应进程、杀死进程等的命令
转自:http://blog.csdn.net/jiangwei0910410003/article/details/18967441 一. 查看所有进程占用的端口在开始-运行-cmd,输入:ne ...
python object对象
动态语言的对象属性既然都是动态语言,自然python和熟知的JavaScript很像,建一个空对象用来存放所有的数据,看看js: var data = {}; data.name = 'CooMar ...
Sqoop拒绝连接错误
使用Sqoop远程连接MySQL导入数据到HBase数据库: sqoop import --driver com.mysql.jdbc.Driver --connect "jdbc:mysq ...
hibernate调用mysql存储过程
在mysql中创建两个存储过程,如下: 1.根据id查找某条数据: )) begin select * from emp where empId=id; end; 2.根据id查找某个字段,并返回 ) ...
Mysql查询数据库表结构以及字段类型并展示
1.建表语句sys_user CREATE TABLE `sys_user` ( `id` varchar(32) NOT NULL COMMENT '编号', `dept_id` varchar(3 ...

CSS中详解height属性