CSS基础九(宽高自适应与高度塌陷)

宽高自适应

宽度自适应,参考父元素

• 宽度不设置
• 设置百分比
• 最大宽度(max-width)和最小宽度(min-width)

高度自适应

• auto 自动 根据内容撑开
• 高度不设置 根据内容撑开
• 百分比 参考父元素
• 最小高度(min-height)和最大高度(max-height)
• 一屏页面(盒子的宽高和当前浏览器的宽高一样)的实现方式

高度塌陷

• 产生条件
  • 父元素不设置高度，想要子元素撑开
  • 子元素浮动
• 解决方法
  • 给高度塌陷的父元素添加overflow:hidden;(触发BFC)
    • 弊端：会把溢出父元素的内容隐藏掉
  • 给浮动元素的下方添加一个块级元素(一般添加的是div),给块级元素设置clear属性
    • clear:left/right/both; 清除浮动元素对后面的元素带来的影响
    • clear只对块级元素生效
    • 弊端：代码中会出现很多空的标签，造成代码冗余
  • 万能清除法，给高度塌陷的父元素，通过伪元素选择器的方法添加元素

高度塌陷的父元素::after{
    content:"";
    clear:both;
    display:block;
  }