当一个容器内元素都浮动后,它将高度将不会随着内部元素高度的增加而增加,所以造成内容元素的显示超出了容器。

overflow:auto;是让高度自适应,
zoom:1;是为了兼容IE6,也可以用height:1%;的方式来解决

1、浮动

  浮动是CSS中用到的最多的一个选项,他有三个性质。关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动。

  1.1 浮动元素脱离标准文档流

    1.1.1
大概描述:有两个盒子,一个盒子浮动,一个盒子不浮动。浮动的盒子会脱离标准文档流,不浮动的盒子会在标准文档流中成为第一个,所以两者出现覆盖现象。

    

    1.1.2
大概描述:一个行内标签在标准文档流中是不能设置宽高的,但是使用float使其脱离文档流之后,就可以对其设置宽高了。所有浮动的标签不会去区分行内标签和块级标签。也就是说: 一旦一个元素浮动了,那么,将能够并排了,并且能够设置宽高了。无论它原来是个div还是个span。

  1.2 浮动的元素互相贴靠 

    以float向左浮动为例:

    如果有足够空间,那么就会靠着2哥。如果没有足够的空间,那么会靠着1号大哥。

    如果没有足够的空间靠着1号大哥,自己去贴左墙。

    

  1.3 浮动元素有“自围”的效果

    自围效果就是:浮动的盒子可以遮盖文档标准流的第一个盒子,但是不会遮盖里面的文字,文字会围绕浮动的盒子显示。

    在CSS代码中让div浮动,p不浮动,那么p中的文字就睡形成这种自围效果。

<</span>div>
<</span>img src="data:images/1.jpg" alt="" />
</</span>div>
<</span>p>123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</</span>p>

    

zoom:1是什么意思的更多相关文章

  1. Nike Zoom Winflo 2 Kvinder Sko Når jeg set elementet

    De fleste af os elskede denne Nike Pegasus 34 foruden var ved at blive begejstret for at få dine ben ...

  2. css zoom属性兼容ie,firefox,chrome

    jquery代码: $("body").css({ "zoom":"2", "transform":"scal ...

  3. Selenium通过WebDriver控制IE浏览器出错 Browser zoom level was set to 109%. It should be set to 100%

    错误信息: WebDriverException: Message: Unexpected error launching Internet Explorer. Browser zoom level ...

  4. 关于scale和zoom的区别

    其实关于scale,我之前是用他来搞一些css3的特效的放大缩小啊,玩的也挺6666,而*zoom:1之前是用来做css的hack,也就是触发IE6/7的haslayout清除浮动的.终于某天,好事的 ...

  5. [WPF系列]-Deep Zoom

        参考 Deep Zoom in Silverlight

  6. CSS中不为人知Zoom属性的使用介绍(IE私有属性)

    其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的 ...

  7. zoom在css中的作用

    zoom:1 zoom:1;属性是IE浏览器的专有属性,Firefox等其它浏览器不支持.它可以设置或检索对象的缩放比例. 兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来 ...

  8. zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...

  9. 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)

    缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...

  10. d3 API zoom

    常用的看明白了,还有几个地方不太明白. zoom函数: area path circle .on("zoom", function(){ that.svg_obj.select(& ...

随机推荐

  1. Head First设计模式之外观模式

    一.定义 外观模式提供了一个统一的接口,用来访问子系统中的一群接口.外观定义了一个高层接口,让子系统更容易使用. 外观模式不只是简化了接口,也将客户从组件的子系统中解耦. 外观和适配器可以包装许多类, ...

  2. 每天学一点Docker(6)——镜像和DockerFile

    镜像的分层结构: 实际上,Docker Hub 中 99% 的镜像都是通过在 base 镜像中安装和配置需要的软件构建出来的.比如我们现在构建一个新的镜像,Dockerfile 如下: ① 新镜像不再 ...

  3. 转: 谈JAVA_OPTS环境变量不起作用

    谈JAVA_OPTS环境变量不起作用 2016-6-14 11:12 最近在处理运行一个java应用时,老是出现java.lang.OutOfMemoryError: Java heap space. ...

  4. angular4.0运行在微信端的坑坑洼洼

    最近的一个项目,我用ng4操刀,踩了超多的坑: 坑1:项目build后,刷新后404错误: 解决方案:<angular4.0项目build发布后,刷新页面报错404> 坑2:微信分享: 运 ...

  5. MySQL 行锁 表锁机制

    MySQL 表锁和行锁机制 行锁变表锁,是福还是坑?如果你不清楚MySQL加锁的原理,你会被它整的很惨!不知坑在何方?没事,我来给你们标记几个坑.遇到了可别乱踩.通过本章内容,带你学习MySQL的行锁 ...

  6. 【Java框架型项目从入门到装逼】第八节 - 用EasyUI绘制主界面

    1.引入资源包 在上一节中,我们把基本的框架都搭好了,用了Spring,SPringMVC.这一节,我们先来画页面,前端框架采用EasyUI来实现. easyui是一种基于jQuery的用户界面插件集 ...

  7. Appium 命令行模式下遇到的问题总结及解决方案 npm ERR! tar.unpack unzip(或者untar) error

    安装了GUI Appium后,卸载删除问题后,使用命令行模式安装. 一. 遇到问题: nalideMacBook-Pro:~ nali$ npm install -g appium npm ERR! ...

  8. ionic2 开始第一个App(二)

    安装App指令:ionic start 你的项目文件夹名称 tabs 安装指令如: ionic start myApp tabs 安装时间有点长,耐心等待~ 进入myApp文件夹指令:cd myApp ...

  9. 使用FormatMessage函数编写一个内核错误码查看器

    在编写驱动程序的时候,常用的一个结构是NTSTATUS,它来表示操作是否成功,但是对于失败的情况它的返回码过多,不可能记住所有的情况,应用层有一个GetLastError函数,根据这个函数的返回值可以 ...

  10. PE文件简介

    PE文件的全称是Portable Executable,意为可移植的可执行的文件,常见的EXE.DLL.OCX.SYS.COM都是PE文件,PE文件是微软Windows操作系统上的程序文件(可能是间接 ...