浮动
1.定位概述
元素应该出现在网页中的哪个位置
2.定位的分类
1.普通流定位(文档流定位)
块元素:默认是从上往下排
行元素:默认从左往右排序
2.浮动定位
3.相对定位
4.绝对定位
5.固定定位
3.浮动定位(俯视)
1.什么是浮动定位或者特点
1.会将元素排除在文档流之外(脱离文档流)
2.元素不再占据页面空间
3.其他元素要向前补位
4.浮动元素会停靠在父元素的左边或者右边
或者
停靠在已经浮动的元素的边缘上
2.处理的处理(作用)
1.让块元素在一行显示
3.属性
float:
取值:
right 右浮动
left 左浮动
none 默认 不浮动
#d1{
width:200px;
height:100px;
background-color: red;
float:left;
}
#d2{
width:200px;
height:100px;
background-color:green;
}
#d3{
background-color:purple;
width:200px;
height:100px;
}
将红色背景的div想左边漂浮,则原来的绿色div不显示是红色被遮挡在面。
将三块div全部想左漂浮,则全部展现。块元素浮动处理则展现在一行显示,排序body内div排布顺序按照顺序排列。
#d1{
width:200px;
height:100px;
background-color: red;
float:left;
}
#d2{
width:200px;
height:100px;
background-color:green;
float:left;
}
#d3{
background-color:purple;
width:200px;
height:100px;
float:left;
}
4.特殊处理
1.如果父元素的宽度已经
装不下所有已经浮动的元素,
那么最后一个将会换行
2.浮动元素如果不设置宽的话,
那么元素的宽度将会自适应
3.所有浮动起来的元素都会变成块元素
块元素:能设置宽和高
4.浮动元素对 文字 行内元素 有特殊的影响
特殊的影响:文本环绕
- perf ,比较好的一个程序性能测试工具
- Linux shell 程序设计5——shell中一些特殊符号的用法总结
- Linux shell 程序设计4——shell变量
- 基于CallContextInitializer的WCF扩展导致的严重问题
- 1228-redux学习笔记(摘录) | WEB前端零基础课
- 在fedora下使用搜狗拼音输入法
- 一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例)
- 【1120-WEB零基础课】| 单例模式,下周要讲
- 使用gerrit作为代码评审工具
- 如何重构你的时间序列预测问题
- 【聊】我个人眼里的ReactJs生态系统
- [WCF REST] Web消息主体风格(Message Body Style)
- apache配置https服务
- [WCF 4.0新特性] 默认绑定和行为配置
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- C++11 move 语义
- 论函数的设计应如何才好,返回临时变量 | 返回引用 | 传递引用
- Flutter基础widgets教程-CupertinoTabView篇
- 关于time的使用
- class priority_queue<> 简单介绍
- C++ share_prt 简单设计和实现
- 使用函数对象与使用函数的比较
- C++ 函数指针的定义方法及使用
- C++ 线程池的简易实现
- Flutter基础widgets教程-DataTable篇
- 2015-C++研发附加题第一题
- win7 64位 下,进程可申请的堆空间
- 生成N位格雷码
- sort 升序还是降序?priority_queue 大根堆还是小根堆?
- 将2N个整数分成两组,每组有N个数,并且满足,这两组的差的绝对值最小。