__x__(43)0910第六天__ clearfix 解决:垂直外边距重叠,高度塌陷
<div class="box1">
<tabl></table>
<div class="box2"></div>
</div>
原理1:
<table> 将会隔离父子元素,
所以解决垂直外边距重叠问题方法1:
.clearfix:before{
content:"";
display:table;
}
原理2:
解决高度塌陷方法2:
.clearfix:after{
contemt:"";
display: block;
clear: both;
}
最终方法:
.clearfix {
zoom:;
} .clearfix:before,.clearfix:after {
content:"";
display: table;
clear: both;
}
给父元素加 class="clearfix"; 即可。
__x__(43)0910第六天__ clearfix 解决:垂直外边距重叠,高度塌陷的更多相关文章
- __x__(22)0907第四天__ 垂直外边距重叠
外边距重叠, 也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者...在布局时,易造成混淆. 1. 上下元素 垂直外 ...
- CSS min-height不能解决垂直外边距合并问题
垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-hei ...
- margin属性以及垂直外边距重叠问题
盒子的margin属性 盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置 ...
- __x__(44)0910第六天__表单
form表单: form必须属性:action,指定一个服务器地址. 若希望表单中的数据发送给服务器,必须设置name属性. 用户填写的信息,将会追加在url地址?后面,以查询字符串的形式发送给服务器 ...
- __x__(45)0910第六天__各种表单
效果图: html代码: <!doctype html> <html> <head> <meta charset="utf-8" /> ...
- __x__(46)0910第六天__框架集
框架集frameset 和 内联框架iframe 的作用类似: 在一个页面中,引入其他的外部html页面. 框架集可以同时引入多个页面. 在 html5 中,推荐使用框架集,而不推荐使用iframe ...
- __x__(49)0910第六天__命名规范
id class 命名规范: 小驼峰命名法: aaaBbbCcc,helloWorld 大驼峰命名法: AaaBbbCcc,HelloWorld 匈牙利命名法: 类型+描述 formUserName, ...
- __x__(42)0910第六天__表格布局 老旧的布局方法
table 布局 不易于维护,耦合太严重了. 不利于搜索引擎检索. 效果图: html代码: <!doctype html> <html> <head> <m ...
- css盒子模型、垂直外边距合并
css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容 ...
随机推荐
- Java计算文件MD5值(支持大文件)
import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.securit ...
- 五道java小题,补更四道java小题
一:分析以下需求,并用代码实现 1.定义List集合,存入多个字符串 2.删除集合中字符串"def" 3.然后利用迭代器遍历集合元素并输出 import j ...
- Navier-Stokes equations (Lectured by Luis Caffarelli)
百万美元问题: http://www.claymath.org/millennium-problems/navier%E2%80%93stokes-equation Official Problem ...
- pycharm实用快捷键集锦
以下是本人需要记录的快捷键,并不针对大众,所以是断断续续补充的,大家看看图个乐呵就成! 生成代码块(Surround with):Ctrl + Alt + t . 历史浏览页面跳转:很多时候,我们需要 ...
- springMVC中controller的几种返回类型
==网文1,还不错,感觉比较老旧springMVC中controller的几种返回类型 - CSDN博客http://blog.csdn.net/qq_16071145/article/details ...
- java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or.....
1,<activity android:name=".DialogActivity" android:theme="@android:style/Theme.Dia ...
- Redis和memcahce的区别【转】
先给大家讲一个基本知识点:数据库分类大致分为两类,关系型数据库和非关系型数据库.如果详细区分的话,还可以继续分下去. Redis不仅仅是缓存数据库 面试的时候,很多人会问,Redis和memcahce ...
- Linux Vi 的使用
进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + filename :打开文件,并将光标置于最后 ...
- Python-form表单标签
语义:标记表单 #1.什么是表单? 表单就是专门用来接收用户输入或采集用户信息的 #2.表单的格式 <form> <表单元素> </form> 链接:https:/ ...
- LMerge-github
ILMerge ILMerge是一个将多个.NET程序集合并到一个程序集中的实用程序.它可以免费使用,并以NuGet包的形式提供. 如果您在使用它时遇到任何问题,请与我们联系.(mbarnett at ...