CSS3盒模型+flex

1.盒模型

标准盒模型:

  • w=width+padding+border
  • h=height+padding+border

怪异盒模型(ie盒模型)

  • w=width包含了(padding+border)
  • h=height包含了(padding+border)

2.CSS3弹性盒(重点新版弹性盒)

弹性盒:

  1. 设置为弹性盒后,父元素为容器,子元素为项目
  2. 弹性盒中存在两根轴,默认水平为主轴,垂直为侧轴
  3. 项目默认沿着主轴排列
  4. 浮动,清除浮动,vertical-align都实效

容器属性(给父元素设置,影响子元素):

  1. display:设置为弹性盒;

    flex

    inline-flex

  2. flex-direction:设置主轴方向

    • row 水平主轴
    • row-reverse 反向水平主轴
    • column垂直主轴
    • column-reverse 反向垂直主轴
  3. flex-wrap:是否换行

    • nowrap:不换行,默认值
    • wrap换行
    • wrap-reverse反向换行
  4. 综合写法:flex-flow:主轴方向 是否换行;

  5. justify-content:主轴对齐方式

    • flex-start:起始位置
    • flex-end:结束位置
    • center:居中对齐
    • space-around:两端平分
    • space-between:两端对齐
    • space-evenly:平均分配'
  6. align-items:侧轴对齐方式(单行,没有换行使用)

    • flex-strat:起始位置
    • center 居中
    • flex-end 结束位置
    • baselien 文本底部对齐
  7. align-content:侧轴对齐方式(多行,有换行时使用)

    • flex-start:起始位置
    • flex-end:结束位置
    • center:居中对齐
    • space-around:两端平分
    • space-between:两端对齐
    • space-evenly:平均分配

项目属性(给子元素设置,影响子元素):

  1. align-self:侧轴对齐方式

    • flex-strat:起始位置
    • center 居中
    • flex-end:结束位置
    • stretch 拉伸
    • auto 默认值,跟随父元素的align-items值一致
  2. order :反向排序

    数字越大,越靠后,反之越靠前,可以为负数

  3. flex:缩放大小

    • flex-grow:放大
    • flex-shrink:缩小
    • flex-basis:大小

3.多列

多列布局:

column-count:分列

column-gap:列间距

column-rule:列边框大小 形态 颜色(和边框一样)

column-fill :填充方式

  • balance:尽可能平均分配
  • auto优先填满上一列

column-span:是否跨列

  • none不跨列
  • all 横跨所有列

column-width:列宽

相关推荐
sunbyte3 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | 3dBackgroundBoxes(3D背景盒子组件)
前端·javascript·vue.js·3d·vue
Fantastic_sj2 小时前
CSS-in-JS 动态主题切换与首屏渲染优化
前端·javascript·css
鹦鹉0072 小时前
SpringAOP实现
java·服务器·前端·spring
再学一点就睡6 小时前
手写 Promise 静态方法:从原理到实现
前端·javascript·面试
再学一点就睡6 小时前
前端必会:Promise 全解析,从原理到实战
前端·javascript·面试
前端工作日常7 小时前
我理解的eslint配置
前端·eslint
前端工作日常7 小时前
项目价值判断的核心标准
前端·程序员
90后的晨仔8 小时前
理解 Vue 的列表渲染:从传统 DOM 到响应式世界的演进
前端·vue.js
OEC小胖胖8 小时前
性能优化(一):时间分片(Time Slicing):让你的应用在高负载下“永不卡顿”的秘密
前端·javascript·性能优化·web
烛阴8 小时前
ABS - Rhomb
前端·webgl