本文介绍了如何使用CSS实现自适应布局，通过浮动属性让元素随屏幕大小变化，以及利用盒子模型进行div布局，使内容在不同尺寸下保持协调。同时，通过div的嵌套和margin属性调整子元素与父容器的间距，达到布局重叠的效果。
首先，先了解非自适应布局，对于界面会有些刚硬，特别是将窗口放大和缩小的时候，一些区域会因为大小是固定的，显得不协调。
对称完成一个简单的自适应布局如下：
对比第一张图片和第二张图片：
可以发现第二张图片的中，第二个元素的内容大小是发生了改变的。这两张图分别是在非全屏大小，和全屏大小时截的图。如果固定第二个元素的的大小。那么它是不会发生改变的。如果要实现第二个元素的大小自适应屏幕的话，需要使用CSS中的float属性完成；具体代码如下：
<!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</t
最低0.47元/天 解锁文章
4892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
