流式布局

最新推荐文章于 2023-07-27 20:31:10 发布

木木27

最新推荐文章于 2023-07-27 20:31:10 发布

阅读量2.5k

点赞数 2

分类专栏： Web学习

本文链接：https://blog.csdn.net/qq_43415108/article/details/113824148

版权

Web学习专栏收录该内容

32 篇文章 0 订阅

订阅专栏

流式布局

定义

流式布局是使用百分比设置宽高的布局，随着设备屏幕的改变，容器的宽高、位置地变化。
css可以使用百分比来指定的属性: width、height、padding、margin
注意：百分比是指该容器的宽高是其父容器的百分之几。

max-XXX 和 min-XXX 属性

通常盒子使用百分比来设置宽度时，都设置盒子的最大宽度和最小宽度。

比如：max-width、min-width、max-height、min-height属性，IE7以上兼容。
当盒子在 min~max 两个值之间时，根据其父容器的百分比进行缩放；否则保持在最大值或最小值的状态。
示例：

<head>
	<style>
		div{
			width: 80%;
			height: 300px;
			margin: 0px auto;
			max-width: 800px;
			min-width: 300px;
			background: pink;
		}
	</style>
</head>
<body>
	<div>哈哈</div>
</body>

当 div 盒子宽度在 300 ~ 800两个值之间时，根据其父容器 body 的宽度的 80% 进行缩放；当 body 的宽度的 80% 小于 300 时，div 盒子宽度保持在最小值 300 ；当 body 的宽度的 80% 大于800时，div 盒子宽度保持在最大值 800 。

box-sizing 属性

box-sizing: 是css3新增的属性，IE8以上兼容。

box-sizing属性的值

border-box 表示包含边框小盒,即width数值指包含border,padding,content的大小
如下代码

width: 200px;
height: 200px;
margin: 20px;
padding: 10px;
border: 1px solid red;
background: pink;
box-sizing: border-box;

显示的盒子模型为：
在这里插入图片描述

content-box 表示包含内容小盒,即width数值指只包含content的大小,border,padding表现为外扩,并不是内减。
将上例代码中的 box-sizing 的值改为 content-box ，显示的盒子模型为：

示例：两个div盒子并行排列，且可随屏幕随意改变大小

<head>
	<style>
		body>div{
			width: 80%;
			height: 400px;
			margin: 20px auto;
			background: gray;
		}
		#left,#right{
			background: pink;
			width: 48%;
			margin: 0px 1%;
			height: 200px;
			float: left;
			border: 2px solid blue;
			box-sizing: border-box;
			padding: 2%;
		}
		#right{
			background: green;
		}
	</style>
</head>
<body>
	<div>
		<div id="left">左</div>
		<div id="right">右</div>
	</div>
</body>

随着屏幕的缩放，左右两个盒子的宽度都是按比例缩放，并不会变形。

木木27

关注

2
点赞
踩
22

收藏

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

流式布局定义流式布局是使用百分比设置宽高的布局，随着设备屏幕的改变，容器的宽高、位置地变化。css可以使用百分比来指定的属性: width、height、padding、margin注意：百分比是指该容器的宽高是其父容器的百分之几。max-XXX 和 min-XXX 属性通常盒子使用百分比来设置宽度时，都设置盒子的最大宽度和最小宽度。比如：max-width、min-width、max-height、min-height属性，IE7以上兼容。当盒子在 min~max 两个值之间时，根据其父容
复制链接

扫一扫