HTML笔记06--浮动第一章
float --浮动 一
1.啥叫浮动?
【使元素向左或向右移动,其周围的元素也会重新排列】简言之,就是让盒子并排。
通过float定义浮动
未浮动样式代码如下:
div{
margin: 50px auto;
width: 100px;
height: 50px;
border: 1px solid #34f5f8;
line-height: 50px;
text-align: center;
}
.left{
border: 1px solid red;
}
.right{
border: 1px solid deeppink;
}
未浮动图
左浮动-----float:left;
代码:
div{float:left;}//div盒子左浮动
左浮动图
代码:
div{float:right;}//div盒子右浮动
右浮动图
脱离文档流:
在css中,让一个盒子脱离标准文档流,常用三种方式
1.让盒子浮动;2.让盒子绝对定位;让盒子固定定位。
让盒子浮动后,盒子将失去在标准文档流中的特性,盒子就不再区分是块元素还是行内元素
块元素
在标准文档流下,块元素默认宽度是容器的宽度
当盒子浮动,盒子的默认宽度将是内容的宽度(跟行内元素相似,默认没有了宽度),但是我们可以手动的设置盒子的宽高
行内元素
在标准文档流下,行内元素默认无法设置宽高(设置宽高失效,想设置要转化盒子)
当盒子浮动,行内元素是可以设置宽高的(跟块元素相似,设置宽高生效),我们可以手动设置他们的宽高
因此,当盒子浮动,即具有行内元素特征,由具有块元素特征,因此就不再区分行内元素或者是块元素,并且
修改display是无效的
。
依次贴边
默认盒子会按照序列排序,如果盒子前面有兄弟元素,盒子将紧贴它的兄弟元素;如果没有。盒子将帖边(帖在父元素的边上)
也就是说,如果一行容不下该元素,该元素会自动进入下一行,找到能够容下它的位置,然后渲染
例如老四,直接贴在老二上了
如果继续往下找,发现下一行能够容下它,它会渲染,即使上边有多余的空隙(能够容下它),他也不会钻进去,所以说他受他前面一个元素的影响
HTML笔记06--浮动第一章的更多相关文章
- 学习笔记-[Maven实战]-第一章:Maven简介
Maven简介: Maven 可翻译为:知识的积累,也可以翻译为"专家"或"内行". Maven 是一个跨平台的项目管理工具,是Apache组织中一个很成功的开 ...
- 【疯狂Java学习笔记】【第一章:Java语言概述】
[学习笔记]1.Java与C#的异同:Java与C#的相同之处有很多,它们均摒弃了C++面向对象的多继承.宏定义.全局变量.全局函数.指针等等难以使用的机制,添加进了成熟的机制,如垃圾回收.接口等等. ...
- 读书笔记http之第一章
http TCP/IP协议各层: 应用层 决定了向用户提供应用服务时通信的活动. 比如 : FTP(FileTransferProtocol,文件传输协议)和DNS(DomainNameSystem, ...
- Unity 黑暗之光 笔记 第一章
第一章 设计游戏开始进入场景 1.设置相机视野同步 选中要调整的相机 GameObject - Align With View(快捷键 Ctrl + Shift + F)
- PHP第一章学习——了解PHP(上)
计划开启PHP学习教程,情况如下: 1.采用教程35章48个视频文件 2.时间4月29日-5月6日 共计8天 3.具体划分每天学习章节数不少于5个,预留5-6号时间为五一假期出玩情况 4.要求认真学习 ...
- 学习笔记(一)--->《Java 8编程官方参考教程(第9版).pdf》:第一章到六章学习笔记
注:本文声明事项. 本博文整理者:刘军 本博文出自于: <Java8 编程官方参考教程>一书 声明:1:转载请标注出处.本文不得作为商业活动.违者本人不负法律责任.违法者自负一切法律责任. ...
- Python小游戏——外星人入侵(保姆级教程)第一章 06让飞船移动
系列文章目录 第一章:武装飞船 06:让飞船移动 一.驾驶飞船 下面来让玩家能够左右移动飞船.我们将编写代码,在用户按左或右箭头键时做出响应.我们将首先专注于向右移动,再使用同样的原理来控制向左移动. ...
- 【vue.js权威指南】读书笔记(第一章)
最近在读新书<vue.js权威指南>,一边读,一边把笔记整理下来,方便自己以后温故知新,也希望能把自己的读书心得分享给大家. [第1章:遇见vue.js] vue.js是什么? vue.j ...
- 第一章 Andorid系统移植与驱动开发概述 - 读书笔记
Android驱动月考1 第一章 Andorid系统移植与驱动开发概述 - 读书笔记 1.Android系统的架构: (1)Linux内核,Android是基于Linux内核的操作系统,并且开源,所以 ...
随机推荐
- Codeforces 1292A/1293C - NEKO's Maze Game
题目大意: 有一个2*n的图 NEKO#ΦωΦ要带领mimi们从(1,1)的点走到(2,n)的点 每次会操作一个点,从可以通过到不可以通过,不可以通过到可以通过 每操作一次要回答一次NEKO#ΦωΦ能 ...
- Escape from the Hell
Escape from the Hell [JAG Asia 2016] 容易证明优先选择差值大的更优 对于最后一瓶我们可以枚举 枚举最后一瓶,然后在树状数组上消去它的影响,然后线段树check是否出 ...
- 三十六、www服务nginx介绍
一.Nginx介绍 ,相对于LAMP经典组合而言,LNMP是近几年来流行的组合.(linux+nginx+mysql+php) Nginx是一个开源www服务软件,是俄罗斯人开发的,本身是一款静态ww ...
- c/c++[001]:start
作为一个学校课程跳过c语言的萌新,这次重新学习c/c++从源头上明白这两种不同的输入输出还是很有必要 scanf()是C语言中的一个输入函数.与printf函数一样,都被声明在头文件stdio.h里, ...
- 染色dp(确定一行就可行)
题:https://codeforces.com/contest/1027/problem/E 题意:给定n*n的方格,可以染黑白,要求相邻俩行”完全“不同或完全相同,对于列也是一样.然后限制不能拥有 ...
- 【转】Vim命令合集
Vim命令合集 命令历史 以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 vim 直接启动vim vim filena ...
- Kali-tools
title date tags layout Ubuntu Update Kali-Tools 2018-09-01 Linux post 创建shell文件 vim update-kali-sour ...
- Horizon公司环境
- JAVA数据结构——单链表
链表:一. 顺序存储结构虽然是一种很有用的存储结构,但是他有如下几点局限性:1. 因为创造线性表的时候已经固定了空间,所以当需要扩充空间时,就需要重新创建一个地址连续的更大的存储空间.并把原有的数据元 ...
- group compare vs pair compare
成对总体检验是令y1=x11-x12:y2=x21-x22等,令新的随机变量y去做假设检验.此方法适用于排除物理因素影响,对差异更敏感,所以适用于小样本.而使用两个总体均值比较的方法适用于大样本.