目录结构：

contents structure [+]

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属性的更多相关文章

  1. CSS中详解hight属性

    目录结构: // contents structure [-] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value descr ...

  2. css filter详解

    css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...

  3. css中的width,height，属性与盒模型的关系

    这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属 ...

  4. CSS选择器详解（伪类） 转 http://blog.csdn.net/Panda_m/article/details/50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  5. JSX设置CSS样式详解

    JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...

  6. 带你走进CSS定位详解

    学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...

  7. 此博客使用的CSS样式详解！

    此博客使用的CSS样式详解! 页面使用的博客园模板为:LuxInteriorLight,可以在博客皮肤里找到. 页首屏蔽广告代码 <script>console.log("顶部标 ...

  8. CSS中width和height与盒子模型的关系

    盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...

  9. Spark Streaming揭秘 Day28 在集成开发环境中详解Spark Streaming的运行日志内幕

    Spark Streaming揭秘 Day28 在集成开发环境中详解Spark Streaming的运行日志内幕 今天会逐行解析一下SparkStreaming运行的日志,运行的是WordCountO ...

随机推荐

  1. 【Nodejs】使用http.request批量下载MP3，发现网络文件大于1000K时下载文件为0K

    这又一次让我对http.request产生质疑 //====================================================== // 喜爱123四年级上英语MP3下载 ...

  2. CentOS6.5安装nginx1.5.8时出现“cp: "conf/koi-win" 与"/usr/local/nginx/conf/koi-win" 为同一文件”的解决方法

    安装方法主要参考了:http://www.cnblogs.com/zhoulf/archive/2013/02/09/2909653.html这篇文章,出现“cp: "conf/koi-wi ...

  3. C#.NET常见问题(FAQ)-如何使用变量访问控件属性

    不管哪种类型的控件,可以用下面这种强制转换和Controls.Find的方法来读写控件的属性 //我在界面上做了三个picturebox控件 PictureBox p; //注意索引必须从1开始,并且 ...

  4. NSString json 车NSDictionary

    NSData *jsonContent = [[userInfo objectForKey:@"acme"] dataUsingEncoding:NSUTF8StringEncod ...

  5. Swift语言精要-闭包(Closure)

    闭包(Closure)这个概念如果没学过Swift的人应该也不会陌生. 学过Javascript的朋友应该知道,在Javascript中我们经常会讨论闭包,很多前端工程师的面试题也会问到什么是闭包. ...

  6. 解决 IE6 背景缓存

    解决 IE6 背景缓存 <!--[if IE 6]><script type="text/javascript">document.execCommand( ...

  7. Getting in Line UVA 216

     Getting in Line  Computer networking requires that the computers in the network be linked. This pro ...

  8. Jaspersoft Studio 导出PDF格式中文不显示

    1:设置字体 2:应用上面设置的字体

  9. java 对视频和图片进行加密解密[转]

    是时候回到文件加密与解密的具体实现这个主题上来了.后续的举例均采用图片(包括GIF动画)类型,而其他类型资源的实现原理相同,就不一一给出了.首先来看对一幅JPG类型图片进行异或加密的Java实现,由于 ...

  10. python 解析top文件格式

    top - 16:14:35 up 2 days, 3:04, 7 users, load average: 2.22, 1.84, 1.77 Tasks: 512 total, 2 running, ...