Web(7)

5.6

（一）布局的原则

原则：先分大块，再分小块，先横再竖

例：上下布局边框线设置（示例代码如下）

	<style type="text/css"><style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.top{
			/*background-color: #0000FF;*/
			width: 1000px;
			height: 200px;
			border: 3px solid black;
		}
		.bottom{
			/*background-color: #0000FF;*/
			width: 1000px;
			height:400px;
			border: 3px solid black;
			border-top-width:0px;
		}
		.left{
			width: 200px;
			height: 200px;
			border-right: 3px solid black;
		}

	</style>
</head>
<body>
	<div class="top">
		<div class="left">
		</div>
		
		<div class="right">
		</div>
	</div>
	
	<div class="bottom">
	</div>
</body>

（二）几个1→n的问题
1.文本折叠
（1）单行折叠

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

（2）多行折叠
display: -webkit-box;
-webkit-box-orient: vertical;
/显示输出行数/
-webkit-line-clamp: 2;

overflow:hidden;

text-overflow:ellipsis;

2.垂直居中

（1）单行文本

height: 400px;
line-height: 400px;

/先设置弹性盒子，固定高度/
display: flex;
/垂直居中/
align-items: center;
/可选：水平居中/
justify-content: center;

（2）多行文本

/固定高度/
display: flex;
align-items: center; /垂直居中/

/不固定高度/
padding-top: 150px;
padding-bottom: 150px;

posted @ 2026-05-10 10:23  禁止睡觉stooop  阅读(13)  评论(0)    收藏  举报