11-CSS宽高自适应

宽度自适应的使用

1. 属性：width
2. 属性值：常规属性值（数值单位）：像素px、百分比%
3. 特点
   • 浏览器HTML+BODY是块级元素，宽度默认是100%，高度是0（设置全屏效果或者移动端需要宽高100%）
   • 当块级元素设置宽度是100%或者不写宽度的时候默认会占满浏览器全部（通栏效果）
   • 子级元素是块级元素的时候，不设置宽度也会和父级等宽（宽度无继承性，只是布局规范）
   • 当块级元素没有设置宽度的时候会占满全屏，但是当其脱离文档流的时候宽度会由内容决定

【总结】元素设置浮动或者定位的时候，要记得加宽高大小

---

高度自适应的使用

1. 属性：height
2. 属性值：数值单位
3. 特点
   • 浏览器高度默认为0，通常需要设置html,body{height: 100%}
   • 高度常见的设置的情况
     1. height为0，当前盒子不显示
     2. height为auto，自适应
     3. height直接不写，自适应
   • 常见的设置宽高为100%的情况
     • 设置浏览器 html,body{height:100%}
     • 设置子级元素和父级元素大小一样

最小高度

1. 属性：min-height

2. 作用：

   • 当元素设置最小高度可以保持固定高度（height:固定值）
   • 当内容较多的时候可以做到自适应效果（height:auto）

3. 兼容：最小高度只能在高版本浏览器中使用

4. 解决方法：过滤器 _属性:属性值；

   • 高版本中使用：min-height
   • 低版本中使用：_height （height在低版本中和min-height效果一致）

   .box{
       min-height:100px;
       _height:100px;
   }
   

拓展-最大最小值的设置

最大值

• 最大宽度 max-width
  • max-width:1920px; 标准的设计图宽度是1920px，版心宽度在1200px左右
• 最大高度 max-height
  • 论坛，留言评论，当评论区的高度达到一定值的时候可以做翻页功能

最小值

• 最小宽度 min-width
  1. 学习移动端 - 判断当前设备的最大宽度和最小宽度
• 最小高度 min-height

---

高度塌陷

别名：高度坍塌

一、造成bug的原因：子级不占位置了就不会把父级的高度撑开

• 父级没有设置高度 => 自适应
• 子级元素脱离文档流 => 浮动和定位

二、解决高度塌陷的方法

1. 在父级元素上设置overflow: hidden 即可

   • 原理：设置了overflow可以触发BFC ，在BFC中有一条规范：浮动元素也参与高度计算
   • 最简单的方法处理高度塌陷

2. 在最后一个子级元素后面添加任意标签，给这个标签设置属性

   （不成文规定class="clear-fix"是解决高度塌陷）

   • 属性：.clear-fix{clear:both}
   • 原理：清除上方预留出来的空间
   • clear表示清除浮动，属性值有left、right、both（两者）
   • 缺点：添加多余的标签会使布局混乱，代码冗余

3. 万能清除法

   • 代码：需要在父级元素上添加以下代码

     .clear-fix::after{
         content:"";
         display:block;
         width:100%;
         height:0;
         overflow:hidden;
         clear:both;
         visibility:hidden;
     }
     

---

伪对象/伪元素选择器

1. ::after{content:“”} 表示在xx之后添加内容，必须要结合content一起使用（可以什么都不写，只是搭配而已）
2. ::before{content:“”} 表示在xx之前添加内容，必须要结合content一起使用（可以什么都不写，只是搭配而已）
3. ::first-letter{} 选择到第一个字符
4. ::first-line{} 选择到第一行文本
5. ::selection{} 鼠标选择文本时候状态改变

伪类和伪对象有什么区别？

1. 写法：在css2中伪类和伪对象都是一个冒号，在css3中区别给伪对象规定设置两个冒
2. 作用：伪类可以改变元素的样式，伪对象不仅可以改变元素样式，还可以添加结构（虚拟的/假的）

案例：利用伪对象实现横线

---

css中常见隐藏元素的用法

1. display:none 表示将元素显示和结构完全给删除掉
2. visibility:hidden 表示隐藏了内容，但是占位置
3. 透明度：opacity/rgba/transparent