一、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-11-1-Windows-Community-Toolkit-3.0-新功能

    title author date CreateTime categories Windows Community Toolkit 3.0 新功能 lindexi 2018-11-1 9:2:55 + ...

  2. hdu 6851 Vacation（思维+贪心）

    传送门 •题意 有编号0到n,n+1辆车排队过红绿灯,从0到n离交通灯线越来越近 每辆车都有一个最大速度v,车身长度l,和离交通灯线的距离s, 一辆车头到达线则说明这辆车已到达线 如果一辆车前面没有紧 ...

  3. VisualStudio 断点调试详解

    本文详细告诉大家 VisualStudio 断点调试的功能和使用方法,本文使用的是最新 VisualStudio2019 的功能,也许在你看到这篇博客的时候这个版本已经过时 本文将会按照从简单到复杂, ...

  4. ie6,7不支持display:inline-block;

    解决方案: display:inline-block; *display:inline;*zoom:1; ie6:* _ ,ie7:*

  5. 解决netcore在docker容器中连接oracle报错（timezone region not found）

    错误提示: timezone region not found错误原因:docker 容器内时区不是 CST 导致解决办法:1.在dockerfile 中增加一下命令ENV TZ=Asia/Shang ...

  6. Android TextView调用Settext()耗时的原因

    当textview的宽设置为wrap_content的时候,底层会调用checkForRelayout函数,这个函数根据文字的多少重新开始布局 因此将宽度设置为固定值或者match_parent的时候 ...

  7. Checkpoint checkup中文报告模板使用

    步骤: Step1:下载中文版语言包和字体 https://supportcenter.checkpoint.com/supportcenter/portal?action=portlets.DCFi ...

  8. Vijos1917 艾酱最喜欢的数字 [求绝对众数]

    1.题意:第一行一个数字N,表示一共有多少个数字,第二行N个数字,保证其中至少有一个数字出现次数超过一半,任务是求出这个出现最多的数. 2.分析:本题是明显的求众数的问题,常规思路为开一个大数组,在读 ...

  9. 彩票历史记录分析工具 -- 通过实例学习wpf开发

    前言 虽然本人对彩票不感兴趣,仍然有不少人对此情有独钟.他们花大量时间精力去分析彩票的历史记录,企图发现规律,为下一次投注做指导,希望“赢的“”概率增大.不管研究历史记录是否有意义,我用软件实现了对彩 ...

  10. Visio文本相关操作

    三种方式:双击形状输入文本,插入文本框, 文本工具 文本块工具 选择后可以对文本进行移动旋转 如果要给文本加入边框 直接显示线条就可以了 因为都是文本框 添加特殊文本: 插入符号 插入域 比如当前时间 ...