Home > Web Front-end > HTML Tutorial > CSS 尺寸_html/css_WEB-ITnose

CSS 尺寸_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:35:54
Original
834 people have browsed it

概览

CSS 尺寸属性允许你控制元素的高度(height)和宽度(width)。

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

我们一般所指的高度和宽度是指下图中红线标示的区域。

IE 5.X 和 6 这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。简单知道就行了。

height

height 属性设置元素的高度。行内非替换元素(如:,,影响他们高度的是line-height属性)会忽略这个属性。

可选的值:

  • auto 默认。浏览器会计算出实际的高度。

  • length 使用 px, cm, mm, em 等单位定义高度。

  • % 基于包含它的块级对象的百分比定义高度。

 

div.normal {    height: auto}div.big {    height: 160px}div.small {    height: 30px}
Copy after login
width

width 属性设置元素的宽度。行内非替换元素(如:,)会忽略这个属性。

可选的值:

  • auto 默认。浏览器会计算出实际的宽度。

  • length 使用 px, cm, mm, em 等单位定义宽度。

  • % 基于包含它的块级对象的百分比定义宽度。

div.normal {    width: auto}div.big {    width: 160px}div.small {    width: 30px}
Copy after login
max-height

max-height 属性设置元素的最大高度。

该属性值会对元素的高度设置一个最高限制。因此,元素可以比指定值矮,但不能比其高。不允许指定负值。

可选的值:

  • none 默认。对元素的高度没有限制。

  • length 使用 px, cm, mm, em 等单位定义元素的最大高度值。

  • % 基于包含它的块级对象的百分比定义最大高度。

p {    padding: 0;    margin: 0;    max-height: 10px;    overflow: none;}
Copy after login

设置最大高度后,段落的高度不会超过最大高度,但文本会溢出,其他部分可以覆盖到溢出的部分。

max-width

max-width 定义元素的最大宽度。

该属性值会对元素的宽度设置一个最高限制。因此,元素可以比指定值窄,但不能比其宽。不允许指定负值。

可选的值:

  • none 默认。对元素的宽度没有限制。

  • length 使用 px, cm, mm, em 等单位定义元素的最大宽度值。

  • % 基于包含它的块级对象的百分比定义最大宽度。

p {    max-width:100px;}
Copy after login
min-height

min-height 属性设置元素的最小高度。

该属性值会对元素的高度设置一个最低限制。因此,元素可以比指定值高,但不能比其矮。不允许指定负值。

可选的值:

  • length 使用 px, cm, mm, em 等单位定义元素的最小高度值,默认值是0。

  • % 基于包含它的块级对象的百分比定义最小高度。

p {    min-height:100px;}
Copy after login
min-width

min-width 属性设置元素的最小宽度。

该属性值会对元素的宽度设置一个最小限制。因此,元素可以比指定值宽,但不能比其窄。不允许指定负值。

可选的值:

  • length 使用 px, cm, mm, em 等单位定义元素的最小宽度值,默认值:取决于浏览器。

  • % 基于包含它的块级对象的百分比定义最小宽度。

p {    min-width:100px;}
Copy after login
小结

CSS 尺寸就是指元素内容的高度和宽度,虽然说非常简单,但却是必会知识,从属性的字面意思基本就可以领会其意思,没什么深入不深入可谈。

CSS 尺寸与盒模型有部分关联,稍后会补充盒模型的相关笔记。

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template