一、float

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>脱离文本流</title>

    <style>

        .c1{

            height: 100px;

            width: 100px;

            background-color: brown;

        }

        .c2 {

            height: 150px;

            width: 150px;

            background-color: blueviolet;

            float: right;

        }

        .c3 {

            height: 200px;

            width: 200px;

            background-color: red;

        }

    </style>

</head>

<body>

<div class="c1"></div>

<div class="c2"></div>

<div class="c3"></div>

</body>

</html>

二、absolute

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>脱离文本流</title>

    <style>

        .c1{

            height: 100px;

            width: 100px;

            background-color: brown;

        }

        .c2 {

            height: 150px;

            width: 150px;

            background-color: blueviolet;

            position: absolute;

            left: 200px;

        }

        .c3 {

            height: 200px;

            width: 200px;

            background-color: red;

        }

    </style>

</head>

<body>

<div class="c1"></div>

<div class="c2"></div>

<div class="c3"></div>

</body>

</html>

三、fixed

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>脱离文本流</title>

    <style>

        .c1{

            height: 100px;

            width: 100px;

            background-color: brown;

        }

        .c2 {

            height: 150px;

            width: 150px;

            background-color: blueviolet;

            position: fixed;

            left: 400px;

        }

        .c3 {

            height: 200px;

            width: 200px;

            background-color: red;

        }

    </style>

</head>

<body>

<div class="c1"></div>

<div class="c2"></div>

<div class="c3"></div>

</body>

</html>

css 脱离文档流的更多相关文章

  1. css脱离文档流

    作者:张秋怡链接:http://www.zhihu.com/question/24529373/answer/29135021来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  2. CSS脱离文档流&浮动

    什么是文档流? 将窗体从上至下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流.这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成 ...

  3. html/css基础篇——DOM中关于脱离文档流的几种情况分析

    所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...

  4. html/css 关于脱离文档流的几种情况

    所谓的文档流 顾名思义就是按照顺序流下来,指的是html元素从上往下 从左往右的流式排列, 比如说写了5个Div,正常的文档流是依次显示这5个div块: 脱离文档流就是指它所显示的位置和文档代码就不一 ...

  5. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  6. CSS中脱离文档流是什么意思?

    如果一个元素脱离文档流了,是不是只是显示上脱离而已?在html中是否也会脱离?我用js取这个元素的父节点的childNodes还能否取到这个元素:同时,这个元素的parentNode还是不是html中 ...

  7. 关于css浮动框是否脱离文档流的分析

    在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. ...

  8. CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

    1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

  9. HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法

    块级元素div分析 1.外边距  margin 2.内边距 padding 3.边框  border Div的真实宽度=width+margin-left+margin-right+border*2+ ...

随机推荐

  1. 2018-9-20-断点调试-Windows-源代码

    title author date CreateTime categories 断点调试 Windows 源代码 lindexi 2018-09-20 17:37:55 +0800 2018-05-1 ...

  2. vue-learning：12-vue获取模板内容的方式

    vue获取模板内容的方式 目录 outerHTML获取内容 template属性获取内容 ES6的字符串模板 <template>标签 <srcipt type="text ...

  3. 【Docker】企业级镜像仓库harbor的搭建(http/https)及使用

    一:用途 Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器. 二:安装docker-ce 环境:阿里云轻量应用服务器CentOS 7.3 这里通过yum Docker源仓 ...

  4. LeetCode20_Valid Parentheses有效的括号(栈相关问题)

    题目: 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合.左括号必须以正确的顺序闭合.注意空字符串可 ...

  5. flutter 安装环境 Mac

    1.这是我第二次mac 安装 flutter环境了,但是这种东西记不住.打开写一下 有用的东西 一. ls vi 等命令 command not found原因是因为环境变量的问题,编辑profile ...

  6. 004 ceph存储池

    介绍:前面已经使用deploy和ansble部署了ceph集群,现在对集群的池进行简单介绍和简单操作 一.部分概念 池是ceph存储集群的逻辑分区,用于存储对象 对象存储到池中时,使用CRUSH规则将 ...

  7. 曹工改bug--这次，我遇到了一个难缠的栈溢出bug，还是日志相关的，真的难

    前言 前几天,在linux上部署一个war包应用时,tomcat直接起不来,查看tomcat的日志,catalina.out里没啥特别的,但是查看localhost日志,发现栈溢出了. [root@l ...

  8. spring cloud Gateway简单使用

    一.引子 2年前有幸使用过一次Spring Cloud (1.5.9),那次用的是ZUUL做网关,没有使用Gateway做网关,一直是个小遗憾.终于在2年后的19年底再次使用Spring Cloud, ...

  9. 洛谷$P$2472 蜥蜴 $[SCOI2007]$ 网络流

    正解:网络流 解题报告: 传送门! $umm$一看就是个最大流呗,,,就直接考虑怎么建图趴$QwQ$ 首先看到这个高度减小其实就相当于对这个点的次数有约束,就显然拆点呗,流量为高度 然后$S$连向左侧 ...

  10. IDEA模板快捷键

    2.1 psvm:可生成 main 方法 2.2 sout:System.out.println() 快捷输出 类似的: soutp=System.out.println("方法形参名 = ...