CSS：宽高自适应详解

article/2025/11/9 20:23:34

宽度自适应的应用
1.属性:width
2.属性值:px/%
3.宽度自适应的特点
- HTML,BODY表示浏览器,默认是块级元素,宽度是100%
- 当块级元素不设置宽度或者设置100%的时候,宽度会沾满全屏(通栏效果)
- 子级是块级元素,不设置宽度的时候会和父级等宽
- 宽度是没有继承性,只是块级元素的布局规范而已
- 【重要】当块级元素脱离文档流的时候,宽度由内容决定 => 设置浮动和定位的盒子一定记得要加宽高大小！！！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{width: 100%;height: 62px;background: #232323;}p{height: 30px;background: pink;float: left;}</style>
</head>
<body><div><p>logo</p></div>
</body>
</html>

效果图：

高度自适应的应用
1.属性:height
2.属性值:px/%
3.高度自适应的特点
- 浏览器的高度默认是0,html,body{height:100%}
- 设置元素高度为0,盒子的高度就不会显示,添加文本会超出容器范围不会撑大盒子
- 设置好元素高度为auto或者不写的时候可以做到自适应(高度自适应)
- 高度设置为100的常见情况
- html,body{height:100%} 浏览器的默认宽高设置为100% 沾满全屏
- img{width:100%;height:100%} 百分比是相对单位,相对于父级元素进行计算
4.需求:有三个盒子
- 第一个盒子宽度100%,高度100px
- 第二个盒子
- 当盒子中无内容的时候保持一个最小高度
- 当盒子中内容较多的时候可以撑开盒子的高度做到适应
- 第三个盒子宽度100%,高度100px
5.最小高度的概念:min-height
- 第一个作用:height:value作用一样可以有固定高度
- 第二个作用:height:auto作用一样可以做到自适应
6.最小高度的兼容问题(浏览器历史)
- 第一款浏览器网景公司(网景领航者NN)
- 第二次浏览器大战 IE9(及以后)
- 最小高度不可以在低版本中使用
- 解决低版本属性解析:_属性:属性值表示只能在低版本中解析
- height高度在低版本浏览器中是有两个作用和最小高度的效果是一样的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{width: 300px;/* height: 0; */background: pink}</style>
</head>
<body><div>文本 <br>文本</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin: 0;padding: 0;}.box1{height: 100px;background: pink}.box3{height: 100px;background: skyblue}.box2{min-height: 300px;/* 高版本 */_height: 300px; /* 低版本 */background: yellowgreen}/* 公司的新闻列表 */</style>
</head>
<body><div class="box1">第一个盒子</div><div class="box2"><p>000000001</p><p>000000002</p><p>000000003</p><p>000000004</p><p>000000005</p><p>000000006</p><p>000000007</p><p>000000008</p><p>000000009</p><p>000000010</p><p>000000011</p><p>000000012</p><p>000000013</p><p>000000014</p><p>000000015</p><p>000000016</p><p>000000017</p><p>000000018</p></div><div class="box3">第三个盒子</div>
</body>
</html>

最大值最小值的拓展

最大值
- 最大宽度 max-width:1920px 约束用户屏幕自适应的最大值
- 最大高度 max-height 判断用户的评论达到一定的高度时候可以实现翻页功能
最小值
- 最小宽度 min-width 约束盒子不会往下掉
- 最小高度 min-height 自适应
重点:最小宽度和最大宽度(响应式布局-媒体查询)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="../../03-reset.css"><style>#header{height: 100px;background: pink;/* 最小宽度 屏幕变化的时候最小值是? */min-width: 800px}.box1{width: 300px;height: 100px;background: green;float: left;}.box2{width: 500px;height: 100px;background: blue;float: right;}</style>
</head>
<body><div id="header"><div class="box1">logo</div><div class="box2">导航</div></div>
</body>
</html>

高度塌陷/高度坍塌
一.造成原因:父级没有设置高度,子级元素脱离了文档流
二.解决方法(10多种)
1.解决方法:给父级元素添加overflow:hidden
- 原理:设置overflow:hidden触发BFC,BFC中有一条布局规则:浮动元素也会参与高度计算
2.解决方法:在最后一个子级元素下面添加任意标签(div) 设置样式clear:both
- 解释:clear清除浮动 left/right/both
- 原理:清除上方预留出来的所有浮动
- 优缺点:优点比较方便、缺点增加了无用的标签、代码冗余
3.万能清除法(不要求理解要求会用)
- 代码
.clear-fix::after{
content:'';
display:block;
width:100%;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="../../03-reset.css"><style>.box{width: 1000px;/* height: 500px; */border: 10px solid #000;margin: 100px auto;} .box1{width: 300px;height: 300px;background: skyblue;float: left;margin: 10px}.box2{width: 300px;height: 300px;background: yellowgreen;float: left;margin: 10px}.box3{width: 300px;height: 300px;background: purple;float: left;margin: 10px}/* 不成文的规定 *//* .clear-fix{clear: both} *//* .clear-fix::after{content:'';display:block;width:100%;height:0;clear:both;overflow:hidden;visibility:hidden;} */</style>
</head>
<body><div class="box clear-fix"><!-- BFC区域 --><div class="box1"></div><div class="box2"></div><div class="box3"></div></div>
</body>
</html>

万能清除法的解释

一:伪对象选择器/伪元素选择器(伪类选择器进行区别)
1.选择器::after{content:''} 表示在xx之后添加内容,必须要和content一起搭配使用,可以不写任何内容
2.选择器::before{content:''} 表示在xx之前添加内容,必须要和content一起搭配使用,可以不写任何内容

二:关于隐藏的几种用法
1.display:none 删除元素的显示和结构
2.visibility:hidden 删除显示方式但是位置还存在

三:伪对象和伪类之间的区别是什么?
1.写法上区别:在css2中伪类和伪对象都是一个冒号,在css3中为了区分规定伪对象需要写两个冒号
2.作用上区别:伪类改变是元素的状态,伪对象不仅可以改变元素状态还可以添加结构(虚拟)