css dimension

宽度：将元素宽度定死。元素会自动缩放至指定尺寸。

最大宽度：限制最大宽度为500px。

img{max-width:500px}

宽度和最大宽度的区别在于，如果设置了width，那宽度就定死了，而设置了max-width，实际宽度可以在0~max-width之间，当元素内部宽度不足max-width时，外层的宽度随内层元素宽度改变。也就是说只有当max-width<元素内部宽度时，max-width才会起作用，否则等同于auto。

 

高度：将元素高度定死。元素会自动缩放至指定尺寸。

最大高度：

实际高度可以在0~max-height之间，当元素内部高度不足max-height时，外层的高度随内层元素高度改变。

最小宽度：限制最小宽度为500px。

img{min-width:500px}

宽度和最小宽度的区别在于，如果设置了width，那宽度就定死了，而设置了min-width，实际宽度可以在min-width~father-width之间，当元素内部宽度大于min-width时，外层的宽度随内层元素宽度改变。也就是说只有当min-width>元素内部宽度时，min-width才会起作用，否则等同于auto。

最小高度：意义同上。

 

元素的尺寸可以以像素，百分比两种方式指定，当以像素方式指定时，为元素的显示的实际像素，当以百分比指定时，元素尺寸为父元素*百分比。

需要了解的是对于宽度来说，其父级元素无须确定宽度就能设置百分比，例如我们可以利用这个特性给未知宽度的块级元素设置水平居中效果： 
父元素css： position: relative/absolute; left: 50%; 
子元素css： position: relative; left: -50%; 
但高度则不同，若某元素的父元素没有确定高度，则无法有效使用height=XX%的样式，我们可以这样解决（假设最外层的div需要设置百分比高度样式）： 

html, body { height: 100%; } .outDiv { height: 50%; } 

元素的高度、宽度、最大高度、最大宽度、最小高度、最小宽度之中之能指定一个，否则都将无效。

结合jQuery实现自适应屏幕

//加载时适应浏览器高度$(document).ready(function() {    //模块尺寸    $('#div_frame_body').css('height', $(window).height());})//改变窗体大小时适应浏览器高度$(window).resize(function() {    //模块尺寸    $('#div_frame_body').css('height', $(window).height());});