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. AES加密算法在Linux下出现随机加密结果

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  2. vue动态构造下拉

    在点击菜单的进入后台初始化方法 @RequestMapping("/init") public String init(@ModelAttribute("response ...

  3. SpringBoot上传文件临时失效问题

    线上的系统中不能上传文件了,出现如下错误: org.springframework.web.multipart.MultipartException: Could not parse multipar ...

  4. 一篇非常好的分析 Selenium 2 和 3 的原理： selenium3：你安装 geckodriver 了吗？

    转自:https://testerhome.com/topics/10248 另一篇:Selenium WebDriver的工作原理 https://blog.csdn.net/yoyocat915/ ...

  5. leetcode 140 单词拆分2 word break II

    单词拆分2,递归+dp, 需要使用递归,同时使用记忆化搜索保存下来结果,c++代码如下 class Solution { public: //定义一个子串和子串拆分(如果有的话)的映射 unorder ...

  6. Error-ASP.NET：在从服务器接收结果时发生传输级错误。 (provider: Session Provider, error: 19 - 物理连接不可用)

    ylbtech-Error-ASP.NET:在从服务器接收结果时发生传输级错误. (provider: Session Provider, error: 19 - 物理连接不可用)  1.返回顶部 1 ...

  7. 解决打开AS多次提示Untrusted Server's certificate问题

    解决方法如下: 打开Studio左上角的file—>Setting-->Tools-->Server Certificates ->最后勾上 Accept non-truste ...

  8. [mysql]root用户登录mysql,输入密码后报错:Access denied for user 'root'@'localhost'

    问题如下: wangju-G4:~$ mysql -u root -p Enter password: ERROR (): Access denied for user 'root'@'localho ...

  9. 【HANA系列】SAP HANA跟我学HANA系列之创建属性视图一

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA跟我学HANA系 ...

  10. LeetCode.938-范围内求二叉搜索树节点值之和(Range Sum of BST)

    这是悦乐书的第359次更新,第386篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第221题(顺位题号是938).给定二叉搜索树的根节点,返回节点值在[L,R]之间的所有 ...