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. docker-compose常用命令(持续更新...)

    build 构建或重建服务 help 命令帮助 kill 杀掉容器 logs 显示容器的输出内容 port 打印绑定的开放端口 ps 显示容器 pull 拉取服务镜像 restart 重启服务 rm ...

  2. 32位下操作mongodb心得

    本文出处:http://blog.csdn.net/chaijunkun/article/details/7236911,转载请注明. 随着互联网的变革,互联网的内容生成方式也逐渐地从网站生成转为用户 ...

  3. Reactjs之Axios、fetch-jsonp获取后台数据

    1.新增知识点 /** Axios获取服务器数据(无法跨域,只能让后台跨域获取数据) react获取服务器APi接口的数据: react中没有提供专门的请求数据的模块.但是我们可以使用任何第三方请求数 ...

  4. Python学习笔记：（十二）输入输出

    一.格式化输出 1.str.format()函数,格式化输出值 2.将输出值转变为字符串,可以使用repr()和str() str()函数将返回一个易读的表达式形式: repr()返回一个解释器易读的 ...

  5. java：Oracle（级联删除，左右内外交叉自然连接，子查询，all，any，in）

    1.级联删除: -- 级联删除:裁员,公司倒闭 -- 级联删除(cascade),设置为null(setnull),放任不管(No action) -- cascade:(以一对多为例)如果删除多的一 ...

  6. Horizon Web管理界面

    一.horizon 介绍: Horizon 为 Openstack 提供一个 WEB 前端的管理界面 (UI 服务 )通过 Horizone 所提供的 DashBoard 服务 , 管理员可以使用通过 ...

  7. CTF—攻防练习之SMB私钥泄露

    攻击机:192.168.32.152 靶机 :192.168.32.155 打开靶机 nmap一下 我们看到了开放了 ssh,smb,mysql这些端口,还有一个大端口 对smb服务我们可以1.使用空 ...

  8. Windos下navcat连接虚拟机中的mysql

    进入mysql命令行, 使用root用户,密码:youpassword(你的root密码)连接到mysql服务器: # mysql -u root -proot  mysql>GRANT ALL ...

  9. CPU 使用率低 but负载高

    一.关于负载 什么是负载:负载就是cpu在一段时间内正在处理以及等待cpu处理的进程数之和的统计信息,也就是cpu使用队列的长度统计信息,这个数字越小越好(如果超过CPU核心*0.7就是不正常) 负载 ...

  10. 20191224 Spring官方文档（启动）

    再学Spring 之前看过Spring教学视频,看过<Spring5高级编程>,但是对于Spring始终还是感觉差了一点,应该是底层没有学好,这次再学Spring,就是要将Spring底层 ...