CSS中宽高度自适应

CSS中宽高度自适应

1.宽度自适应
(1)如果不写宽度,块状元素默认是浏览器的宽度,内联元素默认是内容的宽度,默认换行显示。
(2)设置宽度为auto,块状元素默认是浏览器的宽度,内联元素默认是内容的宽度
(3)用min-height:;
宽度自适应可以写一个min-width,如果小于最小的宽度,那么浏览器可以以滚动条的形式去显示,如果大于最小宽度,浏览器默认会占一整行。

max-width元素的宽度最大可以达到的值,可以无限缩小,但是不能扩大。

2.高度自适应
(1)如果不写高度默认是内容撑开。
(2)设有高度为auto,也是由内容撑开。
(3)设置min-height会随内容的增多而改变。
(1)和(2)显示效果一样,如果里边没有任何内容,那么元素没有高度,第(3)种如果没有内容,那么元素的高度应该是min-height的值。

max-height:元素如果没有内容,那么高度就为零,如果有内容那么高度最大会是max-height的值,内容比较多的话会溢出。

3.最小高度兼容写法
(1)min-height:value; _height:value; /*下划线写法只有IE6支持*/
(2)min-height:value; height:auto !important; height:value;
第二种方法比较好。

你可能感兴趣的:(CSS)