关于CSS inline-block、BFC以及外边距合并的几个小问题
CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正。
一、在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例
定义:当两个垂直外边距相遇时,将形成一个外边距。
合并的场景:
- 一个元素出现在另一个元素上面时;
示例:
- 一个元素包含另一个元素时(没有内边距或边框把它们的外边距分开)
如图效果中,父容器box和子元素box1的上外边距合并,与子元素box2的下外边距合并。
- 一个没有内边距和边框的空元素,它的上下外边距相遇会合并;
当我们给空元素添加边框后,变化很明显:
我们可以很明显的看到:情况一中文字距离box边框的距离是情况二中的一半。
合并后的高度为这两个外边距中高度为这两个外边距中高度值最大者。
解决方案:
1.对于一个元素出现在另一个元素上面:可以使用的方法有:
- 使用display:inline-block;示例如下:
- 使用浮动;示例如下:
2.对于父子以及空元素外边距合并,可以使用通过设置padding和border来解决;
二、去除inline-block内缝隙有哪几种常见方法?
inline-block产生间隙的情况如下:
要想清除inline-block内的缝隙,我们可以采取以下几种方法:
- 去除li元素之间的空格;示例如下:
- 负边距;示例如下:
注意第一个li与外边界之间的距离。
- 使用浮动;示例如下:
- 将li中的font-size设为0px;示例如下:
三、父容器使用overflow: auto| hidden撑开高度的原理是什么?
父容器使用overflow:auto|hidden后,会形成BFC,清除子元素浮动造成的影响,形成自己的“小宇宙”,从而把父容器撑开。
四、BFC是什么?如何形成BFC,有什么作用?
定义:BFC(Block formating context)直译为“块级格式化上下文”。是按照块级盒子布局的。W3C给出的定义如下:
浮动元素和绝对定位元素,非块级盒子的会计容器(例如inline-blocks,table-cells,和table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。
如何形成BFC:
1.根元素或其它包含它的元素;
2.浮动(元素的float 不为none);
3.绝对定位(元素的position 为absolute或fixed);
4.行内块inline-blocks(元素的display:inline-block);
5.表格单元格(元素的display:table-cell,HTML表格单元格默认属性);
6.overflow的值不为visible的元素;
7.弹性盒子flex boxes(元素的display:flex或inline-flex)
作用:
1.BFC可以避免外边距折叠;示例:
html:
<pre><div class="box">
<div class="box1"></div>
<div class="new">
<div class="box2"></div>
</div>
</div></pre>
css:
<pre>.box{
border:1px solid;
background:#ccc;
}
.box1{
height:100px;
width:100px;
background:#0000ff;
margin:20px;
}
.box2{
height:100px;
width:100px;
background:red;
margin:20px;
}
.new{
overflow:auto;
}</pre>
实现的效果:
2.BFC包含浮动;
3.使用BFC避免文字环绕;
4.在多列布局中使用BFC。
五、浮动导致的父容器高度塌陷指什么?为什么会产生?有几种解决方法?
浮动导致的父容器高度塌陷指的是子元素浮动后使得父容器没有高度;
产生原因:浮动的框会左右移动,直至它的边缘遇到包含框或者另一个浮动框的边缘。浮动框或脱离文档流,当一个元素浮动之后,文档流就表现得和浮动框不存在一样,当浮动框高度超过包含框的时候,就会出现包含框不会自动伸高来闭合浮动元素,从而出现“父容器高度塌陷”。
解决方法:
1.使用clear:left|right|both;
2.父元素也设置浮动;
3.给父元素设置overflow:hidden|auto
4.使用伪元素 :after.
参考文献:
1.How To Clear Floats Without Structural Markup
2.那些年我们一起清除过的浮动
3.【CSS】浮动和它的工作原理?清除浮动的技巧?
4.CSS中的BFC
版权所有,若有转载,请注明来源。
关于CSS inline-block、BFC以及外边距合并的几个小问题的更多相关文章
- CSS min-height不能解决垂直外边距合并问题
垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-hei ...
- BFC 以及 外边距合并问题
BFC定义: BFC(Block formatting context)直译为"块级格式化上下文". 它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部 ...
- css盒子模型、垂直外边距合并
css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容 ...
- 深入理解BFC和外边距合并(Margin Collapse)
一.什么是BFC? 1.BFC的概念 BFC全称Block Formatting Context ,直译“块级格式化上下文”,也有译作“块级格式化范围”.它是 W3C CSS 2.1 规范中的一个概念 ...
- css外边距合并和z-index的问题
参考这篇文章, 将外边距的 折叠 参考这篇文章, 将bfc的生成, bfc的应用 参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, ...
- 李洪强和你一起学习前端之(6)css行高,盒模型,外边距
李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...
- CSS外边距合并&块格式上下文
前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为 ...
- 由外边距合并到BFC
置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<JavaScript实现Ajax小结> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...
- 文本溢出、垂直外边距合并、BFC、hasLayout
今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overf ...
随机推荐
- Redis数据库
Redis是k-v型数据库的典范,设计思想及数据结构实现都值得学习. 1.数据类型 value支持五种数据类型:1.字符串(strings)2.字符串列表(lists)3.字符串集合(sets)4.有 ...
- Matlab slice方法和包络法绘制三维立体图
前言:在地球物理勘探,流体空间分布等多种场景中,定位空间点P(x,y,x)的物理属性值Q,并绘制三维空间分布图,对我们洞察空间场景有十分重要的意义. 1. 三维立体图的基本要件: 全空间网格化 网格节 ...
- scrapy爬虫docker部署
spider_docker 接我上篇博客,为爬虫引用创建container,包括的模块:scrapy, mongo, celery, rabbitmq,连接https://github.com/Liu ...
- .NET平台开源项目速览(17)FluentConsole让你的控制台酷起来
从该系列的第一篇文章 .NET平台开源项目速览(1)SharpConfig配置文件读写组件 开始,不知不觉已经到第17篇了.每一次我们都是介绍一个小巧甚至微不足道的.NET平台的开源软件,或者学习,或 ...
- SQL Server-聚焦计算列或计算列持久化查询性能(二十二)
前言 上一节我们详细讲解了计算列以及计算列持久化的问题,本节我们依然如前面讲解来看看二者查询性能问题,简短的内容,深入的理解,Always to review the basics. 持久化计算列比非 ...
- vs2010静态链接MFC库报链接错误
由于需要将MFC程序在其它电脑上运行,所以需要将动态链接的MFC改成静态链接,本以为很简单,没想到链接的时候出现下面的链接错误: uafxcw.lib(afxmem.obj) : error LNK2 ...
- html5 与视频
1.视频支持格式. 有3种视频格式被浏览器广泛支持:.ogg,.mp4,.webm. Theora+Vorbis=.ogg (Theora:视频编码器,Vorbis:音频编码器) H.264+$$$ ...
- pdo的使用
PHP 数据对象 (PDO) 扩展为PHP访问数据库定义了一个轻量级的一致接口. PDO 提供了一个数据访问抽象层,这意味着,不管使用哪种数据库,都可以用相同的函数(方法)来查询和获取数据. PDO随 ...
- Solr高级查询Facet
一.什么是facet solr种以导航为目的的查询结果成为facet,在用户查询的结果上根据分类增加了count信息,然后用户根据count信息做进一步搜索. facet主要用于导航实现渐进式精确搜索 ...
- ASP.NET Core 中文文档 第四章 MVC(4.1)Controllers, Actions 和 Action Results
原文:Controllers, Actions, and Action Results 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:许登洋(Seay) Action 和 acti ...