CSS（九）——盒子的浮动与定位

最新推荐文章于 2024-06-18 20:48:07 发布

程序员的时光

最新推荐文章于 2024-06-18 20:48:07 发布

阅读量1.5k

点赞数 2

分类专栏： ● Web前端基础篇 Web前端基础文章标签：盒子的浮动盒子的定位 CSS盒子

本文链接：https://blog.csdn.net/qq_37084904/article/details/88524819

版权

Web前端基础同时被 2 个专栏收录

14 篇文章 11 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

● Web前端基础篇

33 篇文章 3 订阅

订阅专栏

3.1.Relative：相对定位，相对于原本的标准位置偏移指定的距离；

3.2. Absolute：绝对定位，以它的包含框为基准进行偏移；

3.3.Fixed：固定定位，以浏览器窗口为基准进行定位；

4.z-index空间位置

5.盒子display属性

1.盒子浮动 float

Float属性：

默认是none，按照标准流来定位；

Left：左悬浮；

Right：右悬浮；

先看看没有加浮动的初始效果:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.parent{
		background-color: yellow;
		border: 2px red solid;
		padding: 5px;
	}
	.a1{
		background-color: green;
		border: 2px green solid;
		margin: 5px;
	}
	.a2{
		background-color: blue;
		border: 2px blue solid;
		margin: 5px;
	}
	p{
		background-color: gray;
		border: 2px gray solid;
		margin: 5px;
	}
</style>
</head>
<body>
<div class

了解本专栏

超级会员免费看

程序员的时光

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS（九）——盒子的浮动与定位

目录1.盒子浮动 float2.使用clear清除浮动的影响;2.1不允许左边有浮动对象；2.2不允许右边有悬浮对象；2.3左右都不允许有浮动对象；3.盒子定位position；3.1.Relative：相对定位，相对于原本的标准位置偏移指定的距离；3.2.Absolute：绝对定位，以它的包含框为基准进行偏移；3.3.Fixed：固定定位，以浏览器窗口为基准...
复制链接

扫一扫

专栏目录