第七天到第八天：学习布局-IFE

第七天到第八天：学习布局

日期	总用时	学习目标
2018.08.04,2018.08.05	8h	学习布局

学习目标

• 实现一个两栏布局，左侧占30%宽度，右侧占70%宽度
• 实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化
• 实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化
• 实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化
• 实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化

学习内容

• 第七天到第八天：学习布局
• MDN 定位
• MDN Flexbox

学习笔记

定位（position）

定位的整个想法是允许我们覆盖上面描述的基本文档流行为，以产生有趣的效果。如果你想稍微改变布局中一些盒子的位置，使它们的默认布局流程位置稍微有点古怪，不舒服的感觉呢？定位是你的工具。或者，如果您想要创建一个浮动在页面其他部分顶部的UI元素，并且/或者始终停留在浏览器窗口内的相同位置，无论页面滚动多少？定位使这种布局工作成为可能。

• 静态定位

  静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。

  .positioned {
   position: static;
   background: yellow;
  }

• 相对定位

  相对定位是我们将要看的第一个位置类型。 它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。 让我们继续并更新代码中的 position 属性

  .positioned {
   position: relative;
   background: yellow;
   top: 30px;
   left: 30px;
  }

• 绝对定位

  .positioned {
   position: absolute;
   background: yellow;
   top: 30px;
   left: 30px;
  }

  首先，请注意，定位的元素应该在文档流中的间隙不再存在——第一和第三元素已经关闭在一起，就像它不再存在！好吧，在某种程度上，这是真的。绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……

  第二，注意元素的位置已经改变——这是因为top，bottom，left和right以不同的方式在绝对定位。 它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。 所以在这种情况下，我们说的绝对定位元素应该位于从“包含元素”的顶部30px，从左边30px

  介绍 z-index

  网页也有一个z轴：一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。z-index 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。定位的元素胜过未定位的元素，会显示在顶部

  z-index: 1;

• 固定定位

  这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。无视滚动条。

  h1{
   position: fixed;
   top: 0;
   width: 500px;
   margin: 0 auto;
   background: white;
   padding: 10px;
   }

• sticky

  这基本上是相对位置和固定位置之间的混合，其允许定位的元件像它被相对定位一样动作，直到其滚动到某一阈值点（例如，从视口顶部10像素），之后它变得固定。阅读我们的position:sticky 引用入口 查看详情和例子。

弹性盒子（Flexbox）

以下简单的布局要求是难以或不可能用这样的工具（ floats 和 positioning）方便且灵活的实现的：

• 在父内容里面垂直居中一个块内容。
• 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
• 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

flex 模型说明

• 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
• 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
• 设置了 display: flex 的父元素（在本例中是
  ）被称之为 flex 容器（flex container）。
• 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）（本例中是
  元素。

flex 语法

• 声明flex display:flex
• 指定flex方向 flex-direction: row

• 处理flex溢出 flex-wrap: wrap

  section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  article {
    flex: 200px;
  }

• flex: 缩写与全写

flex 是一个可以指定最多三个不同值的缩写属性：

- 第一个就是上面所讨论过的无单位比例。可以单独指定全写 flex-grow 属性的值。
- 第二个无单位比例 — flex-shrink — 一般用于溢出容器的 flex 项。这指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器。 这是一个相当高级的弹性盒子功能，我们不会在本文中进一步说明。
- 第三个是上面讨论的最小值。可以单独指定全写 flex-basis 属性的值。

• 水平和垂直对齐

  • align-items 控制 flex 项在交叉轴上的位置。

    • 默认的值是 stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。我们的第一个例子在默认情况下得到相等的高度的列的原因。
    • 在上面规则中我们使用的 center 值会使这些项保持其原有的高度，但是会在交叉轴居中。这就是那些按钮垂直居中的原因。
    • 你也可以设置诸如 flex-start 或 flex-end 这样使 flex 项在交叉轴的开始或结束处对齐所有的值。查看 align-items 了解更多。

  • justify-content 控制 flex 项在主轴上的位置

    • 默认值是 flex-start，这会使所有 flex 项都位于主轴的开始处。
    • 你也可以用 flex-end 来让 flex 项到结尾处。
    • center 在 justify-content 里也是可用的，可以让 flex 项在主轴居中。
    • 而我们上面用到的值 space-around 是很有用的——它会使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间。
    • 还有一个值是 space-between，它和 space-around 非常相似，只是它不会在两端留下任何空间

flex项排序

button:first-child {
  order: 1;
}

• 所有 flex 项默认的 order 值是 0。
• order 值大的 flex 项比 order 值小的在显示顺序中更靠后。
• 相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素，其 order 值分别是2，1，1和0，那么它们的显示顺序就分别是第四，第二，第三，和第一。
• 第三个元素显示在第二个后面是因为它们的 order 值一样，且第三个元素在源顺序中排在第二个后面。

学习布局

作业

基于Float

• 实现一个两栏布局，左侧占30%宽度，右侧占70%宽度
• 实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化
• 实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化
• 实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化
• 实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化

基于Position

• 实现一个两栏布局，左侧占30%宽度，右侧占70%宽度
• 实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化
• 实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化
• 实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化
• 实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化

基于Flexbox

• 实现一个两栏布局，左侧占30%宽度，右侧占70%宽度
• 实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化
• 实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化
• 实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化
• 实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化

基于设计稿

设计稿描述：

• 设计稿分为头部，中间的Banner，主导航，内容区域，底部

头部区域为100%宽的一个深色背景，头部中间有一块960px的定宽居中区域，里面包括了左边的Logo和右上角导航

• Banner为100%宽的区块，中间右下方有banner轮显的当前图片数字的示例，其中正在显示的图片对应的数字有特殊样式（注意不需要实现轮显banner的业务逻辑，只是按照设计稿做静态样式）
• 主导航区域，有一个100%宽的灰色线条，线条之上，在中间960px区域是导航菜单，当前正在浏览页对应的菜单有特殊样式
• 主要内容区域，宽度为960px，里面每个内容都有至少80px的padding，每一个内容的宽度均为自适应，可以使用flex布局实现页面

设计稿实现

疑问

• 定位上下文
• 设计稿中nav和banner_num bug

待深入的知识

• CSS布局(三) 布局模型
• 七种实现左侧固定，右侧自适应两栏布局的方法
• 圣杯布局
• 双飞翼布局
• 圣杯布局和双飞翼布局
• CSS深入理解流体特性和BFC特性下多栏自适应布局
• 三种三栏网页宽度自适应布局方法
• 网格
• 定位实战练习
• 媒体查询
• MDN媒体查询

Flag

系统的学习前端，坚持66天