html+css基础教程入门之CSS 尺寸

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

CSS height 属性

height 属性用以设置元素的高度，单位可以使用px，em等，通常用使用PX（像素）为html单位。这个属性定义元素内容区的高度，在内容区外面可以增加内边距、边框和外边距。

设置段落的高度和宽度：

p{ 
  height:100px;
  width:100px;
 }

height属性可能的值有：

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

length: 使用 px、em 等单位定义高度。

%: 基于包含它的块级对象的百分比高度。通常单独对一个div高度为百分比没有效果。

inherit: 规定应该从父元素继承 height 属性的值。

CSS line-height 属性

line-height 属性设置行间的距离（行高）。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。 line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

设置段落的高度和行高：

p{ 
  height:100px;
  line-height:100px;
 }

CSS max-height和min-height 属性

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

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

max-height和min-height 属性不包括外边距、边框和内边距。

p{ 
  max-height:50px;
 }

对为什么需要设置max-height最大高度的解释：
此属性较少使用，可能是为了避免内容太多将高度撑太高影响布局美化统一，这个时候我们设置最大高度限制。比如一个table tr td表格对象里装一个图片，而图片高度不确定，如果太高了不想图片撑破tr td表格，这个时候通过css max-height限制图片最大高度是有必要的。

设置min-height最小高度应用地方的解释：
有时设置一个对象盒子时候避免对象没有内容时候不能撑开，但内容多少不能确定所以又不能固定高度，这个时候我们就会需要css来设置min-height最小高度撑高对象盒子。当内容少时候最小高度能将内容显示出，如果内容多余最小高度能装下时候，对象也会再随内容增多而增高。根据实践经验，如果仅仅是上面这些处理，往往是无法应对实际需求的，存在一些“致命问题”。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

IE6不支持max-height解决方法

1)使用css hack来解决

.box{ 
  max-height:50px;_height:50px;
 }

2)还有直接使用以下CSS代码

.box{ 
  height: expression(this.height> 50 ?50: true);  max-height: 50px;
 }

但是此CSS代码会引起图片加载后不能正常显示（图片随机会被缩小无法正常显示）,推荐使用max-height:50px;_height:50px;来解决IE6不能max属性的问题。

同理，推荐使用css hack来解决IE6不支持min-height的问题。

CSS width 属性

width 属性设置元素的宽度，这个属性定义元素内容区的宽度，在内容区外面可以增加内边距、边框和外边距。

传统Html 宽度属性单词：width 如width="300";

CSS 宽度属性单词：width 如width:300px;

设置段落的高度和宽度：

p{ 
  height:100px;
  width:100px;
 }

width属性可能的值有：

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

length: 使用 px、em 等单位定义宽度。

%: 定义基于包含块（父元素）宽度的百分比宽度。

inherit: 规定应该从父元素继承width属性的值。

CSS max-width和min-width 属性

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

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

最小宽度(min-width)与最大宽度(max-width)用于设置图片最小最大宽度限制比较多。比如一个图片为主列表，对象里图片大小不定时候，为了不想让他太小不统一这个时候我们可以使用css最小宽度样式。再如，一个盒子里有文章有图片混排的时候，有时图片宽度不能确定，这个时候如果html img图片宽度超出了div盒子宽度，可能图片就会撑破div盒子造成图片混乱。

设置段落的最大宽度：

p{ 
  max-width:100px;
 }

设置段落的最小宽度：

p{ 
  min-width:100px;
 }

Css max-width与css min-width可以同时在一个CSS选择器使用设置一个对象最大最小宽度样式。一般对图片对象设置此两项样式比较多。

IE6不支持max-width的解决方法

.box{max-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");overflow:hidden;}

说明：max-width:1000px; 这个是IE6以上级其它品牌浏览器支持最大范围宽度。
而_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");overflow:hidden;则是让IE6支持max-width替代CSS代码，但效果和其它版本浏览器相同效果。

IE6不支持min-width的解决方法

.box{min-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)>1000?"1000px":"");}

让IE6都支持max-width和min-width的解决方法

用到CSS代码：
_width:expression(this.scrollWidth > 620 ? "620px" : (this.scrollWidth < 1? "1px" : "auto"));

说明：不能超出大于620px的宽度，又不小于1像素的宽度。