字节跳动最喜欢的前端面试问题:CSS基础

动画、过渡、变换和翻译的属性应予以澄清:

水平居中:

严格地说

BFC是块级格式上下文，而IFC是内联格式上下文:

不会，因为BFC在页面中是一个独立的隔离容器，它的内部元素不会和外部元素交互，比如两个DIV，上面的DIV设置了一个float，所以如果下面的元素不是BFC，上面的元素没有设置float，内容就会被换行。如果下部元素设置为overflow:hidden；；属性，可以实现经典的两列布局，左边的内容宽度固定，右边的是自适应的，因为是BFC。

框大小属性可用于调整这些行为:

BFC(Block Formatting Context)格式化上下文(Formatting Context)是网页中框模型布局的一种CSS渲染模式，指的是一个独立的渲染区域或一个孤立的独立容器。

五种:

BFC的特色:

CSS盒子模型本质上是一个封装了周围HTML元素的盒子。它包括四个属性:边距、边框、填充和实际内容。CSS盒子模型:标准模型+IE模型

标准框模型:宽度=内容)+边框+填充。

低配版IE框模型:宽度=内容宽度(内容+边框+填充)，如何设置为IE框模型；

静态:没有特殊的定位，对象遵循正常的文档流程。顶部、右侧、底部、左侧和其他属性将不会被应用。Relative:对象遵循正常的文档流，但会根据上、右、下、左等属性在正常的文档流中移位。它的级联由z-index属性定义。Absolute:对象从正常的文档流中分离出来，利用上、右、下、左等属性进行绝对定位。它的级联由z-index属性定义。固定:对象从正常的文档流中分离出来，通过使用上、右、下、左等属性，以窗口为参考点进行定位。当滚动条出现时，对象不会随之滚动。它的级联由z-index属性定义。粘性:具体来说，类似于相对和固定。在视口滚动到阈值之前应用“相对”,在滚动到阈值之后应用“固定布局”,这由“顶部”决定。

问:为什么会出现这种情况？能解释一下吗？

它是由块级格式的上下文决定的。BFC，元素会在BFC上下排列，然后垂直距离由边距决定，它们会重叠。具体来说，同正取最大，同负取绝对值最大，一正一负相加。

BFC是页面中一个独立的隔离容器，内部子元素不会影响外部元素。

不清楚浮动时会不会发生高度折叠:浮动元素的父元素的高度是自适应的(父元素不写高度时，子元素写浮动时父元素会折叠)。

了解更多，加入我们的前端学习圈