css3弹性伸缩布局[上]

最新推荐文章于 2025-07-03 15:45:27 发布

fxy流年无悔

最新推荐文章于 2025-07-03 15:45:27 发布

阅读量489

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： css3

本文链接：https://blog.csdn.net/a716121/article/details/52168961

web 专栏收录该内容

41 篇文章

订阅专栏

本文通过一个具体的实例展示了如何使用 CSS3 的弹性伸缩盒模型进行网页布局。介绍了 index.html 中的具体实现方法，包括定义 div 元素为弹性容器，并设置其子元素 p 的宽度、边框等样式。

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

效果：

index.html:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<title>CSS3弹性伸缩布局[上]</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<p>爸爸长了一张国字脸，脸上的五官，分布得特别的整齐、匀称。两道乌黑浓密的眉毛，一对儿亮晶晶闪闪发光的大眼睛，两个眼珠黑白分明，还是双眼皮。那高高的鼻梁，坚实而挺拔。长了一个不大不小，刚刚合适的嘴。</p>
<p>爸爸不仅，打篮球非常的棒，他的歌声，那也是非常的了得。从我记事的时候开始，每当过年的时候，我们家的亲戚，包括七大姑八大姨，都会团聚在一起，吃一顿团圆饭。在吃过团圆饭之后，那场面才叫一个劲爆热闹。大家都围坐在一起，开始K歌。</p>
<p>只见爸爸两只眼睛，目不转睛的盯着对方的篮筐，双脚猛力向上一跳，整个身体腾空而起，双手用力一推，只听见“嗖”的一下，篮球已经落入对方的篮筐。全场上下，顿时响起一片热烈的掌声。我听见，坐在我旁边的人，都在夸爸爸。他们都在说：“哇噻，这个队员简直是太厉害了。哪个队要是有了他的加入，何愁会输啊！”</p>
</div>

</body>
</html>

style.css

@charset "utf-8";
p{
	width: 150px;
	border:1px solid gray;
	background-color: silver;
	/*外边距*/
	margin:5px;
	/*内边距*/
	padding:5px;


}
/*块级*/
div{

	/*做成弹性伸缩盒*/
	display: -webkit-box;
	/*设置流动方向*/
	/*-webkit-box-orient:vertical;*/
	/*设置顺序还是逆序*/
	/*-webkit-box-direction:reverse;*/


	/*项目分布方式从开始点，中间点，结束点开始排列,平局分布*/
	/*-webkit-box-pack:end;*/
/*	-webkit-box-pack:center;
	-webkit-box-pack:justify;*/


/*处理伸缩容器的额外空间*/
	/*-webkit-box-align:start;*/
	/*-webkit-box-align:end;*/

}


/*设置每个伸缩项目所占比例和设置项目的显示位置*/
p:nth-child(1){
	-webkit-box-flex:1;
	-webkit-box-ordinal-group:2;

}
p:nth-child(2){
	-webkit-box-flex:3;
	-webkit-box-ordinal-group:1;

}
p:nth-child(3){
	-webkit-box-flex:1;