淘先锋技术网

首页 1 2 3 4 5 6 7

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:列宽