宽高自适应、高度塌陷、最高权重、高度塌陷解决方法

宽度自适应：width

当块级元素设置为100%时  会和浏览器(默认宽度100%)的宽度一样

块级元素不设置宽度时默认宽度为100%（相对于父级百分比）

如果元素添加了脱离文档流的属性，宽度由内容决定

->当设置脱离文档流时，一定要给元素添加宽高大小

高度自适应：height

浏览器默认高度为0，其子级元素高度设置为100%时，高度不显示

高度不设置或设置为auto时，当前元素的高度会被子级元素撑开，实现高度自适应

！！！设置元素为百分比的情况

HTML、body{width:100%,height:100%}

设置浏览器的默认百分比宽高，子级百分比才会相对于浏览器计算

最小高度设置：min-height->没有内容的时候也可以保持一个高度，有内容时将容器的高度撑开做到自适应。但具有兼容问题：只能在高版本浏览器中使用，

过滤器

下划线过滤器：用法 _属性：属性值。只能在低版本浏览器中使用，

_height：100px；在低版本浏览器使用时默认为min-height

最高权重

属性：属性值   ！important

---

最大宽度 max-width、最大高度max-heigth、最小高度min-height、最小宽度min-width

高度塌陷：

原因：父级没有设置高度、子级含有浮动属性

解决塌陷方法：

1、给父级添加高度，不能做到自适应布局

2、给父级添加overflow：hidden溢出隐藏，原理：设置文本溢出属性会触发BFC，BFC布局规则，浮动元素也会参与高度的计算。缺点：如果子级元素有超出父级元素的部分会被隐藏起来

3、在当前容器中的最后位置添加任意标签，设置clear：both（清除-属性值还有left、right、none），原理：清除上方预留出来的空间，会造成代码冗余  造成布局错乱

4、万能清除法：给出现高度塌陷的父级添加: .clear-fix::after{content:"" ; width:100% ; height:0; display:block; overflow:hidden; clear:both; visibility:hidden; }

伪对象选择器-> ::after 表示在当前标签后面添加...  必须跟content一起使用

visibility：hidden 隐藏的是显示方式 结构还存在