CSS3控制元素排列
需求：
将
改变为
。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AB换位置</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 400px;
height: 500px;
margin: 50px auto;
border: 1px solid #999;
line-height: 200px;
font-size: 60px;
color: #fff;
text-align: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: center;
-webkit-box-pack: center;
/*-webkit-box-direction: normal;*/
-webkit-box-direction: reverse;
}
.a {
width: 200px;
height: 200px;
background: red;
}
.b {
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div class="box">
<div class="a">aaa</div>
<div class="b">bbb</div>
</div>
</body>
</html>
解释：
1. display: -webkit-box; CSS3新盒模型，与display:flex;相似，具体请见。。。。
2. -webkit-box-orient: vertical; 子元素排列方向：纵向（vertical），还有横向（horizontal，默认方向）。
3. -webkit-box-align: center; 子元素横向排列方式：居中排列（center），还有靠左（start）、靠右（end）、靠基线（baseline）。
4. -webkit-box-pack: center; 子元素纵向排列方式：居中排列（center），还有靠上（start）、靠下（end）。
5. -webkit-box-direction: reverse; 子元素排列顺序：倒序排列（reverse），还有正常（normal，默认顺序）。
收获：
通过一些CSS2的巧妙运用，也可以达到反序的效果，但只限两个元素，如果元素个数大于2，再用CSS2反序，想死的心都有了。
不过CSS3这个direction还是很方便的，虽说有兼容问题，单相信在不久的将来，CSS3就会变得更加常用和重要。
毕竟，“简单，强大”才是主线。
CSS3控制元素排列的更多相关文章
- 3种纯css方法控制元素隐藏显示
1.通过hover,也是最常用的方式.此方法要求按钮与被控制元素必须有层级关系.(兼容低端浏览器常用) <div class="nav-btn"> <h2> ...
- CSS 控制元素 上下左右居中
不说废话,直接 搞起..... 首先,我们将题目 <css控制元素上下左右居中> 分析一下哈,我是将其分成了4部分信息: 1.CSS控制: 只用 CSS 来达成目的 2.元素: 不只是d ...
- CSS3 -webkit-transform(元素变换)
CSS3 -webkit-transform(元素变换) -webkit-transform:none | 类型 类型:scale:缩放,1为原始大小.scale(x).正数放大,负数缩小.属性值 ...
- Android中如何控制元素的显示隐藏？
在Android程序中,有时需要程序开启时默认隐藏某个控件,当单击某个按钮时才触发显示控件的内容.比如在查询员工资料时,提交查询后再显示查询到的表格内容: Android中控制元素的隐藏参考以下代码. ...
- 使用 CSS3 伪元素实现立体的照片堆叠效
CSS3 里引入的伪元素让 Web 开发人员能够在不需要额外添加 HTML 标签的情况下制作出复杂的视觉效果.例如,:before 和 :after 这个两个 CSS3 伪元素就可以帮助你实现很多有趣 ...
- css控制元素 水平垂直居中
控制元素居中核心代码为 position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; css: /* 容器 */ .w ...
- 如何使用T-SQL备份还原数据库及c#如何调用执行？ C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用（一） span<T>之高性能字符串操作实测
如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...
- 用Jquery控制元素的上下移动 实现排序功能
在页面上,控制元素上下移动,进行排序是我们比较常用的功能,今天我用jQuery 写个 简单方便,功能齐全的实现方式. 话不多说,直接上代码,下面是基础的引入jq和html元素部分: <scrip ...
- CSS3：元素的边框、背景和大小
边框 和边框相关的属性例如以下. border-width 用于设置边框的宽度,可选择包含: 1)<长度值>:将边框宽度设为以CSS度量单位(如em.px.cm)表达的长度值. 2)< ...
随机推荐
- opencv中Mat类型数据操作与遍历
Mat作为opencv中一种数据类型常常用来存储图像,相对与以前的IplImgae类型来说,Mat类型省去了人工的对内存的分配与释放,转而自动分配释放.Mat Class主要包括两部个数据部分:一个是 ...
- Activity之间切换使用系统内置动画
例如: startActivity(intent); overridePendingTransition(android.R.anim.fade_in,android.R.anim.fade_out) ...
- 人工神经网络简介和单层网络实现AND运算--AForge.NET框架的使用（五）
原文:人工神经网络简介和单层网络实现AND运算--AForge.NET框架的使用(五) 前面4篇文章说的是模糊系统,它不同于传统的值逻辑,理论基础是模糊数学,所以有些朋友看着有点迷糊,如果有兴趣建议参 ...
- COJ 0979 WZJ的数据结构（负二十一）
WZJ的数据结构(负二十一) 难度级别:C: 运行时间限制:5000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 请你实现一个数据结构,完成这样的功能: 给你一个 ...
- 2013第38周日Java文件上传下载收集思考
2013第38周日Java文件上传&下载收集思考 感觉文件上传及下载操作很常用,之前简单搜集过一些东西,没有及时学习总结,现在基本没啥印象了,今天就再次学习下,记录下自己目前知识背景下对该类问 ...
- HDOJ 1197 Specialized Four-Digit Numbers
Problem Description Find and list all four-digit numbers in decimal notation that have the property ...
- 非常华丽的jQuery/HTML5应用推荐
jQuery确实是一个非常优秀的JavaScript框架,尤其是结合HTML5,更可以让网页变得生动有趣.今天向大家推荐一些非常华丽的jQuery/HTML5应用,废话不多说,直接看吧. 1.jQue ...
- Android中几种常用的话框
1.普通对话框: Builder alert=new AlertDialog.Builder(MainActivity.this); alert.setTitle("提示"); a ...
- eclipse svn插件安装
1,在线直接安装 help --> Eclipse Marketplace 2,下载subclipse.zip 把features.plugins拷贝到eclipse安装目录 3,直接把subc ...
- JS截取字符串方法
function textSubstr(str,sub_length){ str = str.trim(); var temp1 = str.replace(/[^\x00-\xff]/g," ...