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)< ...
随机推荐
- oldboy第三天学习
一.上课体验及感受 额第三天了.身心疲惫.上课一脸懵逼,是最标准的诠释.三个星期的疲惫感,更深了.很难,但是还要继续 写好作业.吸收知识. 二.三级列表 menu = { '北京':{ '海淀':{ ...
- Smarty 插件开发
插件包含了: functions modifiers block functions compiler functions prefilters postfilters outputfilters r ...
- iOS开发手记 - iOS9.3 Xcode7打包ipa文件在其他越狱机器上运行的方法和一些问题
现在Xcode7可以用一个appleid就可以往手机上部署测试app,不再需要$99,这也是方便.但是要把app发给别人的手机上运行还是不行,除非别人的手机在你身边可以直接通过Xcode安装 关于怎么 ...
- cf298F：状压dp+剪枝
div2的F题,只想到了一个复杂度略高的dp,T了几次,后来加了剪枝减掉一些无用的状态终于过了.. 题意: 一个n*m的矩阵 (n<=5,m<=20),对格子进行黑白染色,已经给出了每行每 ...
- cf202-div 1-B - Apple Tree：搜索，数论，树的遍历
http://codeforces.com/contest/348/problem/B B. Apple Tree time limit per test 2 seconds memory l ...
- 百度系统部 在 北京市海淀区西二旗首创空间大厦 招聘 Python-交付运维系统研发工程师 - 内推网(neitui.Me)
百度系统部 在 北京市海淀区西二旗首创空间大厦 招聘 Python-交付运维系统研发工程师 - 内推网(neitui.Me) 汪肴肴 (wa**@baidu.com) 发布了 Python-交付运维系 ...
- Spring+Mybatis+mysql配置
mybatis的映射文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper SY ...
- Linux 之 rsyslog 系统日志转发（转载）
一.rsyslog 介绍 ryslog 是一个快速处理收集系统日志的程序,提供了高性能.安全功能和模块化设计.rsyslog 是syslog 的升级版,它将多种来源输入输出转换结果到目的地,据官网介绍 ...
- 从epoll构建muduo-11 单线程Reactor网络模型成型
mini-muduo版本传送门 version 0.00 从epoll构建muduo-1 mini-muduo介绍 version 0.01 从epoll构建muduo-2 最简单的epoll ver ...
- Showing 2 changed files with 3 additions and 3 deletions.
4 lib/matplotlib/__init__.py View @@ -126,9 +126,9 @@ def compare_versions(a, b): else: ...