Skip to main content

作业布置

完成课堂所有的代码​

web-note/Code/day10 (github.com)

说出为什么需要清除浮动以及如何清除浮动​

📄️ 清除浮动塌陷的方法

  • 由于浮动元素脱离了标准流变成了浮动元素，且不再向父元素汇报高度，所以父元素计算高度时并没有将浮动元素的高度计算进来。而一般父元素的高度是由内容撑开的，不予设置高度。因此就造成了高度塌陷的问题。而解决高度塌陷的问题就叫做清除浮动。

  • 清除浮动的目的是为了让父元素子计算高度的时候把浮动子元素的高度计算进去。

  • 清除浮动的方法

    • 给父元素增加固定高度 但是需要计算不方便

    • 在父元素的最后一个元素下面增加一个空的块级子元素 但是增加了无意义的标签 违反了结构与样式分离的原则

    • 给父元素添加一个伪元素 (推荐)

      .clear_fix::after {
        content: "";
        display: block;
        clear: both;
        visibility: hidden; /* 浏览器兼容性 */
        height: 0; /* 浏览器兼容性 */
      }
      .clear_fix {
        *zoom: 1; /* IE6/7兼容性 */
      }

利用浮动完成如下布局结构（完成结构即可）(选做)​

Details

总结 flex 布局 container 和 item 的属性以及作用（重要）​

  • container

    • flex-direction
      • 决定主轴 (main axis) 的方向 (正方向或者反方向) 有四个值
        • row(默认)
        • column 定义了主轴的方向和块轴排列的方向相同
        • row-reverse 与 row 的方向相反
        • column-reverse 与 column 的方向相反
    • flex-wrap
      • 定义了 flex container 是单行还是多行有如下值
        • nowrap(默认 不换行)
        • wrap(多行排列)
        • wrap-reverse 多行排列从下到上 与正常方向相反 (不常用)
    • flex-flow
      • flex-direction 与 flex-wrap 的缩写
    • align-items
      • 决定了 items 在纵横轴上的排布方式 值如下
        • baseline 与 items 的基线对齐
        • normal 在弹性布局中 效果和 stretch 一样
        • center 居中对齐
        • flex-start 与 cross start 对齐
        • flex-end 与 cross end 对齐
        • stretch 当 items 在 cross axis 的高度 (默认为 auto) 为 auto 时 会自动拉伸至 container 的高度
      • justify-content
        • 决定了 main axis 方向上 flex items 的对齐方式 值如下
      • center 居中对齐
      • flex-start 与 main start 对齐
      • flex-end 与 main end 对齐
      • space-between items 之间的距离相等
      • space-around items 之间的距离相等 items 与 main start 和 main end 之间的距离是 item 与 item 之间距离的一半
      • space-evenly items 之间的距离相等 items 与 main start 和 main end 之间的距离与 item 与 item 之间的距离相等
    • align-content
      • 决定了 items 在 cross axis 上的对齐方式 用法与 justify-content 相似
      • 只是由 main 方向 换成了 cross axis 方向

  • item

    • flex-grow

      • grow 拉伸 可以设置任意非负数字 (默认值是 0)
      • 当 item 的宽度在 main axis 有剩余的 size 时 才会生效
      • 如果所有的 items 都有相同的 flex-grow 系数，那么所有的 items 将剩余空间按相同比例分配，否则将根据不同的 flex-grow 定义的比例进行分配。
      • 扩展后的最终 size 不能超过 max-width/max-height

    • flex-shrink

      • shrink 收缩 可以设置任意非负数字 只有当 item size 的盒超过了 contaienr 的 size 时 才会生效 (默认值为 1)
      • 如果
      • 收缩后的最终 size 不能小于 min-width/min-height

    • flex-basis

      • 用来设置 item 在主轴上的基本的 size
      • item 的优先级从高到低依次为
        • max/min-width/height
        • flex-basis
        • width/height
        • 内容本身的大小
      • 例外
        • 如果 item 内文字过长 会拉伸 (没有设置 width 时无论实际宽度是否超出 flex-basis 的值)

    • align-self

      • 通过给某个 flex item 设置 align-self，会对齐当前 grid 或 flex 行中的元素，并会覆盖 align-items 的设置。

    • order

      • 默认值是 0 可以是任意整数 值越小排在前面

    • flex

      • flex-grow flex-shrink flex-basis 的组合
      • flex = none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
      • 可以使用一个，两个或三个值来指定 flex属性。
      • 一个值时
        • 数字 被当成 flex-grow
        • 有效的宽度 被当成 flex-basis
        • auto: 1 1 auto
        • none: 0 0 auto
      • 两个值时
        • 第一个值必须为无单位数 被当成 flex-grow
        • 第二个值为无单位值时 被当成 flex-shrink 有单位时 是 flex-basis
      • 三个值时 前两个为无单位值 最后一个为有单位宽度值 依次为 flex-grow flex-shrink flex-basis

自己找 3 个案例练习​

  • 案例一：其中用到元素定位
  • 案例二：其中用到浮动布局
  • 案例三：其中用到 flex 布局
Details