web课堂笔记

一.使用border-radius方法制作圆
border-radius:50%;圆
border-top/bottom-left/right-radius:xxpx;圆延申的其他图形
二.flex弹性布局

三.Flex 实现等宽布局核心知识点总结
1、核心实现代码逻辑
父容器开启弹性布局：display: flex
子元素平分宽度关键属性：flex: 1
2、flex: 1 拆解
等价于 flex-grow:1; flex-shrink:1; flex-basis:0%
flex-basis: 0%：以 0 宽度为基准分配空间，严格等分，不受内容长度干扰
flex-grow: 1：均分父容器剩余宽度
flex-shrink: 1：空间不足时同步压缩
3、配套常用属性
子项间距：父容器 gap，替代 margin，简化间隙处理
自动换行多列等分：父容器加 flex-wrap: wrap，子项 flex:1 1 calc(100%/N - 间隙) 实现每行 N 列等宽
内容超长撑破等宽：子项添加 min-width: 0
限制最小宽度：子项设置 min-width: 固定值
4、两种等宽场景区分
单行等分（不换行）：仅父display:flex + 子flex:1
多行固定列等分（自动换行）：父flex-wrap:wrap + 子弹性宽度计算