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 ...
随机推荐
- Android 模拟输入那点事
因工作原因,需要用到模拟输入这个东东,查阅了一些资料,实现方式有多种,我大概分为两类,命令行类和程序类. 命令行类包括自动化测试组件monkeyrunner,getevent/setevent命令,i ...
- Kosaraju算法、Tarjan算法分析及证明--强连通分量的线性算法
一.背景介绍 强连通分量是有向图中的一个子图,在该子图中,所有的节点都可以沿着某条路径访问其他节点.强连通性是一种非常重要的等价抽象,因为它满足 自反性:顶点V和它本身是强连通的 对称性:如果顶点V和 ...
- Celery基本使用
Celery 什么是Celery? Celery是一种简单/高效/灵活的即插即用的分布式任务队列. Celery应用场景? 需要异步处理的任务,发邮件/发短信/上传等耗时的操作.最终到达提升用户体验的 ...
- 12.15daily_scrum
新的阶段工作已经开始,本阶段我们小组的工作重心在于界面的优化和资源配置的整合,让用户产生更好的体验效果,有一些更加直观和便捷的应用功能展示,加以相应的辅助功能让新版本的笔记本软件更具竞争力和可用性. ...
- Daily Scrum NO.5
工作概况 符美潇 昨日完成的工作 1.Daily Scrum.日常会议及日常工作的分配和查收. 2.变更集461代码签入,主要与视频链接爬取有关. 今日工作 1.Daily Scrum.日常会议及日常 ...
- Linux内核分析——构造一个简单的Linux系统MenuOS
马悦+原创作品转载请注明出处+<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.Linux内核源代码简 ...
- Leetcode题库——47.全排列II
@author: ZZQ @software: PyCharm @file: permuteUnique.py @time: 2018/11/16 13:34 要求:给定一个可包含重复数字的序列,返回 ...
- opencv图像识别技术在自动化测试中的应用
在自动化测试中,基于xpath.js选择器.css选择器进行元素定位及判定的技术已经比较成熟.在实际应用中,无论是web端还是移动端,仍有很多时候需要根据页面内容.页面中的图像进行定位及判定,这里介绍 ...
- 选择排序的C、C++实现
一.选择排序 选择排序(Selection sort)是一种简单直观的排序算法.它的工作原理是每一次从待排序的数据元素中选出最小(或最大)的一个元素,存放在序列的起始位置,直到全部待排序的数据元素排完 ...
- SQLSERVER 查看操作系统内存
1. 通过系统试图查看内存信息 SELECT total_physical_memory_kb / AS [物理内存(MB)] , available_physical_memory_kb / AS ...