CSS 尺寸 (Dimension)

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

更多实例

这个例子演示了如何设置不同元素的高度。

<style>

img.normal

{

    height:auto;

}

img.big

{

    height:120px;

}

p.ex

{

    height:100px;

    width:100px;

}

</style>

</head>

<body>

<img class="normal" src="logocss.gif" width="95" height="84" /><br>

<img class="big" src="logocss.gif" width="95" height="84" />

<p class="ex">这个段落的高和宽是 100px.</p>

<p>这是段落中的一些文本。这是段落中的一些文本。

这是段落中的一些文本。这是段落中的一些文本。

这是段落中的一些文本。这是段落中的一些文本.</p>

</body>

这个例子演示了如何使用百分比值设置元素的高度。

<style>

html {height:100%;}

body {height:100%;}

img.normal {height:auto;}

img.big {height:50%;}

img.small {height:10%;}

</style>

</head>

<body>

<img class="normal" src="logocss.gif" width="95" height="84" /><br>

<img class="big" src="logocss.gif" width="95" height="84" /><br>

<img class="small" src="logocss.gif" width="95" height="84" />

</body>

本例演示如何使用像素值来设置元素的宽度。

<style>

img {width:200px;}

</style>

</head>

<body>

<img src="logocss.gif" width="95" height="84" />

</body>

此示例演示如何设置元素的最大高度。

<style type="text/css">

p

{

    max-height:50px;

    background-color:yellow;

}

</style>

</head>

<body>

<p>本段落的最大高度被设置为 50px。 本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。</p>

</body>

此示例演示如何设置元素的最小高度。

<style>

p

{

    min-height:100px;

    background-color:yellow;

}

</style>

</head>

<body>

<p>这段的最小高度设置为100 px。</p>

</body>

这个例子演示了如何使用像素值设置元素的最小宽度。

<style>

p

{

    min-width:150px;

    background-color:yellow;

}

</style>

</head>

<body>

<p>这个段落的最小宽度设置为 150px。</p>

</body>

所有CSS 尺寸 (Dimension)属性

属性 描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

初探css-18 尺寸的更多相关文章

  1. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  2. HTML+CSS基础 css的尺寸

    css的尺寸 width 宽   height高 Line-light   行高    行高是由三部分构成,上间距.文本高度.下间距. 且上下间距相等.所以文字居中 行高.一旦设置行高了,元素内部必须 ...

  3. css的尺寸、display的属性、以及浮动和清除浮动的方法

    css的尺寸width heightline-height 行高是由三部分构成,上间距 文本高度 下间距,且上下间距相等.所以文字居中.行高:一旦设置了行高,元素内部必须有内容.line-height ...

  4. 初探CSS - 5 创建

    CSS 创建 当读到一个样式表时,浏览器会根据它来格式化 HTML 文档. 如何插入样式表 插入样式表的方法有三种: 外部样式表(External style sheet) 内部样式表(Interna ...

  5. 初探CSS

    css基本框架 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. 初探css -11 Table表格

    CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkiste Maria Anders Germany Bergl ...

  7. 初探CSS -3 语法

    CSS 语法 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  8. 关于对CSS尺寸单位'em'的长期误解

    一直以来认为'em'是相对于父元素的字体大小. 直到今天学习移动WEB开发,重新复习css的尺寸大小时,惊奇发现:对em深深的误解了!!! 在CSS官网对em的解释实例是: a. h1{line-he ...

  9. 对CSS尺寸单位'em'的长期误解

    一直以来认为'em'是相对于父元素的字体大小. 直到今天学习移动WEB开发,重新复习css的尺寸大小时,惊奇发现:对em深深的误解了!!! 在CSS官网对em的解释实例是: a. h1{line-he ...

  10. Atitit.html css  浏览器原理理论概论导论attilax总结

    Atitit.html css  浏览器原理理论概论导论attilax总结 1.1. 浏览器是怎样工作的:渲染引擎,HTML解析(连载二)1 2. 5.1.1 DOM标准 1011 3. <We ...

随机推荐

  1. var $this = $(this)

    jQuery: What’s the Difference Between $(this), $this, and this? What about $this? $this is a little ...

  2. gcc编译错误

    使用boost的时候遇到一个链接错误 undefined reference to `boost::system::detail::generic_category_instance 出现这个问题的有 ...

  3. oracle取差值集合

    Oracle Minus关键字 SQL中的MINUS关键字 SQL中有一个MINUS关键字,它运用在两个SQL语句上,它先找出第一条SQL语句所产生的结果,然后看这些结果有没有在第二个SQL语句的结果 ...

  4. HSV颜色识别-HSV基本颜色分量范围

    原文地址:https://blog.csdn.net/taily_duan/article/details/51506776 一般对颜色空间的图像进行有效处理都是在HSV空间进行的,然后对于基本色中对 ...

  5. Eclipse如何安装Fat Jar

    〇.安装前准备 1.Fat Jar插件下载地址:https://sourceforge.net/projects/fjep/files/ 2.安装前请确认Eclipse版本:Help --> A ...

  6. Rate 评分

    评分组件 基础用法 评分被分为三个等级,可以利用颜色对分数及情感倾向进行分级(默认情况下不区分颜色).三个等级所对应的颜色用过colors属性设置,而它们对应的两个阈值则通过 low-threshol ...

  7. idea 编译 brooklin

    gradle 项目导入 idea 之后,各种报错,run 不起来 手动加入各种依赖 配置启动类 指定 log4j.properties

  8. 阶段3 2.Spring_10.Spring中事务控制_5 spring事务控制的代码准备

    创建一个工程,只搭建环境不做配置.等配置的时候把这个项目相关的代码再复制到新项目里面 jar包的打包方式 导入包 事务控制也是基于AOP的.所以这里导入aspectjweaver 复制jdbcTemp ...

  9. ls | ethtool

    ls -lhS *.mp4|awk '{if($5>4000000) print $0}'ls -lhS *.mp4|awk '{if(($5>100000) && ($5 ...

  10. RTX和谐说明

    1.下载安装原版RTX20152.打开“服务”,停止RTX开头的服务.3.替换C:\Program Files\Tencent\RTXServer\License目录下的License.ini文件:替 ...