目录结构：

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. Cognos11中Dashboard和HTML页面的简单集成

    一.需求 之前很多第三方的程序都是通脱URL的形式可以和cognos Report进行集成,在我前几天的博文<Cognos11中通过URL访问report的设置>一篇中也提到了普通repo ...

  2. Python 各种测试框架简介

    转载:https://blog.csdn.net/yockie/article/details/47415265 一.doctest doctest 是一个 Python 发行版自带的标准模块.本篇将 ...

  3. 算法基础：删除字符串中出现次数最少的字符（Golang实现）

    描写叙述: 实现删除字符串中出现次数最少的字符.若多个字符出现次数一样,则都删除.输出删除这些单词后的字符串. 字符串中其他字符保持原来的顺序. 输入: 字符串仅仅包括小写英文字母, 不考虑非法输入, ...

  4. Skyline开发1-环境搭建

    三维一直很火热,它比二维的明显优势是立体效果,更接近真实的物理世界:凡是与三统有关的就叫XX模型,其实就是一种数据罢了:简单的浏览.展示 操作就看起来很炫,尤其是对外行的人来说.无论如何,领导.用户喜 ...

  5. C/S通信模型与B/S通信模型介绍

    1.客户端与服务器之间的通信模型 基于Socket连接的客户端与服务器之间的通信模型图如上图所示,整个通信过程如下所示: (1) 服务器端首先启动监听程序,对指定的端口进行监听,等待接收客户端的连接请 ...

  6. DIV+CSS IE6/IE7/IE8/FF兼容问题汇总

    1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-comp ...

  7. innosetup完整脚本

    #define MyAppName "Somarto"#define MyAppVersion "1.0.0"#define MyAppPublisher &q ...

  8. linux2.6.30.4内核移植（6）——移植应用程序hello world常见的错误：-bin/sh ./hello not found

    通常在开发板上搭建好开发平台后,我们会试着移植一个最简单的应用程序Hello world来测试一下.初次尝试,我们经常会碰到的问题就是,在开发板上运行./hello的时候出错:-bin/sh ./he ...

  9. springboot整合mybatis的两种方式

    https://blog.csdn.net/qq_32719003/article/details/72123917 springboot通过java bean集成通用mapper的两种方式 前言:公 ...

  10. Mongostat 3.0详解

    可以参考之前写的这篇博客: Mongostat 2.6详解 mapped Changed in version 3.0.0. Only for MMAPv1 Storage Engine. The t ...