DIV+CSS基础DIV+CSS补充知识:CSS关于尺寸的定义

DIV+CSS补充知识:CSS关于尺寸的定义

在CSS里可以定义元素的宽度,高度,行间距,最小宽度,最大宽度,最小高度和最大高度:

width 设置元素的宽度

height 设置元素的高度

line-height 设置行间距

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

max-width 设置元素的最大宽度

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

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

例如,我们给网页中的图片定义宽度和高度,可以这样定义:

#top img {width:400px;height:300px;}

除了定义具体数值以外,还可以通过百分比来定义:

#top {width:50%;}

表示该元素宽度为父元素的一半。

同样的,我们可以使用数值和百分比来定义行间距,例如:

#top {line-height:25px;}

当给元素定义了最小宽高度的时候,当其包含的内容未超出该元素时,则以最小尺寸显示,当超出后则随着内容的多少而增加尺寸。

当给元素定义了最大宽高度的时候,当其包含的内容未超出该元素时,则随着内容的多少而改变尺寸,但始终不会超过定义的最大尺寸。

例如,我们给文章里的插图定义最大宽度为100%,即:

#text img {max-width:100%;}

当这样设置之后,如果图片的宽度大于文章内容的宽度,则图片会缩放到文章内容的宽度显示,当图片内容小于文章内容的宽度,则会以本身的尺寸来显示。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.liverdoctor.cn/div_css/18.html