目录结构：

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. PDO 增删改查封装的类

    Selecting Data 你在mysql_*中是这样做的 <?php $result = mysql_query('SELECT * from table') or die(mysql_er ...

  2. [Algorithm] Circular buffer

    You run an e-commerce website and want to record the last N order ids in a log. Implement a data str ...

  3. 如何通过 iframe 共享 jQuery $.data？

    index.html <div id="div1"> </div> <iframe src="ajax2.html" name=& ...

  4. 【S6】当心C++编译器最烦人的分析机制

    1.考虑一个包含int的文件,复制到list,如下: ifstream dataFile("ints.bat"); list<int> data(istream_ite ...

  5. java parse 带英文单词的日期字符串 转 date （转化新浪微博api返回的时间）

    拂晓风起 专注前端技术cocos2d.js.flash.html5,联系:kenkofox@qq.com.如果读者要找腾讯工作机会,请不吝推荐简历. 博客园 首页 新闻 新随笔 联系 管理 订阅 随笔 ...

  6. 用javascript请求动态页url返回更新

    例如我们用Ajax请求一个动态页返回的信息,或一个图片验证码请求一个*.ashx页面,第一次请求没问题,而第二次请求时,不变化,为啥? 因为第二次及以后请求的url与第一次是一样的,所以服务器(或是浏 ...

  7. 牛客网-《剑指offer》-调整数组顺序使奇数位于偶数前面

    题目:http://www.nowcoder.com/practice/beb5aa231adc45b2a5dcc5b62c93f593 C++ class Solution { public: vo ...

  8. 使用influx控制台工具操作InfluxDB

    这里记录下influx控制台的简单使用,如需更多功能请参考InfluxDB官方文档: https://docs.influxdata.com/influxdb/v1.1/ 环境: CentOS6.5_ ...

  9. JAVA & Android 等待线程池内任务全部完成后退出

    void shutdownAndAwaitTermination(ExecutorService pool) { pool.shutdown(); // Disable new tasks from ...

  10. 〖Linux〗穿越城墙之后，直接连接国内网站的路由配置

    因为有需要做Android相关的开发工作,很多时候要穿越之后才能做事情: 如Android文件加密预研.Android NDK/SDK的下载,都需要使用得到Google: 但是穿越之后,访问国内网站就 ...