60-浮动元素排序规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>60-浮动元素排序规则</title>
    <style>
        .box1{
            float: left;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box3{
            float: left;
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        .box4{
            float: left;
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
    </style>
</head>
<body>
<!--
1.浮动元素排序规则
1.1相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
1.2不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
1.3浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定
-->
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>


1
2
3
4

H5 60-浮动元素排序规则的更多相关文章

  1. HTML连载45-浮动元素脱标、排序规则、贴靠现象

    一.浮动元素脱标 1.什么是浮动元素脱标 脱标:脱离标准流. 当某一个元素浮动之后,那么这个元素看上去就像被从标准流中删除了一样 2.浮动元素脱标之后有什么影响 如果前面一个元素浮动了,而后面的一个元 ...

  2. SQL SERVER修改排序规则——脚本篇

    在上篇MS SQL 排序规则总结中,大致就数据库服务器排序规则(或者叫数据库实例排序规则).数据库排序规则.列的排序规则粗浅的叙说了一遍,重点讲述了修改数据库服务器排序规则(数据库实例排序规则),其中 ...

  3. SQL:无法解决 equal to 操作的排序规则冲突。

    更改存储过程的时候,在SQL中出现了 “无法解决 equal to 操作的排序规则冲突”错误,网上搜之,发现是表之间元素创建时排序规则不同(一个是collate Chinese_PRC_CI_AI_W ...

  4. HTML（二）HTML元素（整体结构，块级元素，内联元素，结构元素，交互元素，元素嵌套规则）

    HTML整体结构解释 <!DOCTYPE html> // 文件应以"<!DOCTYPE ......>"首行顶格开始,推荐使用"<!DOC ...

  5. python 全栈开发，Day114(装饰器,排序规则,显示列,添加按钮,定制ModelForm,自定义列表页面,自定制URL)

    一.装饰器 装饰器本质上就是一个python函数,他可以让其他函数在不需要做任何代码变动的前提下,增加额外的功能,装饰器的返回值也是一个函数对象. 装饰器的应用场景:比如插入日志,性能测试,事务处理, ...

  6. java编程排序之内置引用类型的排序规则实现，和自定义规则实现+冒泡排序运用

    第一种排序:[冒泡排序]基本数据类型的排序. [1]最简易的冒泡排序.效率低.因为比较的次数和趟数最多. /** * 最原始的冒泡排序. * 效率低. * 因为趟数和次数最多.都是按最大化的循环次数进 ...

  7. list元素排序需要满足两个条件

    关于List 说到list,我的印象就是单值集合接口,插入取出是有序的,允许重复,用他的实现类用的最频繁的就是ArrayList了.如果我现在有一个list,插入了一些值,想让里面的值按照我自定义的规 ...

  8. C++ set自定义排序规则（nyist 8）

    C++的容器大多数都是自动排序的,所以你使用这些容器时,你加入的元素类型必须是可以比较大小的,如果不是,则需要自定义排序规则,例如你自定义的结构体: #include <iostream> ...

  9. HTML块元素与内联元素嵌套规则

    HTML存在许多种类型的标签,有的标签下面只允许特定的标签存在,这就叫HTML嵌套规则.不按HTML嵌套规则写,浏览器就不会正确解析,会将不符合嵌套规则的节点放到目标节点的下面,或者变成纯文本.关于H ...

随机推荐

  1. 如何定位那些SQL产生了大量的redo日志

    在ORACLE数据库的管理.维护过程中,偶尔会遇到归档日志暴增的情况,也就是说一些SQL语句产生了大量的redo log,那么如何跟踪.定位哪些SQL语句生成了大量的redo log日志呢? 下面这篇 ...

  2. mssql 系统函数-字符串函数专题--字符串函数大全

    mssql 系统函数 字符串函数 substring 功能简介 mssql 系统函数 字符串函数 stuff 功能简介 mssql 系统函数 字符串函数 str 功能简介 mssql 系统函数 字符串 ...

  3. Linux唤醒抢占----Linux进程的管理与调度(二十三）

    1. 唤醒抢占 当在try_to_wake_up/wake_up_process和wake_up_new_task中唤醒进程时, 内核使用全局check_preempt_curr看看是否进程可以抢占当 ...

  4. c/c++ 深拷贝

    解决上一篇浅拷贝的问题 浅拷贝的问题根源是,类里有指针类型的成员变量,所以需要自己编写拷贝构造函数和重载=函数 #include <iostream> #include <strin ...

  5. Call to a member function display() on a non-object问题的解决

    在使用ThinkPHP做项目的时候,出现了如下 的报错: 报错是Call to a member function display() on a non-object.我的代码是: 查看了ThinkP ...

  6. LeetCode算法题-Third Maximum Number（Java实现-四种解法）

    这是悦乐书的第222次更新,第235篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第89题(顺位题号是414).给定非空的整数数组,返回此数组中的第三个最大数字.如果不存 ...

  7. LeetCode算法题-Binary Tree Level Order Traversal II（Java实现）

    这是悦乐书的第165次更新,第167篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第24题(顺位题号是107).给定二叉树,返回其节点值的自下而上级别顺序遍历(即从左到右 ...

  8. MYSQL基本操作（上）

    很久之前,就想做个Mysql的小结,毕竟数据库知识是软件研发的基本技能,这里话不多说,开始总结一波. 数据库基本概念 数据库为高效的存储和处理数据的介质(主要分为磁盘和内存两种),一般关系型数据库存储 ...

  9. InfluxDB基本概念和操作

    InfluxDB基本概念 1.数据格式 在 InfluxDB 中,我们可以粗略的将要存入的一条数据看作一个虚拟的 key 和其对应的 value(field value).格式如下: 1 cpu_us ...

  10. （转）Geoserver基础配图研究

    https://blog.csdn.net/zbcx_ZGIS/article/details/82216151 1面图层配图 1.1基本框架 这个是geoserver默认的polygon的代码,我们 ...