css基本语法（三）——布局定位过渡动画变换多列伸缩盒

本文详细介绍了CSS中的布局技巧，包括overflow属性控制内容溢出、display属性设定元素显示方式；定位技术，如static、relative、absolute和fixed；过渡效果实现平滑变化；动画功能，如animation-name、animation-duration等属性；变换操作，如scale、rotate3d和平移；多列布局column-width和column-count属性；以及伸缩盒模型，探讨了flex-direction、align-items、justify-content等关键属性。

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

布局

overflow
当内容出现溢出的时候
visible：对溢出内容不做处理，内容可能会超出容器。
hidden：隐藏溢出容器的内容且不出现滚动条。
scroll：隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。

显示垂直方向的滚动条

overflow-y: scroll;
overflow-x: hidden;

控制文本不换行

white-space: nowrap;

display
设置或检索对象是否及如何显示
display: none; 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
display: inline; 指定对象为内联元素，即行级元素
display: block; 指定对象为块元素，使行级便签如span设置宽高有效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0px;padding: 0px;}
			li{list-style: none;height: 28px;width: 170px;border: 1px solid #ccc;}
			li:hover{background: blue;}
			a{color: black;text-decoration: none;font: 14px/28px "微软雅黑";}
			.first a{font-weight: bold;}
			#nav ul{height: 30px;overflow: hidden;width: 170px;}
			#nav ul:hover{height: auto;}
		</style>
	</head>
	<body>
		<div id="nav">
			<ul>
				<li class="first">
					<a href="#">许昌学院</a>
				</li>
				<li>
					<a href="#">体育学院</a>
				</li>
			</ul>
			<ul>
				<li class="first">
					<a href="#">许昌学院</a>
				</li>
				<li>
					<a href="#">体育学院</a>
				</li>
			</ul>
		</div>
	</body>
</html>

定位

position
检索对象的定位方式
static：对象遵循常规流。此时4个定位偏移属性不会被应用。此时使用margin和padding移动
relative：对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
absolute：对象脱离常规流，跟其他文档没有关系，如果想固定位置可以通过偏移属性对它进行移动，参照的是浏览器左上角的点的位置，如果有非static定位的祖先元素，参照的是离自身最近的定位祖先元素

position: absolute;left: 100px;top: 100px;

fixed：与absolute一致，但偏移定位是以窗口为参考。当出现滚动条
时，对象不会随着滚动。

在非static定位下的遮盖，z-index的值比较大，就可以遮盖另一个
z-index:3;

过渡

transition
当一个元素的属性发生变化时，不是立即变化，而是慢慢变化
控制过渡速度
transition-timing-function：linear; 线性过渡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#mydiv{width: 200px;height: 200px;border: 1px solid red;
			background: red;transition: all 3s linear;}
			#mydiv:hover{background: blue;width: 800px;margin-left: 100px;box-shadow: 10px 10px 5px blue;}
		</style>
	</head>
	<body>
		<div id="mydiv"></div>
	</body>
</html>

动画

Animation
<’ animation-name ‘>：检索或设置对象所应用的动画名称
<’ animation-duration ‘>：检索或设置对象动画的持续时间
<’ animation-timing-function ‘>：检索或设置对象动画的过渡类型
linear：线性过渡
<’ animation-delay ‘>：检索或设置对象动画延迟的时间
<’ animation-iteration-count ‘>：检索或设置对象动画的循环次数
infinite：无限循环
<’ animation-direction ‘>：检索或设置对象动画在循环中是否反向运动
normal：正常方向
reverse：反方向运行
<’ animation-fill-mode '>：检索或设置对象动画时间之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态

  <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#mydiv{width: 400px;height: 400px;border: 1px solid red;
    			animation: my 5s linear 2s infinite forwards;}
    			@keyframes my{
    				from{border-radius: 0px;}
    				to{border-radius: 200px;}
    			}
    		</style>
    	</head>
    	<body>
    		<div id="mydiv"></div>
    	</body>
    </html>

变换

缩放
scale()：指定对象的2D scale（2D缩放）。第一个参数对应X轴，
第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
参数表示缩放倍数，（1,1）表示不缩放

  {transform: scale(1,1);}

参数小于1表示缩小

旋转
rotate3d()：指定对象的3D旋转角度，其中前3个参数分别表示旋转的
方向x,y,z，第4个参数表示旋转的角度，参数不允许省略

<style type="text/css">
			#mydiv{
				width: 300px;height: 200px;
				border: 1px sol red;
				margin: 200px;
				background: url(img/key.jpg) no-repeat;
				transform-origin: left top;
				animation: aa 5s linear 1s infinite forwards;
			}
			@keyframes aa{
				0%{transform: scale(2,1);}
				20%{transform: rotateX(90deg);}
				40%{transform: scale(1,2);}
				60%{transform: rotateY(90deg);}
				80%{transform: scale(2,3);}
				100%{transform: rotateZ(90deg);}
			}
		</style>

rotate(-90deg);表示逆时针旋转90度

平移
translate()：指定对象的2D translation（2D平移）。第一个参数对应
X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

@keyframes aa{
				0%{transform: translate(0px,0px);}
				100%{transform: translate(100px,0px);}
			}

扭曲
skew()：指定对象skew transformation（斜切扭曲）。第一个参数对
应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

@keyframes aa{
				0%{transform: skew(0deg,0deg);}
				100%{transform: skew(30deg,0deg);}
			}

多列

设置或检索对象的列数和每列的宽度
用长度值来定义列宽。不允许负值
column-width
用整数值来定义列数
column-count

colums:200px 3;

伸缩盒

盒子中的元素可以按照一定的比例来缩放
可以不定义浮动就使段落横排
当把显示方式定义为伸缩盒时，这些元素将不再具备块级或行级的显示方式

dispaly:flex;

flex-direction
row：主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
row-reverse：对齐方式与row相反。
column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
column-reverse：对齐方式与column相反。

align-items
定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置

justify-content
设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
flex-start：弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
flex-end：弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
center：弹性盒子元素将向行中间位置对齐。
space-between：弹性盒子元素会平均地分布在行里
space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半

flex-grow
设置或检索弹性盒的扩展比率,不允许负值
等比缩放

flex-grow:1;

倍数缩放

flex-grow:3;

flex-wrap
该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向
nowrap： flex容器为单行。该情况下flex子项可能会溢出容器
wrap： flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列

align-content
当伸缩容器的侧轴还有多余空间时，本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的 <’ justify-content '> 属性类似，该属性在只有一行的伸缩容器上没有效果
center：各行向弹性盒容器的中间位置堆叠，各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等