__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属性是定义内容区域的宽度,正常情况下,设置了内容 ...
随机推荐
- 类型和原生函数及类型转换(二:终结js类型判断)
typeof instanceof isArray() Object.prototype.toString.call() DOM对象与DOM集合对象的类型判断 一.typeof typeof是一个一元 ...
- Vim使用技巧汇总
一 写在开头 1.1 本文内容 Vim使用技巧与学习资源汇总. 二 Vim学习资源 1. Vimtutor 2. Vim中文帮助(http://vimcdoc.sourceforge.net/doc/ ...
- LCA学习笔记
写在前面 目录 一.LCA的定义 二.暴力法求LCA 三.倍增法求LCA 四.树链剖分求LCA 五.LCA典型例题 题目完成度 一.LCA的定义 LCA指的是最近公共祖先.具体地,给定一棵有根树,若结 ...
- sql server 2008 中的 server profiler 的简单使用
server profiler 是一个SQL server的 数据库执行语句的监控工具. 登录你需要监控的数据库. 2 .设置要监控进程的PID. 3.设置监控的数据库. 4 . 最后点击运行 就可以 ...
- Kotlin 的优缺点
从Android 7.0开始,谷歌使用的API从Oracle JDK切换到了open JDK,这对于谷歌来说是一个艰难的决定.对于开发者来说,却倍感兴奋,这意味着长期的官司问题也许就此结束,Andro ...
- ansible入门及组件介绍
Ansible简介 Ansible是自动化运维的工具,基于Python开发,实现了批量系统配置.批量程序部署.批量运行命令等功能.Ansible是基于模块工作的,ansible提供一个框架,通过模块实 ...
- Django之分页
需要知道:每页多少条数据.一共多少条数据.一共需要多少页.每页从哪开始到哪结束 注意问题:1.用户输入页码为非数字. 2.用户输入页码超出页码范围 def books(request): try: ...
- CF1119B Alyona and a Narrow Fridge
题目地址:CF1119B Alyona and a Narrow Fridge \(O(n^2)\) 暴力枚举+贪心 从小到大枚举答案 假设枚举到 \(i\) ,将 \(a_1\) 到 \(a_i\) ...
- 解决只读时ios下input光标问题
应用场景:在ios手机下对只读的input设置readonly=readonly属性还是会出现光标 解决方法: //解决ios日期光标问题 $("#Stime ,#provinceCity& ...
- PHP—-模型MODEL 一对多
假如有两个表,菜品和菜品种类,菜品的关联外键是food_type_id, 所以在菜品的model中应该写 public function foodType(){ return $this->be ...