通常我们使用块级格式化上下文（BFC）就能解决。 什么是BFC？...FC(formatting context)直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。...新方式，文末会提及） contain 值为 layout、content或 strict 的元素 弹性元素（display为 flex 或 inline-flex元素的直接子元素） 网格元素（display...常见应用场景 使父元素包含浮动元素 下面例子解释如何让浮动内容和父元素等高，清楚浮动负面影响 html I am a floated...有个新的属性flow-root可以在任何需要创建BFC场景下使用，它并且不会带来任何副作用。
6、display的block、inline和inline-block的区别？ 7、隐藏元素的方法有哪些？ 8、图片间隙问题如何解决 9、项目中你是如何做图片优化的？...18、margin和padding分别适合什么场景使用？ 19、CSS属性overflow属性定义溢出元素内容区的内容会如何处理? 20、对line-height是如何理解的？...flex布局是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。...可以使用flex-direction来指定主轴的方向。可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。...display:none;使用该属性后，HTML元素（对象）的宽高，高度等各种属性值都将“丢失”； visibility:hidden;使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明
解决办法一：flex布局 + padding-bottom 解决思路： 使用flex弹性布局，使子元素成为容器成员 父元素使用flex-wrap: wrap;将flex 元素 被打断到多个行中 CSS...flex-wrap 指定 flex 元素单行显示还是多行显示 。...cross-start 会根据 flex-direction 的值 相当于 start 或 before。 wrap flex 元素 被打断到多个行中。...3、巧妙使用padding-bottom，为子元素设置高度 padding-bottom 属性设置元素的下内边距（底部空白），因为padding-bottom计算的基准值是以父元素的宽度来进行的。...该属性设置元素下内边距的宽度。行内非替换元素上设置的下内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。
display:node：把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉。 如何画一个三角形 左右边框设置为透明，长度为底部边框的一半。...如何清除 1、父元素设置overflow: hidden(少用) 2、clearfix：使用内容生成的方式清除浮动，不会破坏文档流。...1、使用flex .parent { height: 600px; border: 1px solid red; display: flex; justify-content...，使下面的子div都处在父div的同一个BFC区域之内 4.分属于不同的BFC时，可以阻止margin重叠 CSS3特性 vh和vw vh 相对于视窗的高度，视窗高度是100vh vw 相对于视窗的宽度....flex { display: flex; float: none; } }
当一张牌悬停时，其他牌不应改变大小并向外移动，以免彼此重叠。 所有的牌应该保持垂直居中。 听起来不错吧？现在让我们开始带大家一步步写代码。 HTML和flexible元素 让我们先设置一行预览的图像。...其中包括： 包含多个.item元素的.container父元素容器 每个.item元素都包含一个包装在锚标记中的图像 将.container转换为一个flex容器，该容器将行中的项对齐 设置.item类的...flex行为，使它们在行中占用相等的空间 HTML代码如下： <img src="....{ position: relative; <em>display</em>: block; <em>flex</em>: 1 1 0px; } .item img { <em>display</em>: block; max-width...CSS代码如下： .container { <em>display</em>: <em>flex</em>; margin-top: 50px; } .item { position: relative; <em>display</em>
（属于普通流） 如何创建BFC overflow不为visible float不为none position不为static或者relative display属性为inline-block、flex...、table-cell等 BFC作用 可以避免外边距重叠的问题，将两个元素放在不同的BFC容器中即可。...高度塌陷 原因 很多情况父盒子不方便给高度，子盒子浮动脱离文档流不占位置，使父盒子高度为0 解决方案 在浮动元素末尾加一个空标签，设clear:both 父级添加overflow:hidden 使用...父元素display:table;width:100% 所有子元素：display:table-cell calc布局：全部float:left .main:calc(100% - 两宽度) 使用...如何使英文单词发生词内断行 word-wrap:break-word。 13. div水平垂直居中的几种方式。
css如何实现垂直居中（5种方法） 第一种 这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性 <!...使用 margin:auto;使块级元素垂直居中是很简单的。 <!...布局，常用的几个属性值； Flex 布局详解 - Flex布局的常用属性 任何东西都可以Flex布局； 包括行内元素： display:inline-flex | flex; .box { flex-wrap...值为 layout,content, paint 弹性元素（display: flex|inline-flex） 网格元素（display: grid|inline-grid） 多容器（column-count...同一个类名 class , 可以多次使用 同一个标签，可以使用多个 class 类名 同一个 id 名，在一个页面只能使用一次 同一个标签，只能有一个 id 名 CSS reset 和 CSS normalize
元素默认的display值是table 基本特征:一个水平流上只能「单独显示」一个元素，多个块级元素则换行显示 由于块级元素具有换行特性,配合clear属性用来清除浮动 .clear::...≈ display:inline-inline ❝「块级盒子负责结构,内联盒子负责内容」 ❞ 内联元素 如何区分内联元素 从「定义」上：内联元素的内联特指外在盒子 从「表现」上：可以和文字在一行显示...flex-wrap属性 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 nowrap:(「默认」）：不换行。...因此浏览器不得不清空队列，触发回流重绘来返回正确的值 减少回流 对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响 使用css3...「硬件加速」，可以让transform、opacity、filters这些动画不会引起回流重绘 在使用 JavaScript 「动态插入多个节点」时, 可以使用DocumentFragment.创建后一次插入
使用flex布局的示例代码如下： .container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center...使用flex布局的示例代码如下： .container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center...可以使用伪类和伪元素来精确控制某些元素的样式，从而实现更加复杂的效果。 什么是BFC？如何创建BFC？...属于同一个BFC的两个相邻盒子的上下外边距会发生重叠。 BFC的区域不会与浮动元素重叠。 BFC在页面上是一个独立的容器，容器内部的元素不会影响到外面的元素。...display属性为inline-block、table-cell、flex、inline-flex等。 overflow属性不为visible。
Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。 相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。...box重叠 BFC是一个独立容器，容器里面的子元素不会影响到外面的元素 计算BFC的高度时，浮动元素也参与计算高度 元素的类型和display属性，决定了这个Box的类型。...的值不为visible BFC的使用场景 去除边距重叠现象 清除浮动（让父元素的高度包含子浮动元素） 避免某元素被浮动元素覆盖 避免多列布局由于宽度计算四舍五入而自动换行 让一个元素水平垂直居中 水平居中...缺点： （1）计算困难 （2）各个属性中如果使用百分比，相对父元素的属性并不是唯一的。造成我们使用百分比单位容易使布局问题变得复杂。...如何使用rem或viewport进行移动端适配 rem适配原理： 改变了一个元素在不同设备上占据的css像素的个数 rem适配的优缺点 优点：没有破坏完美视口 缺点：px值转换rem太过于复杂(下面我们使用
# 使用 BFC 解决边距重叠问题 块格式化上下文（Block Formatting Context，BFC） (opens new window) 是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域...BFC 决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当设计到可视化布局的时候，BFC 提供了一个环境，HTML 元素在这个环境中按照一定的规则进行布局。...# BFC 渲染规则 BFC 元素垂直方向的边距会发生重叠，属于不同 BFC 外边距不会发生重叠 BFC 的区域不会与浮动元素的布局重叠 BFC元素是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素...值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器 网格元素（display 值为 grid 或 inline-grid...元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器
Box: CSS布局的基本单位 Box是CSS布局的对象和基本单位， 直观点来说，就是一个页面是由很多个Box组成的。元素的类型和display属性，决定了这个Box的类型。...不同类型的Box， 会参与不同的Formatting context(一个决定如何渲染文档的容器)，因此Box内的元素会以不同的方式渲染。...它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...(元素的 display: inline-block) 表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性) 表格标题 (元素的 display: table-caption..., HTML表格标题默认属性) overflow 的值不为 visible的元素 弹性盒 flex boxes (元素的 display: flex 或 inline-flex) 三、BFC的用途及原理
虽然它们所能做的事情有一些重叠，但其各自在CSS布局中有着非常特别的目的。...因此，你可能需要把三个元素都设置为统一的高度，或者使用某种黑科技。 让flexbox来救场吧。 让我们Flex flexbox的要点是出现在display属性上的flex值，它需要被设置在容器元素上。...因为你不仅要重排列内部元素，还要重排外部的，display:flex规则将被设置在之上。注意这里是如何在页面中嵌套使用flex容器来达到你想要的效果的。...这个属性是以下独立属性的简写： flex-grow：一个数字，指明元素如何相对其他flex项来拉伸 flex-shrink：一个数字，指明元素如何相对其他flex项来收缩 flex-basis：元素的长度...总结 如你所见，如果我们想控制元素在网页中的布局，flexbox可以让我们的生活更加轻松。它非常稳固和可靠，让以前那些我们每天使用的诸如使 让容器坍缩之类的奇技淫巧，成为了过去。
Flex 使用CSS3的flex布局实现三栏布局，Flex布局也称弹性布局，可以为盒状模型提供最大的灵活性，是布局的首选方案，现已得到所有现代浏览器的支持，此处主要是利用flex容器成员默认按照主轴排列...，注意使用行内块级元素的时候如果编写HTML时换行，这个空白的换行也会作为元素解析从而会产生空白间隙，所以在编写时此处不要换行，此外calc通过与float配合实现也是可行的。...，是用于布局块级盒子的一块渲染区域，并且与这个区域的外部毫无关系，是一个独立的区域，是一个环境，在这里利用BFC区域不会与浮动元素重叠的特性实现三栏布局。...: flex; /* BFC可触发条件之一：弹性元素，display为flex或inline-flex元素的直接子元素。...Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个成员的位置。不同之处在于，Flex布局是轴线布局，只能指定成员针对轴线的位置，可以看作是一维布局。
本文就快速介绍下css样式中经常使用的BFC，主要包括以下几个方面： 1.什么是BFC 2.如何生成BFC 3.BFC的布局规则 4.应用 1.什么是BFC 首先看下什么是Formatting Context...： (1)CSS2.1规范中的一个概念 (2)它是指页面中的一块渲染区域，并拥有一套渲染规则，它决定了其子元素将如何定位，以及与其他元素的关系和相互作用。...2.如何生成BFC CSS2.1规定满足下列CSS声明之一的元素便会生成BFC： 根元素 float的值不为none overflow的值不为visible display的值为inline-block...要想实现自适应的两栏布局也很简单，直接设置父元素的display:flex;即可。 修改样式： .container { ......display: flex; } 右盒子不需要设置overflow:hidden; 效果： flex解决自适应两栏布局.png 可以看出左右盒子都按比例调整了自身的宽度: 200px:300px=2
主要看怎么父元素的盒模型如何设置。...父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取 margin 与 padding 的最大值。...、inline-block 等 HTML 表格相关的属性 ) 5、弹性盒（ display 为 flex 或 inline-flex ） 6、默认值。...内容不会被修剪，会呈现在元素框之外（overflow 不为 visible） 2.5.4 BFC作用（使用场景） 1、自适应两（三）栏布局（避免多列布局由于宽度计算四舍五入而自动换行） 2、避免元素被浮动元素覆盖...3、可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父 div 的 BFC 属性，使下面的子 div 都处在父 div的同一个 BFC 区域之内） 4、去除边距重叠现象，分属于不同的 BFC
1.通过display：flex；justify-content:center; align-items:center;就可以让子元素不定宽高水平垂直居中2.也可以父display：flex；，子设置一个..., flex, inline-flexoverflow不为visible, 【建议使用auto/hidden】根元素如何触发BFC？...display：none 不显示对应的元素，在文档布局中不再分配空间(回流+重绘)visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间(重绘)即是，使用CSS display:...父级div定义zoom设置元素浮动后，该元素的display值是多少？自动变成display:blockmargin和padding分别适合什么场景使用？...如何兼容低版本的IE？响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
面试题回答方式：通过display：flex；justify-content:center; align-items:center;就可以让子元素不定宽高水平垂直居中也可以父display：flex；，...通过给父元素设置display：table-cell; vertical-align：middle text-align：center 给子元素设置vertical-align：middle text-align...就可以让子元素不定宽高水平垂直居中了。文字在垂直和水平方向重叠的两个属性分别是什么？垂直方向：line-height。设置成比字体高度还小就可以让两行重叠水平方向：letter-spacing。...设置为负值即可实现重叠。...布局实际使用时应考虑兼容性 */.container{ display: flex; align-items: center; /* 垂直居中 */ justify-content: center
FC是指页面中一篇渲染区域，渲染区域内使用的格式化上下文的渲染规则，决定了该区域以及其子元素如何定位。当然，使用同的渲染规则，也会对其他元素的起到相互关系的作用。主要有哪些FC？...（完整的说法是：属于同一个BFC的俩个相邻的BOX的margin会发生重叠，与方向无关。）每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此。...FFC什么是FFCFFC(Flex Formatting Contexts)直译为"自适应格式化上下文"，display值为flex或者inline-flex的元素将会生成自适应容器（flex container...FFC有的特性Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。...伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。
BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。 一、BFC是什么？...Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。...不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。...它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...根元素 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
