CSS学习笔记八——宽高自适应

一、宽度自适应

不写宽度或者写 width：auto就表示宽度自适应，可用于横栏或导航栏。
与 width：100%不同，设为100%已经固定了宽度，宽度始终不变，而宽度自适应是会自动更改宽度，前者在设置 padding 时横向出现滚动条，后者在设置 padding 时会自动压缩宽度大小。
有 min-width、max-width 属性，max-width 用于图片上可避免拉大屏幕时图片失真。

二、高度自适应

不写高度或者写 height：auto就表示高度自适应，可用于内容多时让盒子自动撑开。
不写高度时，内容太少的情况下，网页看着不美观，因此可设置 min-height 属性确定最小高度，使其在无内容或内容少时仍保持美观。
有 max-height、min-height 属性，其中，最常用的属性是 min-height。

三、浮动元素的高度自适应

父元素不写高度时，子元素进行了浮动，此时父元素会出现高度塌陷。

解决高度塌陷的方法：

1. 写固定高度。
   将父元素的高度设置与子元素高度一致；
   缺点：高度固定，如果浮动过多，换行会出现问题；
2. 清除浮动。
   在补位元素，即顶上浮动元素位置的元素中添加 CSS 中的 clear 属性，清除前方浮动元素带来的干扰作用；
   缺点：不利于代码可读性，自己产生的问题，却由其他元素来解决；
3. 补盒子。
   在当前浮动元素的下方添加一个空的 div 元素，并在该元素中添加 CSS 中的 clear 属性；
   缺点：增加空标签，不利于代码可读性，降低浏览器性能；
4. 引发 bfc。
   给父元素添加 CSS 样式 overflow：hidden，引发 bfc，构成一个封闭空间，让浮动元素计算高度；
   缺点：隐藏溢出元素，当浮动元素为二级菜单时，二级菜单无法展示；
   注：二级菜单要脱离文档流，与父元素设置子绝父相，通过 top 等设置位置
5. 使用伪元素（万能方案）。
   给父元素设置伪元素选择器 ::after ，通过属性 content 在最后方设置内容（有无值都可），添加清浮动属性 clear：both，同时将虚拟元素设为块元素，再设置宽高为0，最后设置 visibility 属性为 hidden，隐藏伪元素内容。
   此处的 visibility：hidden 不可改为 display：none，否则前功尽弃。

四、窗口自适应

盒子根据窗口大小进行改变，盒子宽度、高度均可通过百分比设置，但高度需设置 html,body{ height：100%} ，对 body 和 html 元素进行样式更改后，高度设置百分比才可生效。

五、结语

本学习笔记主要用于记录博主个人的前端学习过程，目前学习资源来自b站千锋的前端1000集教学，如笔记内容有写错的地方，希望大家能够指出。同时，欢迎看到博文的小伙伴们与我一同学习！