__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属性是定义内容区域的宽度,正常情况下,设置了内容 ...
随机推荐
- 深入学习javaScript闭包(闭包的原理,闭包的作用,闭包与内存管理)
前言 虽然JavaScript是一门完整的面向对象的编程语言,但这门语言同时也拥有许多函数式语言的特性. 函数式语言的鼻祖是LISP,JavaScript在设计之初参考了LISP两大方言之一的Sche ...
- MySQL学习4 - 数据类型一
介绍 一.数值类型 二.浮点型 验证三种类型建表 验证三种类型的精度 三.日期类型 综合练习: 介绍 存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己的宽度,但宽度是可选 ...
- eclipse hadoop环境搭建 查看HDFS文件内容
1.下载插件 hadoop-eclipse-plugin-2.5.2.jar放入eclipse/plugin 2.准备hadoop-2.5.0-cdh5.3.6 使用WinSCP远程连接虚拟机,复制h ...
- XML与HTML的作用不同
1. html是用来显示数据的:xml是用来描述数据.存放数据的,所以可以作为持久化的介质!Html将数据和显示结合在一起,在页面中把这数据显示出来:xml 则将数据和显示分开. XML被设计用来描述 ...
- 51nod--1072 威佐夫游戏 (博弈论)
题目: 1072 威佐夫游戏 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 有2堆石子.A B两个人轮流拿,A先拿.每次可以从一堆中取任意个或从2堆中取相同 ...
- 《剑指offer》最小的k个数
本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:
- mac svn无法保存密码,JetBrains IDE(WebStrom、IntelliJ IDEA) 反复提示输入密码
一.vim ~/.subversion/config用vim修改以下四个地方store-passwords = yesstore-plaintext-passwords = yesstore-ssl- ...
- SpringBoot Redis缓存 @Cacheable、@CacheEvict、@CachePut
文章来源 https://blog.csdn.net/u010588262/article/details/81003493 1. pom.xml <dependency> <gro ...
- LQFP(未整理完成)
注意:文中所提供的链接有可能会失效.不定期维护,如有异常,期待指正,谢谢! LQFP48 7 x 7 mm 图片来源:https://www.st.com/resource/en/datasheet/ ...
- [原创]iFPGA-Cable FT2232H JTAG & UART调试器
iFPGA-Cable FT2232H JTAG & UART调试器 [特性] 采用FT2232H,双通道接口: 支持UART: 支持JTAG,Digilent SMT-1,TCK最大时钟频率 ...