初探css-18 尺寸
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 尺寸的更多相关文章
- 精通CSS+DIV网页样式与布局--初探CSS
CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...
- HTML+CSS基础 css的尺寸
css的尺寸 width 宽 height高 Line-light 行高 行高是由三部分构成,上间距.文本高度.下间距. 且上下间距相等.所以文字居中 行高.一旦设置行高了,元素内部必须 ...
- css的尺寸、display的属性、以及浮动和清除浮动的方法
css的尺寸width heightline-height 行高是由三部分构成,上间距 文本高度 下间距,且上下间距相等.所以文字居中.行高:一旦设置了行高,元素内部必须有内容.line-height ...
- 初探CSS - 5 创建
CSS 创建 当读到一个样式表时,浏览器会根据它来格式化 HTML 文档. 如何插入样式表 插入样式表的方法有三种: 外部样式表(External style sheet) 内部样式表(Interna ...
- 初探CSS
css基本框架 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- 初探css -11 Table表格
CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkiste Maria Anders Germany Bergl ...
- 初探CSS -3 语法
CSS 语法 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 关于对CSS尺寸单位'em'的长期误解
一直以来认为'em'是相对于父元素的字体大小. 直到今天学习移动WEB开发,重新复习css的尺寸大小时,惊奇发现:对em深深的误解了!!! 在CSS官网对em的解释实例是: a. h1{line-he ...
- 对CSS尺寸单位'em'的长期误解
一直以来认为'em'是相对于父元素的字体大小. 直到今天学习移动WEB开发,重新复习css的尺寸大小时,惊奇发现:对em深深的误解了!!! 在CSS官网对em的解释实例是: a. h1{line-he ...
- Atitit.html css 浏览器原理理论概论导论attilax总结
Atitit.html css 浏览器原理理论概论导论attilax总结 1.1. 浏览器是怎样工作的:渲染引擎,HTML解析(连载二)1 2. 5.1.1 DOM标准 1011 3. <We ...
随机推荐
- react属性之exact
exact是Route下的一个属性,react路由会匹配到所有能匹配到的路由组件,exact能够使得路由的匹配更严格一些. exact的值为bool型,为true时表示严格匹配,为false时为正常匹 ...
- 图片存进Mat类中，然后调用图像矩阵元素
Mat img = imread();//灰度图 imwrite("origin.png",img); if(img.empty()) { cout << " ...
- 【翻译】WPF应用程序模块化开发快速入门（使用Prism+MEF）
编译并运行快速入门 需要在VisualStudio 2010上运行此快速入门示例 代码下载:ModularityWithMef.zip 先重新生成解决方案 再按F5运行此示例 说明: 在此快速入门示例 ...
- Selenium 2自动化测试实战1（1-2章节重点笔记）
1.黑盒测试 黑盒测试,指的是把被测的软件看做一个黑盒子,不去关心盒子里面的结构是什么样子的,只关心软件的输入数据和输出结果. 2.白盒测试白盒测试,指的是把盒子打开,去研究里面的源代码和程序执行结果 ...
- Java学习之==>JDBC
一.概述 官方解释: JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的 Java API,可以为多种关系型数据库提供统一访问,它由一组用 ...
- 利用Python进行异常值分析实例代码
利用Python进行异常值分析实例代码 异常值是指样本中的个别值,也称为离群点,其数值明显偏离其余的观测值.常用检测方法3σ原则和箱型图.其中,3σ原则只适用服从正态分布的数据.在3σ原则下,异常值被 ...
- matlab2012a过期问题解决办法（转载）
转载:http://blog.sina.com.cn/s/blog_4a46812b0102x694.html 以前安装过Matlab2013a等高版本,发现自己win7 系统每次重启后,Matl ...
- Java编程思想—八皇后问题（数组法、堆栈法）
Java编程思想-八皇后问题(数组法.堆栈法) 实验题目:回溯法实验(八皇后问题) 实验目的: 实验要求: 实验内容: (1)问题描述 (2)实验步骤: 数组法: 堆栈法: 算法伪代码: 实验结果: ...
- 基于高斯分布的异常检测(Anomaly Detection)算法
记得在做电商运营初期,每每为我们频道的促销活动锁取得的“超高”销售额感动,但后来随着工作的深入,我越来越觉得这里面水很深.商家运营.品类运营不断的通过刷单来获取其所需,或是商品搜索排名,或是某种kpi ...
- 【神经网络与深度学习】卷积神经网络-进化史：从LeNet到AlexNet
[卷积神经网络-进化史]从LeNet到AlexNet 本博客是[卷积神经网络-进化史]的第一部分<从LeNet到AlexNet> 如需转载,请附上本文链接:http://blog.csdn ...