响应式布局

最新推荐文章于 2023-02-12 16:21:09 发布

yananye

最新推荐文章于 2023-02-12 16:21:09 发布

阅读量204

点赞数

文章标签： html5 css bootstrap

本文链接：https://blog.csdn.net/yananye/article/details/119151968

版权

弹性布局

当我们制作网页时，当浏览器宽度大于页面的宽度时，在网页的右边会出现多余的空白。如果缩小浏览器的宽度，网页的内容会被遮挡一部分，如果想要查看网页全貌就需要拖动滚动条，但是拖动滚动条查看网页的操作大大降低了用户体验。

在这里插入图片描述
浮动+百分比布局

示例：

<head lang="en">
    <meta charset="UTF-8">
    <title>固定布局</title>
    <style>
        * {
     
            margin: 0;
            padding: 0;
        }     

        .box {
     
            width: 100%;
			height: 480px;
            border: 1px solid #000000;
            padding: 10px;
        }

        aside {
     
            width: 28%;
            float: left;
            background: red;
            padding: 10px;
        }      

        article {
     
            margin-left: 10px;
            width: 68%;
            float: left;
            background: yellow;
        }

    </style>
</head>
	<body>
		<div class="box clear">
			<!--省略部分代码-->
			<aside>
				<br><br><br><br><br><br><br><br><br>
			</aside>
			<article>
				<br><br><br><br><br><br><br><br><br><br><br>
				<br><br><br><br><br><br><br><br><br><br><br>
			</article>
		</div>
	</body>

在浏览器中浏览：
放大
在这里插入图片描述
缩小浏览器窗口

使用了浮动+百分比的布局方式，网页显示的内容不在受浏览器宽度影响，此时网页会随着浏览器的伸展而伸展，随着浏览器的缩小而收缩。

注意：也有缺点，也会出现少数空白，网页也不可以无限收缩，当收缩到最小宽度时，article元素会排到下一行。

Flex弹性盒布局
请添加图片描述

使用步骤
在这里插入图片描述
示例：

<head lang="en">
    <meta charset="UTF-8">
    <title>固定布局</title>
    <style type="text/css">
        * {
     
            margin: 0;
            padding: 0;
        }     

        .box {
     
        	display: flex; /*声明当前标签作为Flex容器*/
            border: 1px solid #000000;
            padding: 10px;
        }

        aside {
     
            width: 28%;
            background: red;
            padding: 10px;
        }      

        article {
     
            margin-left: 10px;
            padding: 10px;
          	width: 68%;
            background: yellow;
        }

    </style>
</head>
	<body>
		<div class="box clear">
			<!--省略部分代码-->
			<aside>
				<br><br><br><br><br><br><br><br><br>
			</aside>
			<article>
				<br><br><br><br><br><br><br><br><br><br><br>
				<br><br><br><br

最低0.47元/天解锁文章

yananye

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
响应式布局

弹性布局当我们制作网页时，当浏览器宽度大于页面的宽度时，在网页的右边会出现多余的空白。如果缩小浏览器的宽度，网页的内容会被遮挡一部分，如果想要查看网页全貌就需要拖动滚动条，但是拖动滚动条查看网页的操作大大降低了用户体验。浮动+百分比布局示例：<head lang="en"> <meta charset="UTF-8"> <title>固定布局</title> <style> * {
复制链接

扫一扫