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 ...
随机推荐
- 软件测试为何我会首选Python
对于软件测试选择什么样的语言去学习,不同的人有不同的回答,为什么我会首选Python呢?这就要从Python的特点与适应领域说了. 一.Python的特点:优雅.明确.简单. 二.Python适合的领 ...
- C#易忘点
下面是自己总结的一些C#语言方面用的少容易忘的地方,总结一下,在用的时候看一下.(仅针对本人) 参数数组 定义一个函数,用来取得数字的和,但是数字的个数不确定. 解决方案: 1,定义一个函数,参数传递 ...
- 部署jar项目常用命令
netstat -tunlp | grep ×× 查询出端口为××在运行应用的线程ip kill -9 ×× 关闭线程ip 为 ××的应用 rm -f ××.jar ...
- maybe i have no answer
怎么说呢,我从小学开始到高中,大学.我觉得老师对大家都是一样的,虽然我因为父母的原因可能和老师接触比较多,但是学业上其实没什么帮助的. 我更希望老师能给我人生道路上的指点,虽然自己的道路确实是自己走出 ...
- 读C#程序（第三周）
阅读下面程序,请回答如下问题: 问题1:这个程序要找的是符合什么条件的数? 问题2:这样的数存在么?符合这一条件的最小的数是什么? 问题3:在电脑上运行这一程序,你估计多长时间才能输出第一个结果?时间 ...
- 基于Winform框架DataGridView控件的SqlServer数据库查询展示功能的实现
关键词:Winform.DataGridView.SqlServer 一个基于winform框架的C/S软件,主要实现对SqlServer数据库数据表的实时查询. 一.为DataGridView添加数 ...
- 表格-table 样式
.table: 表格基本样式 .table-dark:表格显示为黑色 .thead-light: 表头显示颜色跟亮 .thead-dark:表头显示为黑色 .table-striped:表格以条纹形式 ...
- Beta冲刺——day6
Beta冲刺--day6 作业链接 Beta冲刺随笔集 github地址 团队成员 031602636 许舒玲(队长) 031602237 吴杰婷 031602220 雷博浩 031602134 王龙 ...
- final评论2
1-约跑APP 小组准备的非常的充分,还带了摄像头,整个发布过程清晰很多.可能是由于上次发布时没有完全展现出自己组的作品,所以这次发布做了充分的准备,本组重点放在了修改其他组发现的bug,团队的约跑项 ...
- SQLSERVER 设置自动备份数据库
1. SQLSERVER 简单的设置 计划任务 进行 备份数据库的操作. 首先需要打开 一些设置 执行 命令如下: sp_configure ; GO RECONFIGURE; GO sp_confi ...