怎么在div中调整文字位置

记得上次去咖啡馆的时候，我盯着透明的杯子发呆。
杯壁上印有图案，不过最吸引我眼球的是图案和杯口之间有一点留白，仿佛是为了让图案不那么引人注目。
这让我想起了网页设计中的填充，其中涉及在文本和容器边框之间留出呼吸空间。

1 . padding：那天我用代码模拟了这个效果。
在Chrome开发者工具中，我将div设置为2 00px宽和2 00px高，并将背景颜色设置为浅灰色。
在里面放一个文本片段，并将内边距设置为2 0px 0 1 00px 0。
我注意到文本没有响应左右边框，只是在顶部和底部分开。
这时我才明白padding是按照以下顺序计算的：上、右、下、左。
如果需要留出空间，就应该写padding：2 0px 2 0px 2 0px 2 0px。
我记得那天调试了差不多3 0分钟，发现顺序错了。

2 Margin：后来我又尝试了margin。
将同一个div更改为使用margin：2 0px 0 0 0。
结果，整个div移动到右下角。
这与填充不同。
边距控制一个元素与另一个元素之间的距离。
那天我在它旁边放置了另一个 div 并设置了 left margin: 5 0px 并注意到两个 div 之间有一个间隙。
这让人想起共享办公空间，每个工作站之间留有走道，就像一个空白空间，为元素提供呼吸空间。

3 绝对定位：absolute；那天我做了一个实验。
首先设置容器div，position：relative。
在里面放一个小div。
位置：绝对；顶部：5 0 像素；左：2 0 像素。
我注意到小div实际上从大div的左上角跳到了向下5 0px、向右2 0px的位置。
这就像在教室里，当老师告诉你站在讲台的左后方时，你必须找到正确的位置。
然而，那天我忘记设置 z-index，这导致这个小 div 被其他元素挡住了。
我花了很长时间才明白我需要添加z-index： 1 .
那天我在笔记本上画了一个扩展信息的标签样式的粗稿。
如果我将边框设置为 1 px Solid 000，边框将可见。
如果直接将高度和宽度设置为3 00px，则可以清晰地看到填充效果（1 0px 5 px 5 px 2 0px）。
我注意到左侧的填充比右侧大，并且文本被压缩到左侧。
我记得在超市排队。
如果前面的人走得很慢，后面的人就会抱怨。
网页元素也是如此。
空间有限，谁占据的空间多，谁就排在前面。

等一下，还有一件事。
那天我在写代码的时候，突然想到了这个问题。
如果我在父容器上设置了Overflow: Hidden，绝对定位溢出后子元素会被截断吗？使用Firefox浏览器进行一些快速调试后，我发现它确实被截断了。
这就像在玻璃鱼缸里养鱼一样。
如果鱼缸太大，鱼就会游动。
溢流设置：隐藏限制了鱼的活动范围。

我突然想到，绝对定位和舞台表演是不一样的。
它们相似吗？虽然演员受到舞台空间的限制，但绝对的定位可以让他们跳出场景，达到特效。
那天我将按钮设置为position:absolute;顶部：-1 00px； left: 0。
结果是它从容器中弹出，仿佛真的在说“我不属于这里”。
这让我想起了我在博物馆看到的一个“时间旅行”展览。
虽然明明是放在玻璃柜子里，却仿佛身处不同的时空。

不知道绝对定位有没有实际的应用场景。
例如，在网页游戏中，如果子弹飞出屏幕，它就会消失。
是不是用绝对定位来达到这个效果呢？或者，某些创意页面需要将元素设置为“从天而降”的动画。
绝对定位有什么限制吗？

div+css怎么居左居右剧中

要向左对齐，请使用 float:left。
用当地语言来说：div 向左弯曲。
示例： .divcss5 -left{float:left;宽度：2 5 0px；高度：5 0px；边框：1 px实心F00}。

使用 float:right 进行正确对齐。
用简单的英语来说：div 向右移动。
示例： .divcss5 -right{float:right;宽度：2 5 0px；高度：5 0px；边框：1 px实心F00}。

使用 margin:0 auto 进行居中对齐。
简单来说：将 div 居中对齐。
示例： .divcss5 -cent{margin:0 auto;宽度：2 5 0px；高度：5 0px；边框：1 px实心F00}。

清除浮动并为父级添加高度。
简单来说：给父div添加高度来解决浮动问题。
示例：.divcss5 {宽度：4 00px;边框：1 px实心F00；高度：1 02 px}。