目录结构：

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. 个人知识点总结——Java并发

    Java并发实在是一个非常深的问题,这里仅仅简单记录一下Java并发的知识点.水太深.假设不花大量的时间感觉全然hold不住,可是眼下的精力全然不够,兴趣也不在这 什么是线程安全性 某个类的行为和其规 ...

  2. hadoop集群配置SSH免登陆

    今天给大家总结一下hadoop集群之间免登陆的步骤 node1 ssh node4 1.在node1中生成密钥 [root@node1 ~]# ssh-keygen -t dsa -P '' -f ~ ...

  3. 在sublime text2上安装xdebug

    目录 安装Xdebug extension 设定php.ini 安装Xdebug plugin for Sublime Text2 1.安装Xdebug extension 先从安装Xdebug开始, ...

  4. android中使用WebView请求本地网页

    使用WebView的方式请参考我的上一篇文章:android中使用WebView请求网页 这里说一下请求本地网页的方法: 本地网页应该把网页保存在src/main/assets目录下: webView ...

  5. 获取js连接参数js_args

    获取js连接参数,如下以链接: <script src="js/jscript.js?skin=green" type="text/javascript" ...

  6. 牛客网-《剑指offer》-二维数组中的查找

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

  7. 查看java进程启动的详细参数和过程

    jsp 查看java进程: 6448 main 然后,使用jinfo pid 查看: jinfo 6448 有一行VM Flages:表示启动参数 VM Flags: -Dproc_main -*** ...

  8. Android Webservices 返回多行多列数据(Dataset)

    对于之前从事.net或者java开发人员,习惯了从后台获取网格数据(多行多列DataTable),但转行从事android开发,难免会不习惯 Android调用Webservice时,如果返回值是一个 ...

  9. sell 项目 类目表 设计 及 创建

    1.数据库设计 2.类目表 创建 /** * 类目表 */ create table `product_category` ( `category_id` int not null auto_incr ...

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

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