CSS_宽高自适应与高度塌陷问题

一.宽高自适应

概述：元素的大小能够根据窗口或子元素自动调整，这就是自适应

1.1、自适应的优点：
能够使网页显示更加灵活，可以适应在不同设备、不同窗口和不同分辨率下显示

宽度自适应方法：

1. 宽度自适应: 当块元素不设置宽度时，默认通栏自适应
2. 百分比宽度：根据浏览器窗口的宽度来设置自身百分比的宽度
3. 浮动：当元素设置浮动后，会脱离文档流不设置宽度时会默认获取子元素宽度来呈现自身宽度
4. 定位：当元素没有宽度且设置了绝对定位或者固定定位时同时设置left和right会呈现自适应宽度

高度自适应方法：

1. 高度自适应：元素不设置高度默认会获取子元素高度来呈现自身height:auto
2. 百分比高度：如果想设置元素高度为浏览器窗口的百分比需将HTML, body设置高度
3. 定位：当元素未设置高度时设置了绝对定位或者固定定位top和bottom时浏览器会自适应高度

二.宽高最大最小值设置

属性：ie6及其以下版本不识别该组属性

• min-height(最小高度)
• max-height(最大高度)
• min-width(最小宽度)
• max-width(最大宽度)

三.高度塌陷

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

1. 解决方法： 给元素添加属性overflow:hidden;

• 原理： 必须定义width或zoom:1; ,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
• 优点： 简单,代码少,浏览器支持好
• 缺点： 不能和position配合使用,因为超出的尺寸会被隐藏
• 建议： 对没有使用position或对overflow:hidden;理解比较深的使用

2. 解决方法： 给父元素添加属性height

• 原理: 父级div手动定义height,就解决了父级div无法自动获取高度的问题
• 优点： 简单,代码少,容易掌握
• 缺点： 只适合高度固定的布局,要给出准确的高度,如果高度和父级div不一样时,会产生问题.
• 建议: 不推荐使用

3. 解决方法： 在浮动元素下方添加空div,并给该元素添加属性:div{clear:both; height:0; overflow:hidden}

• 原理：
• 优点： 所有浏览器都支持，并且容器溢出不会被裁剪；
• 缺点： 在页面中添加无意义的div，容易造成代码冗余。
• 建议：不推荐使用

4. 解决方法: 万能清除浮动法

• 原理：在父元素中内容的最后添加一个伪元素
• 优点： 支持性好,各大网站都在用
• 缺点： 代码多,不易理解,不适合初学者理解原理
• 建议：推荐使用

父元素:after{
     
	content:"";
	clear:both; 
	display:block;
	height:0; 
	overflow:hidden; 
	visibility:hidden;
	/*隐藏内容保留占位*/
}

扩展： visibility:hidden;和display:none;的区别

• visiblility:hidden; 属性会使对象不可见,但该对象在网页所占的空间没有改变,等于留出了一块空白区域,
• display:none; 属性会使这个对象彻底消失不显示,也不再占用位置