flex-grow 第一步：计算剩余空间 flex-grow的和大于1时：剩余空间 = 父容器宽度 - 子元素总宽度 flex-grow的和小于1时：剩余空间 = ( 父容器宽度 - 子元素总宽度 ) * ( flex-grow的和 / 1) 第二步：计算各子元素分配到的空间 总权重：flex-grow的和 各个权重：格子flex-grow的值 分配的空间：剩余空间 * ( 各个权重 / 总权重) 第三步：计算扩张后的总空间 项目宽度 + 分配空间 举例说明 基本结构 <div class="parent"> <div class="child one"></div> <div class="child two"></div> <div class="child three"></div> </div> flex-group和大于1的情况 .parent{ display: flex; width: 500px; height: 100px; background-color: #000;..... 有更新！ CSS Flex布局中flex-grow和flex-shrink计算规则 CSS
BFC 什么是BFC BFC是个简称，英文名是Block Formatting Content，中文名是 暴风城 块级格式上下文，他还有3个兄弟姐妹分别是IFC，FFC，GFC BFC是个概念，一个特定的环境，决定了元素如何定位，如何布局，规定了内部元素的行为和对外部元素的表现 哪里有/如何触发 根元素 <html> 浮动元素：float: left; / float: right; 绝对定位元素：position: absolute; / position: fixed; 行内块元素：display: inline-block; 弹性元素：display: flex; / display: inline-flex; 网格元素：display: grid; / display: inline-grid; 表格 表格单元格：display: table-cell; 表格标题：display: table-caption; 匿名表格单元格元素： display: table; html table的默认值 display: table-row; html row的默认值 d...... BFC小讲 CSS
原理 CSS transition只适用于明确的值，auto这种无法实现过度 CSS var()函数可以代替元素中任何属性中的值的任何部分 答案 HTML部分 <div class="trigger"> Hover me to see a height transition. <div class="el">content</div> </div> CSS部分 .el { transition: max-height 0.5s; overflow: hidden; max-height: 0; } .trigger:hover > .el { max-height: var(--max-height); } JavaScript部分 var el = document.querySelector('.el') var height = el.scrollHeight el.style.setProperty('--max-height', height + 'px') 元素高度不确定时实现height从0到auto动画 CSS
Herman 的个人博客