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. 写固定⾼度。
将⽗元素的⾼度设置与⼦元素⾼度⼀致；
css设置表格滚动条缺点：⾼度固定，如果浮动过多，换⾏会出现问题；
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 元素进⾏样式更改后，⾼度设置百分⽐才可⽣效。
五、结语
本学习笔记主要⽤于记录博主个⼈的前端学习过程，⽬前学习资源来⾃，如笔记内容有写错的地⽅，希望⼤家能够指出。同时，欢迎看到博⽂的⼩伙伴们与我⼀同学习！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。