【前端面试--CSS】

本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。 场景引入 前端攻城狮们大都或多或少地接触过CSS伪类和伪元素，比如最常见的:fo

「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」 前言 好了，言归正传，xdm准备好了么？ 项目属性 order 取值：默认0，用于决定项目排列顺序，数值越小，项目

前言 Flex布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 行内元素也可以使用 Flex

两栏布局的实现 一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现 利用浮动 原理：将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为2

前言 这是我们很常见的一个应用场景。场景要求左右宽度固定，中间宽度自适应。就是我们常说的圣杯布局。如图: flex布局 float全部float:left) 这种float布局是最难理解的，主要是浮动

BFC是什么 触发条件 一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 下列方式会创建块格式化上下文： 根元素() 浮动元素（元素的 float 不是 none） 绝对定位元素（元

padding-top: 50%是相对什么的50% ? 企业：腾讯 说明 该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看

面试官：谈谈 标准盒子和怪异盒子 公司：腾讯 首先我们的知道盒子模型的分类 说到盒子的分类，在这之前，我们要知道什么是box-sizing，引用W3C网站上的定义 简单来说就是可以通过box-sizi

面试官：不知道宽高的情况下，如何水平垂直居中。 公司：腾讯、字节 display:table-cell 效果： transform:translate(-50%,-50%) 弹性布局flex 效果：