目录结构：

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

  1. CSS中详解height属性

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

  2. css filter详解

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

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

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

  4. JSX设置CSS样式详解

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

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

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

  6. 带你走进CSS定位详解

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

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

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

  8. SQL 中详解round(),floor(),ceiling()函数的用法和区别？

    SQL 中详解round(),floor(),ceiling()函数的用法和区别? 原创 2013年06月09日 14:00:21   摘自:http://blog.csdn.net/yueliang ...

  9. CSS中具有继承性的属性：

    CSS中具有继承性的属性:   color:#eee font: font-style font-variant: font-weight:bold font-size font-family: fo ...

随机推荐

  1. 2013 duilib入门简明教程 -- FAQ (19)

        虽然前面的教程几乎把所有的知识点都罗列了,但是有很多问题经常在群里出现,所以这里再次整理一下.     需要注意的是,在下面的问题中,除了加上XML属性外,主窗口必须继承自WindowImpl ...

  2. hibernate注解方法使用总结（转）

    原博文地址:http://blog.sina.com.cn/s/blog_935ebb670101dnre.html 1.类级别注解 @Entity     映射实体类 @Table    映射数据库 ...

  3. jquery中on/delegate的原理

    jquery中on/delegate的原理 早期版本中叫delegate, 后来有过live函数,再后来统一用on.下面的方法等效: // jQuery 1.3 $(selector).(events ...

  4. MySql联接算法

    联接算法是MySql数据库用于处理联接的物理策略.在MySql 5.5版本仅支持Nested-Loops Join算法,如果联接表上有索引时,Nested-Loops Join是非常高效的算法.如果有 ...

  5. 【开源】OSharp框架解说系列（2.1）：EasyUI的后台界面搭建及极致重构

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...

  6. 走进AngularJs(六) 服务

    今天学习了一下ng的service机制,作为ng的基本知识之一,有必要做一个了解,在此做个笔记记录一下. 一.认识服务(service) 服务这个概念其实并不陌生,在其他语言中如java便有这样的概念 ...

  7. tn文本分析语言(二) 基本语法

    tn是desert和tan共同开发的一种用于匹配,转写和抽取文本的语言.解释器使用Python实现,代码不超过1000行. 本文主要介绍tn的基本语法.高级内容可以参考其他篇章.使用这样的语法,是为了 ...

  8. 如何搭建DNS服务

    继NTP时间服务器后,继续搭建DNS服务,鉴于昨晚撰写时间超过预期,这次改变策略,先把自己需要用到的部分写出来(主要是基于RAC的搭建,只涉及正向和反向DNS解析),后面再添加必要的说明和阐述. 试验 ...

  9. 学习总结之 WebApi 用户登录和匿名登录，及权限验证

    近些天,看了一些博客园大牛关于webApi项目的的文章,也有请教师兄一些问题,自己做了个Demo试了试,收获甚多.感谢感谢,下面是我一些学习的总结,如若有错的地方请多多指教!! WebApi登陆与身份 ...

  10. 开始编写CSS

    本文由大漠根据Krasimir Tsonev的<Starting to Write CSS>所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点.如需转载此译文, ...