百度前端技术学院--零基础--第七天到第八天：学习布局

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

课程目标
通过大量练习，来学习布局的各种方式
阅读

• MDN定位
• MDN定位实战
• MDN Flexbox
• 学习CSS布局
• CSS布局(三) 布局模型
• CSS布局(四) Float
• CSS布局(五) 网页布局方式
• CSS布局(六) 对齐方式
• 七种实现左侧固定，右侧自适应两栏布局的方法
• 圣杯布局
• 双飞翼布局
• 圣杯布局和双飞翼布局
• CSS深入理解流体特性和BFC特性下多栏自适应布局
• 三种三栏网页宽度自适应布局方法

阅读笔记
1.静态定位
静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 。

 position: static;

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

position: relative;

3.介绍 top, bottom, left, right
top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。 要尝试这样做，请在CSS中的 .positioned 规则中添加以下声明：

top: 30px;
left: 30px;

• top样式属性定义了定位元素的上外边距边界与其包含块上边界之间的偏移，非定位元素设置此属性无效。
• bottom样式属性定义了定位元素下外边距边界与其包含块下边界之间的偏移，非定位元素设置此属性无效。
• left属性定义了定位元素的左外边距边界与其包含块左边界之间的偏移，非定位元素设置此属性无效。
• right样式属性定义了定位元素的右外边距边界与其包含块右边界之间的偏移，非定位元素设置此属性无效。
• 相对定位工作的方式——你需要考虑一个看不见的力，推动定位的盒子的一侧，移动它的相反方向。 所以例如，如果你指定 top: 30px;一个力推动框的顶部，使它向下移动30px。

4.绝对定位
绝对定位带来了非常不同的结果。让我们尝试改变代码中的位置声明如下：

position: absolute;

绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……
第二，注意元素的位置已经改变——这是因为top，bottom，left和right以不同的方式在绝对定位。 它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。 所以在这种情况下，我们说的绝对定位元素应该位于从“包含元素”的顶部30px，从左边30px。

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

6.position: sticky
还有一个可用的位置值称为 position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起1​​0像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。

7.列表消息盒子
我们研究的第一个例子是一个经典的选项卡消息框，如下图效果所示：

这样我们已经得到了一个<section>元素带有类（class）为 info-box。此元素又包含一个 <ul> 和一个 <div>。无序列表包含三个列表项，列表项有链接在内，实际上将成为用于点击后显示内容面板的选项卡。 div 包含三个<article> 元素，构成对应于每个选项卡的内容面板。 每个面板包含一些示例内容。

8.指定元素的布局为 flexible
首先，我们需要选择将哪些元素将设置为柔性的盒子。我们需要给这些 flexible 元素的父元素 display 设置一个特定值。在本例中，我们想要设置 <article> 元素，因此我们给 <section>（变成了 flex 容器）设置 display：

section {
  display:flex
}

8.flex 模型说明
当元素表现为 flex 框时，它们沿着两个轴来布局：

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

9.列还是行?
弹性盒子提供了 flex-direction 这样一个属性，它可以指定主轴的方向（弹性盒子子类放置的地方）— 它默认值是 row，这使得它们在按你浏览器的默认语言方向排成一排。

尝试将以下声明添加到 section 元素的 css 规则里：

flex-direction: column;

取值：

• row
  flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。
• row-reverse
  表现和row相同，但是置换了主轴起点和主轴终点
• column flex
  容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
• column-reverse
  表现和column相同，但是置换了主轴起点和主轴终点

10.换行
当你在布局中使用定宽或者定高的时候，可能会出现问题即处于容器中的 弹性盒子子元素会溢出，破坏了布局。

11.flex-flow 缩写
到这里，应当注意到存在着 flex-direction 和 flex-wrap — 的缩写 flex-flow。比如，你可以将

flex-direction: row;
flex-wrap: wrap;

替换为

flex-flow: row wrap;

12.flex 项的动态尺寸
看看是如何控制 flex 项占用空间的比例的。
将以下规则添加到 CSS 的底部：

article {
  flex: 1;
}

这是一个无单位的比例值，表示每个 flex 项沿主轴的可用空间大小。本例中，我们设置 <article> 元素的 flex 值为 1，这表示每个元素占用空间都是相等的，占用的空间是在设置 padding 和 margin 之后剩余的空间。因为它是一个比例，这意味着将每个 flex 项的设置为 400000 的效果和 1 的时候是完全一样的。

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

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

14.水平和垂直对齐
align-items 控制 flex 项在交叉轴上的位置。

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

15.flex 项排序
弹性盒子也有可以改变 flex 项的布局位置的功能，而不会影响到源顺序（即 dom 树里元素的顺序）。这也是传统布局方式很难做到的一点。

代码也很简单，将下面的 CSS 添加到示例代码下面。

button:first-child {
  order: 1;
}

刷下面我们谈下它实现的一些细节：

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

你也可以给 order 设置负值使它们比值为 0 的元素排得更前面。比如，你可以设置 “Blush” 按钮排在主轴的最前面：

button:last-child {
  order: -1;
}

16.flex 嵌套
弹性盒子也能创建一些颇为复杂的布局。设置一个元素为flex项目，那么他同样成为一个 flex 容器，它的孩子(直接子节点)也表现为 flexible box 。

17.CSS布局
display属性：
display 是CSS中最重要的用于控制布局的属性。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
（1）block
div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。
（2）inline
span 是一个标准的行内元素。一个行内元素可以在段落中 <span> 像这样 </span> 包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素，它可以被用作链接。
（3）none
另一个常用的display值是 none 。一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。

它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。
（4）其他 display 值
还有很多的更有意思的 display 值，例如 list-item 和 table 。

18.margin: auto;

#main {
  width: 600px;
  margin: 0 auto; 
}

设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

19.max-width

#main {
  max-width: 600px;
  margin: 0 auto; 
}

在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。

20.盒模型
在我们讨论宽度的时候，我们应该讲下与它相关的另外一个重点知识：盒模型。当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素。

21.box-sizing
人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。

22.clear
clear 属性被用于控制浮动。
使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。

23.清除浮动（clearfix hack）
在使用浮动的时候经常会遇到一个古怪的事情：
这个图片比包含它的元素还高， 而且它是浮动的，于是它就溢出到了容器外面！
有一种比较丑陋的方法可以解决这个问题，它叫做清除浮动（clearfix hack）.

让我们加入一些新的CSS样式：

.clearfix {
  overflow: auto;
}

这个可以在现代浏览器上工作。如果你想要支持IE6，你就需要再加入如下样式：

.clearfix {
  overflow: auto;
  zoom: 1;
}

24.网页布局方式
（1）一列布局：

一般都是固定的宽高，设置margin : 0 auto来水平居中，用于界面显著标题的展示等；

（2）两列布局：

最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，需要及时清除浮动。

设置左左浮动，或设置左右浮动（这是需要确定父级元素的宽度）

如果父级元素没有设置高度，则需要设置overflow:hidden来清除浮动产生的影响

对于自己相邻元素清除浮动产生的影响用：clear：both;

（3）三列布局：

两侧定宽中间自适应

首先设置父级元素的宽度，可以左左右设置浮动。然后中间设置margin调整间距。 也可以都设置成左浮动，设置margin，调整间距。同样注意清除浮动的影响！
或着为父级元素设置relative属性，再为子元素设置absolute属性，再分别定位，调间距。

（4）混合布局：

在一列布局的基础上，保留top和foot部分，将中间的main部分改造成两列或三列布局，小的模块可以再逐级同理划分。

（5）扩展（如等分布局等）

25.CSS布局 对齐方式
水平居中：

(1). 行内元素的水平居中？
如果被设置元素为文本、图片等行内元素时，在父元素中设置text-align:center实现行内元素水平居中，将子元素的display设置为inline-block，使子元素变成行内元素

(2）块状元素的水平居中（定宽）
当被设置元素为定宽块级元素时用 text-align：center 就不起作用了。可以通过设置“左右margin”值为“auto”来实现居中的。

(3)块状元素的水平居中（不定定宽）

在实际工作中我们会遇到需要为“不定宽度的块级元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。

可以直接给不定宽的块级元素设置text-align：center来实现，也可以给父元素加text-align:center 来实现居中效果。

当不定宽块级元素的宽度不要占一行时，可以设置display 为 inline 类型或inline-block（设置为 行内元素 显示或行内块元素）

垂直居中：

和水平居中一样，这里要讲垂直居中，首先设定两个条件即父元素是盒子容器且高度已经设定

场景1：子元素是行内元素，高度是由其内容撑开的
这种情况下，需要通过设定父元素的line-height为其高度来使得子元素垂直居中

场景2：子元素是块级元素但是子元素高度没有设定，在这种情况下实际上是不知道子元素的高度的，无法通过计算得到padding或margin来调整，但是还是存在一些解法。

通过给父元素设定display:table-cell;vertical-align:middle来解决

场景3：子元素是块级元素且高度已经设定

计算子元素的margin-top或margin-bottom，计算方法为父(元素高度-子元素高度)/2

水平垂直居中：

（1）水平对齐+行高

text-align + line-height实现单行文本水平垂直居中

（2）水平+垂直对齐

• text-align +vertical-align　　在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素

• 若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0， text-align: center;。子元素本身设置vertical-align:middle

• 相对+绝对定位， 父元素相对定位relative,子元素使用absolute，利用绝对定位元素的盒模型特性，在偏移属性（top/right/bottom/left）为确定值的基础上，设置margin:auto

26.双飞翼布局介绍-始于淘宝UED
仔细分析各种布局的技术实现，可以发现下面三种技术被经常使用：

浮动 float

负边距 negative margin

相对定位 relative position

这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案。