css 脱离文档流
一、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 脱离文档流的更多相关文章
- css脱离文档流
作者:张秋怡链接:http://www.zhihu.com/question/24529373/answer/29135021来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
- CSS脱离文档流&浮动
什么是文档流? 将窗体从上至下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流.这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成 ...
- html/css基础篇——DOM中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
- html/css 关于脱离文档流的几种情况
所谓的文档流 顾名思义就是按照顺序流下来,指的是html元素从上往下 从左往右的流式排列, 比如说写了5个Div,正常的文档流是依次显示这5个div块: 脱离文档流就是指它所显示的位置和文档代码就不一 ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- CSS中脱离文档流是什么意思?
如果一个元素脱离文档流了,是不是只是显示上脱离而已?在html中是否也会脱离?我用js取这个元素的父节点的childNodes还能否取到这个元素:同时,这个元素的parentNode还是不是html中 ...
- 关于css浮动框是否脱离文档流的分析
在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. ...
- CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...
- HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法
块级元素div分析 1.外边距 margin 2.内边距 padding 3.边框 border Div的真实宽度=width+margin-left+margin-right+border*2+ ...
随机推荐
- 基于AutoIt3的打印机安装
#Region ;**** 编译指令由 AutoIt3Wrapper 选项编译窗口创建 **** #AutoIt3Wrapper_Icon=favicon.ico #AutoIt3Wrapper_Co ...
- Redis内存回收机制
为什么需要内存回收? 原因有如下两点: 在 Redis 中,Set 指令可以指定 Key 的过期时间,当过期时间到达以后,Key 就失效了. Redis 是基于内存操作的,所有的数据都是保存在内存中, ...
- c#链接redis用户名密码
方法一 使用:ServiceStack.Redis 在ip:port前面加上@用来表示密码,比如password@ip:port <add key="RedisServer" ...
- Linux下搭建实现HttpRunnerManager的异步执行、定时任务及任务监控
前言 在之前搭建的HttpRunnerManager接口测试平台,我们还有一些功能没有实现,比如异步执行.定时任务.任务监控等,要完成异步执行,需要搭建 RabbitMQ 等环境,今天我们就来实现这些 ...
- ant design 的Table组件固定表头时不对齐
现在有一个表格,里面的列数是不固定的(可以重复写入数据),且列数行数都可能很多,就带来一个问题: 必须要固定表头,但是antd 的表格组件设置了固定表格 scroll={{x:1000,y:300}} ...
- Volatile是用于解决什么问题，谈谈实现原理
一.volatile的作用 通常情况下我们可以通过Synchronized关键字来解决这些个问题,不过如果对Synchronized原理有了解的话,应该知道Synchronized是一个比较重量级的操 ...
- 小白进阶之路-python格式化输出
1.不使用格式化前:传值时比较麻烦而且不精确. 2.格式化输出后,%代表先占个位,s代表字符串,%s代表这里之后会传一个字符串类型的值,%s其实可以接受任意类型的值:%d传入的值要求必须是数字. %s ...
- 20191031-6beta week 1/2 Scrum立会报告+燃尽图 04
此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9914 git地址:https://e.coding.net/Eustia/ ...
- $Noip2018/Luogu5022$ 旅行
$Luogu$ $Description$ 一个$n$个点,$m$条边的图.$m=n-1$或$m=n$.任意选取一点作为起始点,可以去往一个没去过的点,或者回到第一次到达这个点时来自的点.要求遍历整个 ...
- Atlas 读写分离
1.前置条件 需要配置好mysql 主从 主库:192.168.28.137:16205 从库:192.168.28.135:16205 Atlas:192.168.28.139 2.Atlas 部署 ...