box布局

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style>
 #div1{
 height: 300px;
 width:600px;
 border: 10px solid red;
 padding: 10px;
 display: -webkit-box;/*//盒子布局*/
 -webkit-box-orient:horizontal;/*字元素布局方向*/
 -webkit-box-pack:center;
 -webkit-box-align:center;
 /*-webkit-box-direction: reverse;字元素是否反向*/
 /*水平方向富裕空间管理,就是说多余的空间 -webkit-box-pack:,start end center justify*/
 /* -webkit-box-pack:start内容在开始
 -webkit-box-pack:end内容在结束
 -webkit-box-pack:center内容在中间
 -webkit-box-pack:justify内容均衡分布*/
 /*垂直方向富裕空间管理,就是说多余的空间-webkit-box-align-start end center justify*/
 /*-webkit-box-align:start内容在开始
 -webkit-box-align:end内容在结束
 -webkit-box-align:
 -webkit-box-align:justify内容均衡分布*/
 }
 #div1 div{
 height:100px;
 width:100px;
 background: bisque;
 border: 1px solid;
 }
 #div1 div:nth-of-type(1){
 /*-webkit-box-flex: 2;子元素比重*/
 -webkit-box-ordinal-group: 1;/*每个元素排列顺序*/
 }
 #div1 div:nth-of-type(2){
 /*-webkit-box-flex: 4;子元素比重*/
 -webkit-box-ordinal-group: 2;/*每个元素排列顺序*/
 }
 #div1 div:nth-of-type(3){ /*-webkit-box-flex: 2;子元素比重*/
 -webkit-box-ordinal-group: 3;/*每个元素排列顺序*/
 }
 #div1 div:nth-of-type(4){ /*-webkit-box-flex: 2;子元素比重*/
 -webkit-box-ordinal-group: 4;/*每个元素排列顺序*/
 }
 #div1 div:nth-of-type(5){/* -webkit-box-flex: 2;子元素比重*/
 -webkit-box-ordinal-group: 5;/*每个元素排列顺序*/
 }
 </style>
 </head>
 <body>
 <div id="div1">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 </div>
 </body>
</html>

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2015-07-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏田超学前端

微信小程序 购物车代码

在判断加减数量的时候,minusStatus 这个属性是被我写在了产品的外面,所以,没做减到1的的时候,减号改变颜色,需要的可以把minusStatus 这个属...

37230
来自专栏向治洪

html5 jqueryrotate插件实现旋转动画

CSS3 提供了多种变形效果,比如矩阵变形、位移、缩放、旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动。然后 IE10 以下版本的浏览器不支持 CSS3...

46660
来自专栏前端杂货铺

边框的巧妙应用

边框有一些特殊的属性,可以采用边框来实现对话框的效果,而且兼容性杠杠的,不过在ie6下面可能会遇到兼容性问题,在后面分析它。 首先,我们看看边框的组成结构: ...

41680
来自专栏用户2442861的专栏

关于Div的宽度与高度的100%设定

正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度...

10520
来自专栏我和我大前端的故事

我不知道你知不知道我知道的伪元素小技巧

伪元素能做什么?我们要他有何用?它能为我们解决什么问题?和其他的方法相比她有什么有点?我们为什么要使用它?

12220
来自专栏企鹅号快讯

Web前端:浅析“HTML+CSS的基本应用”

Hyper Text Markup Language,简称HTML,超文本标记语言,因页面中可以包含图片、链接、音乐、程序等非文本元素,所以称为超文本。 ? H...

252100
来自专栏HTML5学堂

CSS3动画,为你带来极致的视觉体验!

HTML5学堂:随着网络的发展,浏览器具有更强的渲染与高级代码的执行能力。所以在当前,大量的动画效果由原来的JavaScript制作正慢慢的被CSS3所替代,究...

35170
来自专栏菜鸟前端工程师

html+css学习笔记010-垂直对齐0指针0透明

12520
来自专栏Nian糕的私人厨房

CSS Flex弹性盒布局

我在上一篇博文CSS 布局_2 Flex弹性盒里,对 Flex 弹性盒有着详细的介绍,这里就不再复述了,书写页面前,我们先来介绍一个之前没提到的知识点——伪类选...

15750
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!

19830

扫码关注云+社区

领取腾讯云代金券