一、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. Character.digit()的意义

    最近在阅读Integet.parseInt()源码时,遇到了Character.digit()这个方法,以前没有遇到过,更没使用过,这里查了资料就记录一下. 官方说法是: java.lang.Char ...

  2. <QluOJ2018NewCode>约数个数

    题目描述 p^q表示p的q次方,正整数M可以分解为M=(p1^a1)*(p2^a2)*(p3^a3)*……*(pn^an)的形式,其中p1,p2……pn为质数(大于1并且只能被1和自身整除的数叫做质数 ...

  3. dotnet 手动解决 json 解析中不合法字符串

    如果使用 Newtonsoft Json 解析字符串,字符串里面有不清真的格式,那么默认的解析将会炸掉.如果想要自己解决字符串中的不清真格式,可以使用传入 JsonSerializerSettings ...

  4. css3 移动端旋转动画暂停

    音乐播放图片旋转动画 ios不支持暂停: animation-play-state: paused; @-webkit-keyframes rotate{ 100% { transform: rota ...

  5. map实现删除给定字符串中的小写字母

    def del_lowerletters(s): if s>='a' and s<='z': return " " else: return s print(" ...

  6. Percona-XtraDB-Cluster 5.7版本（PXC）集群部署

    PXC(Percona-XtraDB-Cluster)5.7版本集群部署 Centos 7.3系统部署Mysql 集群 PXC三个节点分别执行和安装(1)配置hosts cat /etc/hosts1 ...

  7. eclipse中SSM(maven)项目搭建全过程+实现用户登录功能

    项目创建之前确保eclipse中已经配置好了jdk,tomcat,maven如果没有配置下面有配置教程的链接   eclipse中配置jdk的教程url:http://www.cnblogs.com/ ...

  8. 「洛谷P1233」木棍加工 解题报告

    P1233 木棍加工 题目描述 一堆木头棍子共有n根,每根棍子的长度和宽度都是已知的.棍子可以被一台机器一个接一个地加工.机器处理一根棍子之前需要准备时间.准备时间是这样定义的: 第一根棍子的准备时间 ...

  9. mysql索引最佳实践

    索引最佳实践使用的表CREATE TABLE `employees` (  `id` int(11) NOT NULL AUTO_INCREMENT,  `name` varchar(24) NOT ...

  10. JVM之对象

    几乎所有对象都是在堆中分配内存的,这次来讲讲java的对象. 对象的创建主要分为以下几步: 首先,查看类是否装载.当JVM读取到new指令的时候,会拿着符号描述去方法区寻找它所属的类,如果未查找到,则 ...