__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属性是定义内容区域的宽度,正常情况下,设置了内容 ...
随机推荐
- Typora使用说明(记录总结)
目录 区域元素 YAML FONT Matters 菜单 段落 标题 引注 序列 可选序列 代码块 数学块 表格 脚注 水平线 特征元素 链接 超链接 内链接 相关链 URLs 图片 斜体 加粗 删除 ...
- 第十二节:MVC中的一些特殊优化
一. 删除WebForm视图引擎 在MVC框架中检索视图的顺序为:当前控制器下对应的文件夹的aspx文件→share文件夹aspx文件→当前控制器下对应文件夹的cshtml文件→share文件夹的cs ...
- Node.js实战项目学习系列(1) 初识Node.js
前言 一直想好好学习node.js都是半途而废的状态,这次沉下心来,想好好的学习下node.js.打算写一个系列的文章大概10几篇文章,会一直以实际案例作为贯穿的学习. 什么是node Node.js ...
- pymysql的使用及sql注入
pymysql简介 pymysql是python操纵mysql的一个模块,本质上是一个socket客户端 pymysql使用 准备数据 #创建数据库db2,如果已存在,请忽略 CREATE DATAB ...
- 「luogu2486」[SDOI2011] 染色
https://www.luogu.org/problemnew/show/P2486 轻重链剖分后,问题转化为一个链上的问题: 线段树维护区间内的颜色段数量,左端点.右端点的颜色: 线段树注意事项 ...
- redis更多
应用场景 存放频繁操作的数据,以及一些无须保存到数据库的中间值 应用: - 配合django做缓存,常用且不易修改的数据放进来(博客) - 购物车信息 - Session - 缓存配置文件 - ses ...
- 往服务器部署thinkphp5代码时要注意 pathinfo的问题
往服务器部署thinkphp5代码时要注意 pathinfo的问题 如果nginx没有做任何设置 要使用?s=/的方式访问地址 只需要修改3个地方就可以了,亲测成功,看代码有注解 location ~ ...
- 【原创】大数据基础之Oozie(1)简介、源代码解析
Oozie4.3 一 简介 1 官网 http://oozie.apache.org/ Apache Oozie Workflow Scheduler for Hadoop Hadoop生态的工作流调 ...
- php 新闻上一条下一条
public function prevnext($table,$id,$where=[]){ $ids=db($table)->field('id,title')->order('sor ...
- c4b和c4f的区别
1. cc.c4b的参数直接填rgba的值. 2 .cc.c4f(r,g,b,透明度),把rgb值填进去,会发现颜色不对,需要把rgb值除以255,所以最终转换公式是: cc.c3b(r,g,b) = ...