学习记录306@CSS中auto居中的问题

最新推荐文章于 2022-03-09 16:06:42 发布

教练我想学编程

最新推荐文章于 2022-03-09 16:06:42 发布

阅读量236

点赞数

本文链接：https://blog.csdn.net/weixin_44663675/article/details/108367033

版权

对于标准流而言，在设置了宽度高度后，使用margin:0 aotu;即可实现盒子的居中：

@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;}
li{list-style:none;}
a{text-decoration:none;}



div{
	width:100px;
	height:100px;
	background-color:red;
	margin:0 auto;
	}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css/shoos.css"/>
</head>

<body>
<div></div>
</body>
</html>

在这里插入图片描述

但是以上说的标准流，如果是非标准流，比如变成了浮动流，就无法实现auto剧中了：

@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;}
li{list-style:none;}
a{text-decoration:none;}



div{
	float:left;/*加了浮动*/
	width:100px;
	height:100px;
	background-color:red;
	margin:0 auto;
	}

在这里插入图片描述
什么原因呢？我的理解是，auto居中的本质是让盒子平分剩下的空间，也就是让盒子左右边距平分水平方向的剩余空间，这样就实现了水平居中。

但是为什么浮动后就不能使用了呢？我的理解是浮动流脱离了标准流，也就是漂浮了起来，本身就不占据原先的位置，因此设计的时候就不按照标准流的方式进行操作了。
还需要注意的是，相对定位后，元素占有原先的位置，依然具有原先的元素类型，因此依然还是标准流，还可以使用auto进行居中操作，但是对于绝对定位，因为绝对定位后，元素不占有原先的位置，这很像浮动，因此就不能使用auto进行居中操作了。具体的自己用代码实践吧！
另外需要注意，垂直方向不能使用margin:auto 0;进行设置居中，原因不解，可能就是规定。

教练我想学编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习记录306@CSS中auto居中的问题

对于标准流而言，在设置了宽度高度后，使用margin:0 aotu;即可实现盒子的居中：@charset "utf-8";/* CSS Document */*{margin:0;padding:0;}li{list-style:none;}a{text-decoration:none;}div{ width:100px; height:100px; background-color:red; margin:0 auto; }<!doctype html>&lt
复制链接

扫一扫