css3弹性伸缩布局[上]

来源：互联网发布：莽荒纪法魂进阶数据编辑：程序博客网时间：2024/05/21 07:07

效果：

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;

0 0