CSS流布局详解

启明SEO 服务器与程序使用 2023-02-05 15:01:40 1038 0 css

一、 流式布局的概念

流式布局,就是百分比布局


通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。


流式布局方式是***移动web开发使用的比较常见的布局方式***


也就是说将CSS单位全部换成百分比单位,以达到自适应屏幕的大小,缺点:需要依赖百分比的参考对象


二、说明


1、流式布局使用非固定像素来定义网页内容,即百分比布局。


2、通过将盒子的宽度设置为百分比根据屏幕的宽度进行伸缩,不受固定像素的限制,内容向两侧填充。


三、分类


左侧固定,右侧自适应


右侧固定左侧自适应


两侧固定,中间自适应(圣杯布局)


等分布局

四、实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		body{
			margin: 0 auto;
			
		}
		.box{
			width:20%;
			height:300px;
			background-color: yellow;
			float:left;
			border: 2px solid #000;
			box-sizing: border-box;

		}
	</style>
</head>
<body>
<div class="box">
	1
</div>
<div class="box">
	2
</div>
<div class="box">
	3
</div>
<div class="box">
	4
</div>

</body>
</html>


评论

启明SEO微信

有什么问题欢迎添加微信咨询

好文推荐

实时访客入口页面出现bd_vid=标识是什么原因

实时访客入口页面出现bd_vid=标识是什么原因

最近查看百度实时访客,总是会看到入口页面会多......

有了微信视频号,但是没有发布权限,怎么开通

有了微信视频号,但是没有发布权限,怎么开通

视频号是微信在2020年1月19号开始内测的......

如何用python抓取爱企查企业信息

如何用python抓取爱企查企业信息

前段时间,经理让我去找一些企业的信息,我平常......

服务器配置低,宝塔面板安装IIS总是安装不上怎么办

服务器配置低,宝塔面板安装IIS总是安装不上怎么办

对于一般企业网站或者博客来说,对服务器的配置......

如何修改浏览器指纹,Canvas指纹、Webgl指纹、Audio指纹修改方法?

如何修改浏览器指纹,Canvas指纹、Webgl指纹、Audio指纹修改方法?

修改浏览指纹的方法其实也是很简单,主要使用到......

win10下安装MYSQL后,提示Can't connect to MySQL server on localhost (10061)相关问题解决方法

win10下安装MYSQL后,提示Can't connect to MySQL server on localhost (10061)相关问题解决方法

我遇到的问题是电脑原先安装过mysql,卸......