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

最新推荐文章于 2024-09-05 23:31:31 发布

weixin_33786077

最新推荐文章于 2024-09-05 23:31:31 发布

阅读量143

点赞数

文章标签： ui 前端 ViewUI

原文链接：https://segmentfault.com/a/1190000015890558

版权

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

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

学习目标

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

学习内容

学习笔记

定位（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;
```
固定定位

这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。这意味着您可以创建固定的有用的UI项目，如持久导航菜单。无视滚动条。
```
h1{
 position: fixed;
 top: 0;
 width: 500px;
 margin: 0 auto;
 background: white;
 padding: 10px;
 }
```
sticky
这基本上是相对位置和固定位置之间的混合，其允许定位的元件像它被相对定位一样动作，直到其滚动到某一阈值点（例如，从视口顶部10像素），之后它变得固定。阅读我们的position:sticky 引用入口查看详情和例子。

弹性盒子（Flexbox）

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

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

flex 模型说明

Flex

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

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

基于Position

基于Flexbox

基于设计稿

图片描述
设计稿描述：

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

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

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

设计稿实现

疑问

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

待深入的知识

Flag

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

weixin_33786077

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第七天到第八天：学习布局-IFE

第七天到第八天：学习布局日期总用时学习目标2018.08.04,2018.08.058h学习布局学习目标实现一个两栏布局，左侧占30%宽度，右侧占70%宽度实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化实现一个三栏布局，左...
复制链接

扫一扫