CSS3控制元素排列

时间：2022-09-02 08:34:15

需求：

将CSS3控制元素排列改变为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控制元素排列的更多相关文章

  1. 3种纯css方法控制元素隐藏显示

    1.通过hover,也是最常用的方式.此方法要求按钮与被控制元素必须有层级关系.(兼容低端浏览器常用) <div class="nav-btn"> <h2> ...

  2. CSS 控制元素 上下左右居中

    不说废话,直接 搞起..... 首先,我们将题目 <css控制元素上下左右居中> 分析一下哈,我是将其分成了4部分信息: 1.CSS控制: 只用 CSS 来达成目的 2.元素:  不只是d ...

  3. CSS3 -webkit-transform&lpar;元素变换&rpar;

    CSS3 -webkit-transform(元素变换)   -webkit-transform:none | 类型 类型:scale:缩放,1为原始大小.scale(x).正数放大,负数缩小.属性值 ...

  4. Android中如何控制元素的显示隐藏？

    在Android程序中,有时需要程序开启时默认隐藏某个控件,当单击某个按钮时才触发显示控件的内容.比如在查询员工资料时,提交查询后再显示查询到的表格内容: Android中控制元素的隐藏参考以下代码. ...

  5. 使用 CSS3 伪元素实现立体的照片堆叠效

    CSS3 里引入的伪元素让 Web 开发人员能够在不需要额外添加 HTML 标签的情况下制作出复杂的视觉效果.例如,:before 和 :after 这个两个 CSS3 伪元素就可以帮助你实现很多有趣 ...

  6. css控制元素 水平垂直居中

    控制元素居中核心代码为 position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; css: /* 容器 */ .w ...

  7. 如何使用T-SQL备份还原数据库及c&num;如何调用执行？ C&num;中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用（一） span&lt&semi;T&gt&semi;之高性能字符串操作实测

    如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...

  8. 用Jquery控制元素的上下移动 实现排序功能

    在页面上,控制元素上下移动,进行排序是我们比较常用的功能,今天我用jQuery 写个 简单方便,功能齐全的实现方式. 话不多说,直接上代码,下面是基础的引入jq和html元素部分: <scrip ...

  9. CSS3：元素的边框、背景和大小

    边框 和边框相关的属性例如以下. border-width 用于设置边框的宽度,可选择包含: 1)<长度值>:将边框宽度设为以CSS度量单位(如em.px.cm)表达的长度值. 2)&lt ...

随机推荐

  1. MyBatis入门案例

    1.案例架构 2.引入jar 包 3.书写配置文件mybatis-config.xml <?xml version="1.0" encoding="UTF-8&qu ...

  2. html5 OPOA

    1.0 one page one application     一个应用只有一个页面,对用户的表现来说的. 2.0 起源于web的MIS系统     MIS(管理信息系统) 3.0 银行客户端 4. ...

  3. 独立博客网站FansUnion&period;cn操作2多年的经验和教训以及未来计划

    今天,我把运营了2年的独立博客站点FansUnion给"归零"了.    2012年6月.我成功搭建了自己的博客站点FansUnion.cn,这是因为自己的不懈努力和时代发展成就的 ...

  4. swiper实现臭美app滑动效果

    一.臭美app效果: 我的需求是这样,上面正常滑动,点击下面的小卡牌,上面的滑动区也随之切换到当前的点击态. 二.实现: css: 主要设置可见区域的几张卡牌的位置,注意的几个位置是,中间的激活态和左 ...

  5. spring中Constructor、&commat;Autowired、&commat;PostConstruct的顺序

    其实从依赖注入的字面意思就可以知道,要将对象p注入到对象a,那么首先就必须得生成对象p与对象a,才能执行注入.所以,如果一个类A中有个成员变量p被@Autowired注解,那么@Autowired注入 ...

  6. Thymeleaf3语法详解

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code   Thymeleaf是Spring boot推荐使用的模版引擎,除此之外常见的还有F ...

  7. Cookie-parser

    let express = require('express'); let app =new express(); // 引入cookie-parser; let cookieParser = req ...

  8. 找不到 main 方法&comma; 请将 main 方法定义为&colon; public static void main&lpar;String&lbrack;&rsqb; args&rpar; 否则 JavaFX 应用程序类必须扩展javafx&period;应用程序类必 须扩展javafx&period;application&period;Application”

    用eclipse写代码的时候,写了一个简单的程序,编译的时候突然出现“错误: 在类 com.test.demo 中找不到 main 方法, 请将 main 方法定义为: public static v ...

  9. 涂抹mysql笔记-mysql数据库文件结构

    <>初始化选项文件:默认位置:windows平台 windir\my.ini windir可通过echo $WINDIR$查看 系统盘的根目录即:c:\my.ini installdir\ ...

  10. 【BZOJ1880】&lbrack;Sdoi2009&rsqb;Elaxia的路线（最短路）

    [BZOJ1880][Sdoi2009]Elaxia的路线(最短路) 题面 BZOJ 洛谷 题解 假装我们知道了任意两点间的最短路,那么我们怎么求解答案呢? 不难发现公共路径一定是一段连续的路径(如果 ...

相关文章