一、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. 原生js实现响应式轮播图，支持电脑端点击切图，手机端滑动切图

    轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...

  2. linux 内核定时器

    无论何时你需要调度一个动作以后发生, 而不阻塞当前进程直到到时, 内核定时器是给你 的工具. 这些定时器用来调度一个函数在将来一个特定的时间执行, 基于时钟嘀哒, 并且 可用作各类任务; 例如, 当硬 ...

  3. css3动画@keyframes示例

    .active { animation: chuiziza 0.5s ease 1 forwards; } .feijindan { display: block; animation: fei 2s ...

  4. Linux USB 和 sysfs

    由于单个 USB 物理设备的复杂性, 设备在 sysfs 中的表示也非常复杂. 物理 USB 设备 (通过 struct usb_device 表示)和单个 USB 接口(由 struct usb_i ...

  5. java环境所遇问题

    在javac能运行通过并且生成了.class文件但是java文件在运行时通不过出现上面图片情况,试了一上午发现我的和别人好像不一样,下面展示我的情况, 之前用户变量那里新建了一个classpath,不 ...

  6. Android CTS中neverallow规则生成过程

    CTS里面SELinux相关测试中neverallow测试项占绝大多数,Android系统开发者都应该知道,在修改sepolicy时,需要确保不能违反这些neverallow规则,不然会过不了CTS. ...

  7. 基于 Apache APISIX 的下一代微服务架构

    2019 年 12 月 14 日,又拍云联合 Apache APISIX 社区举办 API 网关与高性能服务最佳实践丨Open Talk 广州站活动,Apache APISIX PPMC 温铭做了题为 ...

  8. java中把某个字符串中的单引号替换成双引号

    String regexp = "\'";String str = "'good'";System.out.println("替换前:" + ...

  9. Python学习3月5号【python编程 从入门到实践】---》笔记

    ---恢复内容开始--- 1.变量 一.只能包含字母.数字.下划线.****不能以数字开头作变量 二.不能包含空格, 三.不要将python关键字和函数名用作变量名 四.最好能有描述性和简短的特征 五 ...

  10. 【题解】CF1142B Lynyrd Skynyrd(倍增)

    [题解]CF1142B Lynyrd Skynyrd(倍增) 调了一个小时原来是读入读反了.... 求子段是否存在一个排列的子序列的套路是把给定排列看做置换,然后让给定的序列乘上这个置换,问题就转化为 ...