宽高自适应及居中

一、宽高自适应

1.宽度自适应

语法：width:100%;

注：
1.块元素默认宽度为100%，继承父元素的宽度
2.宽度自适应通常运用在通栏效果中

2.高度自适应

语法：height:auto; 或者不设置高度

二、最小，最大高度，最小，最大宽度

1.最小高度

语法：min-height:数值+单位;

注：
IE6不识别min-height属性，解决方案如下：
a）min-height:100px; _height:100px;

注：添加下划线的css属性只有ie6浏览器识别
b）min-height:100px; height:auto!important;height:100px;

注：添加!important关键词的css属性值除IE6以外的其他浏览器都识别

2.最大高度

语法：max-height:数值+单位;

3.最小宽度

语法：min-width:数值+单位;

注：块元素设置最小宽度时，需要将元素转换为内联块元素再设置min-width属性

4.最大宽度

语法：max-width:数值+单位;

三、★高度塌陷问题（常见的几种清除浮动的方法）

描述：父元素高度自适应，子元素float后，造成父元素高度为0，这个问题称为高度塌陷问题

解决方案：

1)给父元素一个固定的高度

缺点：违背了高度自适应的原则

2)给父元素设置overflow:hidden;

注：给父元素设置overflow:hidden;触发了BFC(块级格式化上下文),闭合了子元素的浮动，父元素重新计算高度，子元素占据了空间。

优点：简单

缺点：当子元素有溢出显示在父元素框之外时，会被隐藏

3）在浮动的子元素的末尾添加一个空div，并设置以下css样式：

.clearx{clear:both;height:0;overflow:hidden;}

注：在IE6浏览器中不能识别较小高度的容器(一般为10px)，通过设置overflow:hidden;来解决

缺点：在页面中添加若干个无意义的div，容易造成代码冗余，不利于网站性能优化

4）万能清除浮动法

父元素:after{content:"";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
优点：弥补了以上三种方案的缺点，是官方推荐的清除浮动的方法

四、伪元素

1.在父元素中所有内容之前添加一个伪元素

语法： 父元素:before{ content:""; color:red; ... }

2.在父元素中所有内容之后添加一个伪元素

语法：父元素:after{ content:"hello"; color:blue; ... }

注：
a）无论伪元素中内容是否为空，content属性都不能省略
b）伪元素是内联元素

五、元素隐藏不可见的两种方式

1.display:none;（看不见，摸不着）

元素隐藏不可见，位置不保留

2.visibility:hidden;（看不见，摸的着）

元素隐藏不可见，位置保留

六、窗口宽高度自适应

语法： html，body{height:100%;} 元素{height:100%;}
注：窗口高度自适应是指让某个元素的高度适应窗口高度的变化，当body高度为0或者高度小于一个屏幕窗口的高度时，需要使用窗口高度自适应。