一、宽度自适应
不写宽度或者写 width：auto就表示宽度自适应，可用于横栏或导航栏。
与 width：100%不同，设为100%已经固定了宽度，宽度始终不变，而宽度自适应是会自动更改宽度，前者在设置 padding 时横向出现滚动条，后者在设置 padding 时会自动压缩宽度大小。
有 min-width、max-width 属性，max-width 用于图片上可避免拉大屏幕时图片失真。
二、高度自适应
不写高度或者写 height：auto就表示高度自适应，可用于内容多时让盒子自动撑开。
不写高度时，内容太少的情况下，网页看着不美观，因此可设置 min-height 属性确定最小高度，使其在无内容或内容少时仍保持美观。
有 max-height、min-height 属性，其中，最常用的属性是 min-height。
三、浮动元素的高度自适应
父元素不写高度时，子元素进行了浮动，此时父元素会出现高度塌陷。
解决高度塌陷的方法：
- 写固定高度。
将父元素的高度设置与子元素高度一致；
缺点：高度固定，如果浮动过多，换行会出现问题；
- 清除浮动。
在补位元素，即顶上浮动元素位置的元素中添加 CSS 中的 clear 属性，清除前方浮动元素带来的干扰作用；
缺点：不利于代码可读性，自己产生的问题，却由其他元素来解决；
- 补盒子。
在当前浮动元素的下方添加一个空的 div 元素，并在该元素中添加 CSS 中的 clear 属性；
缺点：增加空标签，不利于代码可读性，降低浏览器性能；
- 引发 bfc。
给父元素添加 CSS 样式 overflow：hidden，引发 bfc，构成一个封闭空间，让浮动元素计算高度；
缺点：隐藏溢出元素，当浮动元素为二级菜单时，二级菜单无法展示；
注：二级菜单要脱离文档流，与父元素设置子绝父相，通过 top 等设置位置
- 使用伪元素（万能方案）。
给父元素设置伪元素选择器 ::after ，通过属性 content 在最后方设置内容（有无值都可），添加清浮动属性 clear：both，同时将虚拟元素设为块元素，再设置宽高为0，最后设置 visibility 属性为 hidden，隐藏伪元素内容。
此处的 visibility：hidden 不可改为 display：none，否则前功尽弃。
四、窗口自适应
盒子根据窗口大小进行改变，盒子宽度、高度均可通过百分比设置，但高度需设置 html,body{ height：100%} ，对 body 和 html 元素进行样式更改后，高度设置百分比才可生效。
五、结语
本学习笔记主要用于记录博主个人的前端学习过程，目前学习资源来自b站千锋的前端1000集教学，如笔记内容有写错的地方，希望大家能够指出。同时，欢迎看到博文的小伙伴们与我一同学习！
