移位 display属性内补白外补白 Layout布局_translate-y-[45px]改成向上向上45px-CSDN博客

本文链接：https://blog.csdn.net/starry__sty/article/details/108592889

本文深入探讨CSS中的布局技巧与变换方法，包括translate、matrix、perspective等变换方式，以及display属性的不同用法，如block、inline-block和inline。此外，还详细介绍了内补白padding与外补白margin的设置，帮助读者掌握网页布局与元素定位的核心技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移位

移位的三种方式-------translate

translate(45px,45px)
translatex(45px)
translatey(45px)
matrix----放大+倾斜
matrix(2,0,0,0,0,0,0)
perspective 透视图
transform-origin  更改转换元素位置

display 属性

display:none;   没有元素
display:block;  转为块级元素
display:inline-block;转为行内块状元素
display:inline; 转为行内元素

内补白

padding：		检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px;
padding-top：	检索或设置对象顶边的内部边距
padding-right：	检索或设置对象右边的内部边距
padding-bottom：检索或设置对象下边的内部边距
padding-left：	检索或设置对象左边的内部边距

外补白

margin：		检索或设置对象四边的外延边距,如 margin:10px;  margin:5px auto;
margin-top：	检索或设置对象顶边的外延边距
margin-right：	检索或设置对象右边的外延边距
margin-bottom： 检索或设置对象下边的外延边距
margin-left：	检索或设置对象左边的外延边距

Layout布局

*display：	是否及如何显示：none隐藏，block块状显示...
*float:		指出了对象是否及如何浮动:值none | left | right
*clear：		清除浮动：none | left | right | both两侧
visibility：设置或检索是否显示对象。visible|hidden|collapse。
			与display属性不同，此属性为隐藏的对象保留其占据的物理空间 
clip:		检索或设置对象的可视区域。区域外的部分是透明的。 rect(上-右-下-左)
			如：clip:rect(auto 50px 20px auto);上和左不裁剪，右50，下20.