JavaScript常用模块
HTML&CSS基础-高度塌陷问题
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.高度塌陷问题
1>.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高度塌陷</title> <style type="text/css">
.box1{
/*为box1设置一个边框*/
border: 10px red solid; } .box2{
width: 100px;
height: 100px;
background-color: yellow; /**
* 在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
*
* 但是当子元素设置浮动以后，子元素完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素高度塌陷，由于父元素高度塌陷了，则父元素下的所有元素都会向上移动，这样将导致页面布局混乱。
*
* 所以在开发中一定要避免出现高度塌陷的问题:
* 我们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。
*
*
*
*
*/
float: left; } .box3{
width: 100px;
height: 100px;
background-color: deeppink;
}
</style>
</head>
<body> <div class="box1">
<div class="box2"></div>
</div> <div class="box3"></div>
</body>
</html>
2>.浏览器打开以上代码渲染结果
二.解决高度塌陷问题方案1
1>.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解决高度塌陷问题方案1</title> <style type="text/css">
.box1{
/*为box1设置一个边框*/
border: 10px red solid;
/**
* 根据W3C的标准，在页面中元素都有一个隐含的属性叫做Block，Formatting，Context(简称BFC),该属性可以设置打开或关闭，默认是关闭的。
*
* 当开启元素的BFC以后，元素将会具有如下的特色:
* 1>.父元素的垂直外边距不会和子元素重叠;
* 3>.开启BFC的元素不会被浮动元素所覆盖 ;
* 2>.开启BFC的元素可以包含浮动元素的子元素;
*
* 父如何开启元素的BFC?有以下几种方式:
* 1>.设置元素浮动
* 例如:"float: left;"
* 使用这种方式开启，虽然子元素可以撑开父元素，但是会导致父元素的宽度丢失，而这种方式也会导致下边的元素上移，不能解决问题，因此这种解决方案并不推荐使用。
* 2>.设置元素绝对定位
* 基本上和设置元素浮动的效果是一样，因此这种方式也不推荐使用
* 3>.设置元素为inline-block;
* 例如:"display: inline-block;"
* 可以解决问题，但是会导致宽度丢失，因此这种方式也不推荐使用
* 4>. 将元素的overflow设置为一个非visible的值
* 例如:"overflow: auto;"
* 比如将overflow的值设置为auto或者hidden的方式是副作用是最小的开启BFC的方式，因此这种方式我们是推荐使用的。
*
* 温馨提示:
* 但是在IE6及以下的浏览器并不支持BFC,所以使用这种方式不能兼容IE6。
* 在IE6虽然没有BFC，但是具体一个隐藏的属性叫做haslayout，该属性的作用和BFC类似，所以在IE6浏览器可以通过开hasLayout来解决该问题
* 开启haslayout方式很多，为我们直接使用副作用最小的:
* 直接将元素的zoom设置为1即可。
*
* 综上所述:
* 因此生产环境中为了兼容性强我们可以将"overflow: hidden;"和"zoom: 1;"都写上。
*/
overflow: hidden; /**
* zoom表示放大的意思，后面跟着一个值，写几就将元素放大几倍。
* "zoom: 1;"表示不放大元素，但是通过该样式可以开启haslayout
*
* zoom这个样式，只有在IE中支持，其它浏览器都不支持，遗憾的是"zoom: 1;"这种写法目前只有IE6和IE7支持，IE8以上版本均不支持了。
*
*/
zoom: 1;
} .box2{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
} .box3{
height: 100px;
background-color: deeppink;
}
</style>
</head>
<body> <div class="box1">
<div class="box2"></div>
</div> <div class="box3"></div> </body>
</html>
2>.浏览器打开以上代码渲染结果
二.解决高度塌陷问题方案2
1>.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解决高度塌陷问题方案2</title> <style type="text/css">
.box1{
border: 1px solid red;
} .box2{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
} /**
* 解决高度塌陷的方案二:
* 可以直接在高度塌陷的父元素的最后，添加一个空白的div,由于这个div并没有浮动，所以它可以撑开父元素的高度;
* 然后在对其进行清除浮动，这样可以通过这个空白div来撑开父元素的高度，基本没有副作用,而且兼容各种浏览器。
*
* 上面这种解决方案是W3C推荐的方式:
* 使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构，有点美中不足，那么你还有其它的解决办法呢？
*/
.clear{
clear: both;
}
</style>
</head>
<body> <div class="box1">
<div class="box2"></div>
<div class="clear"></div>
</div> </body>
</html>
2>.浏览器打开以上代码渲染结果
三.解决高度塌陷问题最终方案
1>.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解决高度塌陷问题方案3</title> <style type="text/css">
.box1{
border: 1px solid red;
} .box2{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
} /**
* 通过after伪类,选中clearfix的后边,以后谁高度塌陷都给他配置一个clearfix属性。
*
* 可以通过after伪类向元素的最后添加一个空白的块元素，然后对齐清除浮动，这样左和添加一个div的原理一样，可以达到一个相同的效果
*
* 而且不会再页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用。
*/
.clearfix:after{
/*添加一个内容*/
content: "";
/*转换成一个块元素*/
display: block;
/*清除两侧的浮动效果*/
clear: both;
} /**
* 在IE6中不支持ater伪类,所以在IE6中还需要使用hasLayout来处理
*/
.clearfix{
zoom: 1;
}
</style>
</head>
<body> <div class="box1 clearfix">
<div class="box2"></div>
</div> </body>
</html>
2>.浏览器打开以上代码渲染结果
JavaScript常用模块的更多相关文章
- seajs实现JavaScript 的 模块开发及按模块加载
seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http:/ ...
- python学习笔记之常用模块（第五天）
参考老师的博客: 金角:http://www.cnblogs.com/alex3714/articles/5161349.html 银角:http://www.cnblogs.com/wupeiqi/ ...
- Tengine 常用模块使用介绍
Tengine 和 Nginx Tengine简介 从2011年12月开始:Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能 和特性. ...
- Day05 - Python 常用模块
1. 模块简介 模块就是一个保存了 Python 代码的文件.模块能定义函数,类和变量.模块里也能包含可执行的代码. 模块也是 Python 对象,具有随机的名字属性用来绑定或引用. 下例是个简单的模 ...
- python——常用模块2
python--常用模块2 1 logging模块 1.1 函数式简单配置 import logging logging.debug("debug message") loggin ...
- python学习日记（常用模块）
模块概念 什么是模块 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编写的代 ...
- day20 python常用模块
认识模块 什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用pytho ...
- python自动化开发-[第六天]-常用模块、面向对象
今日概要: 1.常用模块 - os模块 - random模块 - shutil模块 - hashlib模块 - pickle/json模块 - shelve模块 - configparser模块 - ...
- Python常用模块之json模块
常用模块: 一个Python文件就是一个模块 import xxx 1. 标准模块,Python自带的,如time/random 2. 第三方模块,如连接mysql,需要安装 3. 自己写的Pytho ...
随机推荐
- 同步、异步、回调执行顺序之经典闭包setTimeout分析
聊聊同步.异步和回调 同步,异步,回调,我们傻傻分不清楚, 有一天,你找到公司刚来的程序员小T,跟他说:“我们要加个需求,你放下手里的事情优先支持,我会一直等你做完再离开”.小T微笑着答应了,眼角却滑 ...
- SpringBoot日记——编码配置篇
插入一个小篇章,有人在编写代码的时候,要么控制台乱码,要么页面乱码等等, 我这里有个配置,可以解决各种乱码问题,直接来看. # ==================== 编码配置 ========== ...
- Js_特效II
字号缩放 让文字大点,让更多的用户看的更清楚.(也可以把字体变为百分比来实现)<script type="text/javascript"> function doZ ...
- mount命令详解及常见问题汇总
一 .mount命令(用来挂载硬盘或镜像等) 用法:mount [-t vfstype] [-o options] device dir1.-t vfstype 指定文件系统的类型,通常不必指定.mo ...
- Win7 64位操作系统连接HP 1010打印机完美解决方案
工作的第一天就遇到问题,新电脑无法连接老式的HP1010打印机,64位Windows7系统无法连接32位XP网络共享打印机,而32位WIN7就可以. 这里分享个简单的解决方法: 先去下载 ...
- Scrapy框架中的CrawlSpider
小思考:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬取进行实现(Request模块递归回调parse方法). 方法二: ...
- supervisor管理进程 superlance对进程状态报警
supervisor介绍 首先,介绍一下supervisor.Supervisor(http://supervisord.org/)是用Python开发的一个client/server服务,是Linu ...
- StackGAN 阅读笔记
StackGAN 阅读笔记 StackGAN论文下载链接(arxiv) 创新点 提出多尺度的GAN Stage-I GAN Stage-II GAN Stage-I GAN 主要是根据文本描述抓取目标 ...
- Gartner研究副总裁：人工智能的五点傲慢与偏见
对于人工智能能够为各企业机构完成哪些任务,IT与业务领导者们时常感到困惑,并深受多个人工智能错误观念的困扰.全球领先的信息技术研究和顾问公司Gartner认为,开发人工智能项目的IT与业务领导者必须分 ...
- 第十五次ScrumMeeting博客
第十五次ScrumMeeting博客 本次会议于12月4日(一)22时整在3公寓725房间召开,持续30分钟. 与会人员:刘畅.辛德泰.张安澜.赵奕.方科栋. 1. 每个人的工作(有Issue的内容和 ...