盒子模型之元素宽高属性

盒子模型之元素宽高属性

1.1概述
    每个元素都有一个继承的height和width属性。根据元素的不同目的，可以修改元素的height和width值以覆盖其默认值。
    一个元素默认的height属性由其内容决定。在垂直方向上所有元素都会尽可能的伸缩来适应内容。
    一个元素的width取决于它的显示类型。块级元素的width默认100%，它会铺满可用的整个横向空间。行内元素则是在横向方向尽可能的伸缩来适应内容
1.2设置盒子高度
1.2.1 CSS height属性
语法:
1、设置高度自动
height:auto;
    通常默认高度是auto（自动），自适用内容而增高。如果想高度自适应不用设置高度属性。
2、设置高度为固定数值
height:50px; 设置对象高度为50px
height:50em; 设置对象高度为50相对长度em
    注意：通常单独对一个div高度为百分比没有效果。
1.2.2 CSS min-height属性
    设置一个对象盒子时，在不能确定内容多少，即不能设置固定高度的情况下，为了避免对象没有内容时不能撑开，则需要设置CSS min-height最小高度撑高对象盒子。内容少时，最小高度能将内容显示出；内容多余最小高度时，能装下且对象盒子也会随内容增多而增高。
语法：
div{
min-height:50px;//设置对象盒子的最小高度限制为50px
}
1.2.3 CSS max-height属性
    此属性很少使用，可能是为了避免内容太多将高度撑太高影响布局美化统一，这时设置最大高度限制。比如，一个table tr td表格对象里装一个图片，而图片高度不确定，如果太高了不想图片撑破tr td表格，这时通过css max-height限制图片最大高度是有必要的。
语法：
div{
max-height:50px;//设置对象盒子的最大高度限制为50px
}
1.2.4总结
    对象盒子里内容增加超出高度限制时，设置属性为min-height的对象盒子会随内容的增加而自动增高；设置属性为max-height的对象盒子高度不变，内容溢出。
小技巧：为设置属性为max-height的对象盒子添加CSS overflow:hidden属性即可隐藏最大高度显示溢出内容。
注意：CSS max-height/ min-height 属性IE6不支持，IE7及以上浏览器和其它浏览器均支持。
1.3设置盒子宽度——CSS width属性
1.3.1语法
div{
width:200px;//设置div盒子的宽度为200px（像素）
}
div{
width:20em;//设置div盒子的宽度为20相对长度单位
}
div{
width:20%;//设置div盒子的宽度为20%(相对与父级的百分比宽度)
}
1.3.2 DIV盒子自适应宽度的实现
    自适应宽度，即一个网页的宽度随浏览器宽度改变而自动改变。要实现自适应宽度只要运用百分比即可。前提是最外层没有宽度限制。
1.3.3 CSS min-width/max-width属性
1、语法
div{
min-width:50px;//设置div盒子的最小宽度为50px
}
div{
max-width:50px;//设置div盒子的最大宽度为50px
}
2、实际应用
    min-width属性与max-width属性多用于设置图片最小最大宽度限制。
    设置一个盒子的最小宽度限制大于实际图片宽度时，图片会被拉伸到最小宽度；小于实际图片宽度时，盒子宽度为图片的实际宽度。
    设置一个盒子的最大宽度限制小于实际图片宽度时，图片会被缩小到最大宽度，而盒子的宽度始终不会变。
3 、总结
    max-width属性与min-width属性可同时在一个CSS选择器使用，设置一个对象最大最小宽度样式。一般对图片对象设置此两项样式比较多，但在IE6中不支持此两个属性，IE7及以上浏览器均支持。