目录-CSS宽高自适应
- 宽度自适应的使用
- 高度自适应的使用
- 最小高度
- 拓展-最大最小值的设置
- 高度塌陷
- 伪对象/伪元素选择器
- css中常见隐藏元素的用法
宽度自适应的使用
- 属性：width
- 属性值：常规属性值（数值单位）：像素px、百分比%
- 特点
- 浏览器HTML+BODY是块级元素，宽度默认是100%，高度是0（设置全屏效果或者移动端需要宽高100%）
- 当块级元素设置宽度是100%或者不写宽度的时候默认会占满浏览器全部（通栏效果）
- 子级元素是块级元素的时候，不设置宽度也会和父级等宽（宽度无继承性，只是布局规范）
- 当块级元素没有设置宽度的时候会占满全屏，但是当其脱离文档流的时候宽度会由内容决定
【总结】元素设置浮动或者定位的时候，要记得加宽高大小
高度自适应的使用
- 属性：height
- 属性值：数值单位
- 特点
- 浏览器高度默认为0，通常需要设置html,body{height: 100%}
- 高度常见的设置的情况
- height为0，当前盒子不显示
- height为auto，自适应
- height直接不写，自适应
- 常见的设置宽高为100%的情况
- 设置浏览器 html,body{height:100%}
- 设置子级元素和父级元素大小一样
最小高度
- 属性：min-height
- 作用：
- 当元素设置最小高度可以保持固定高度（height:固定值）
- 当内容较多的时候可以做到自适应效果（height:auto）
- 兼容：最小高度只能在高版本浏览器中使用
- 解决方法：过滤器 _属性:属性值；
- 高版本中使用：min-height
- 低版本中使用：_height （height在低版本中和min-height效果一致）
.box{
min-height:100px;
_height:100px;
}拓展-最大最小值的设置
最大值
- 最大宽度 max-width
- max-width:1920px; 标准的设计图宽度是1920px，版心宽度在1200px左右
- 最大高度 max-height
- 论坛，留言评论，当评论区的高度达到一定值的时候可以做翻页功能
最小值
- 最小宽度 min-width
- 学习移动端 - 判断当前设备的最大宽度和最小宽度
- 最小高度 min-height
高度塌陷
别名：高度坍塌
一、造成bug的原因：子级不占位置了就不会把父级的高度撑开
- 父级没有设置高度 => 自适应
- 子级元素脱离文档流 => 浮动和定位
二、解决高度塌陷的方法
- 在父级元素上设置overflow: hidden 即可
- 原理：设置了overflow可以触发BFC ，在BFC中有一条规范：浮动元素也参与高度计算
- 最简单的方法处理高度塌陷
- 在最后一个子级元素后面添加任意标签，给这个标签设置属性
（不成文规定class="clear-fix"是解决高度塌陷）
- 属性：.clear-fix{clear:both}
- 原理：清除上方预留出来的空间
- clear表示清除浮动，属性值有left、right、both（两者）
- 缺点：添加多余的标签会使布局混乱，代码冗余
- 万能清除法
- 代码：需要在父级元素上添加以下代码
.clear-fix::after{
content:"";
display:block;
width:100%;
height:0;
overflow:hidden;
clear:both;
visibility:hidden;
}伪对象/伪元素选择器
- ::after{content:“”} 表示在xx之后添加内容，必须要结合content一起使用（可以什么都不写，只是搭配而已）
- ::before{content:“”} 表示在xx之前添加内容，必须要结合content一起使用（可以什么都不写，只是搭配而已）
- ::first-letter{} 选择到第一个字符
- ::first-line{} 选择到第一行文本
- ::selection{} 鼠标选择文本时候状态改变
伪类和伪对象有什么区别？
- 写法：在css2中伪类和伪对象都是一个冒号，在css3中区别给伪对象规定设置两个冒
- 作用：伪类可以改变元素的样式，伪对象不仅可以改变元素样式，还可以添加结构（虚拟的/假的）
css中常见隐藏元素的用法
- display:none 表示将元素显示和结构完全给删除掉
- visibility:hidden 表示隐藏了内容，但是占位置
- 透明度：opacity/rgba/transparent
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
