一、两栏布局（左定宽，右自动）
1. float + margin
即固定宽度元素设置float属性为left,自适应元素设置margin属性，margin-left应>=定宽元素宽度。
举例：
HTML代码：
<div class="wrap">
<div class="wrap_left">
2025年07月08日
一、两栏布局（左定宽，右自动）
1. float + margin
即固定宽度元素设置float属性为left,自适应元素设置margin属性，margin-left应>=定宽元素宽度。
举例：
HTML代码：
<div class="wrap">
<div class="wrap_left">
2025年07月08日
像 px、em 这样的长度单位大家肯定都很熟悉，前者为绝对单位，后者为相对单位。CSS3 又引入了新单位：vw、vh、vmin、vmax。下面对它们做个详细介绍。
2025年07月08日
图片分为背景图片和通过<img>标签引入的图片，前者可以通过media query自动的切换不同分辨率的版本，但是在不支持background image size的浏览器中背景图片无法无级的调整大小（也就是在media query切换css的点上可以换一张不同分辨率的图，但是没法儿获得两张分辨率中间大小的版本），而且在很多情况下（比如cms中）并不适合用背景图片。
如果是img标签引入的图片，可以使用延迟加载的方式来加载，在实际加载图片之前先用js检查窗口宽度，然后加载不同分辨率的图片，比如宽度<=480,就加载80px宽度的图片，480 < 宽度 <= 768，加载120px的图片， 宽度> 768则加载160px的图片，如果宽度是600px怎么办呢，通过百分比来缩放120px的图片达到合适的结果。
2025年07月08日
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS实现自适应正方形以及等宽高比矩形</title>
</head>
<style>
/* * {
padding: 0;
margin: 0;
} */
html, body {
height: 100%;
}
/* 方法一: */
.w_son-cont {
width: 20% ;
/*基于父级的宽度设置*/
padding-top: 20% ; /* 或者padding-bottom: 20%; */
background: red ;
}
/* 方法二: 这个方法不能实现正方形; 高度总是要比宽度大几个像素 */
.w_vw-cont {
width: 30%;
height: 30vw;
background: red;
}
/* 方法三: */
.w_mar-outer {
overflow: hidden;
width: 20%;
background-color: skyblue;
}
.w_mar-outer::after {
content: '';
display: block;
padding-top: 100%; /* margin 百分比相对父元素宽度计算 */
}
</style>
<body>
<div class="w_son-cont"></div>
<div class="w_vw-cont"></div>
<div class="w_mar-outer"></div>
</body>
</html>2025年07月08日
在这篇文章中我们将学习关于自适应图片：一种可以在不同的屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片，并且看看HTML提供了什么工具来帮助实现它们。自适应图片仅仅只是自适应网站设计的一部分，为您奠定了自适应网页设计的良好基础。
2025年07月08日
本篇文章主要介绍下如何使网站自适应屏幕的大小。其实，这个问题并不是很难做，可以使用CSS来实现。
具体操作实例小编在下面已经写出来了：
<div id="change-color"></div>
css 代码如下：
#change-color {