前端css

在前端中我们主要使用以下方法来实现水平垂直居中 1.单行文本 line-height + text-align .box { width: 400px; height: 200px; line-height: 200px; /* 控制行高（行间距） */ text-align: center; /* 控制文本水平对齐方式 */ }  2.多行文本或盒子 2.1 flex 弹性布局 .container { display: flex; /* 启用 Flex 布局 */ justify-content: center; /* 主轴（默认横向）居中 */ align-items: center; ...

BFC，全称为Block Formatting Context（块级格式化上下文），是Web页面中的一个独立渲染区域，让处于BFC内部的元素与外部的元素相互隔离，确保内部元素的布局不会被外部元素影响。 1.触发BFC的条件 要创建一个BFC，你可以使用以下任一CSS属性： 1.overflow 不为 visible 2.float 属性不为 none 3.display 为 inline-block、flex、inline-flex、table-cell、grid、flow-root 或 table-caption 4.position 为 absolute 或 fixed 2.BFC的布局规...

flex:1 flex 是 flex-grow, flex-shrink, flex-basis. 三个属性的简写，默认值为 0 1 auto。该属性有两个快捷值：auto(1 1 auto) 和 none(0 0 auto)。建议优先写 flex 属性，而不是写三个分离的属性，因为浏览器会自动计算其相关值。 flex-grow 默认为0， 只能是正整数。即父元素有剩余空间也不放大元素。如果为 1，则把剩余空间的一份加给自己的宽度。 flex-shrink 默认为1，只能是正整数。即父元素空间不足则按比例收缩。如果为 0，则不收缩。 flex-basis 默认为 auto, 即元素本身的大小。...