第七天主要是写页面了，巩固的旧知识。

今天主要是学习的定位，定位核心为子绝父相。

标准流可以从上向下摆放块级盒子，从左向右摆放行内盒子；

浮动可以从左向右摆放多个块级盒子，盒子之间没有缝隙并且顶端对齐；

定位可以让盒子：

1 摆放在另一个盒子中的任意位置；

2 固定在屏幕中的某个位置；

3 可以压住其他盒子。

定位的概念是以不同的方式，把盒子定在某一个位置。

定位 = 定位模式 + 边偏移

定位模式：用于指定元素的定位方式，通过 position 属性设置

边偏移：根据定位模式确定最终位置，通过 top、bottom、left、right 四个属性设置

定位一共有五种模式

边偏移有四种属性，标准流或浮动与这四个属性搭配使用无效。

静态定位

静态定位 static 是元素的默认定位方式，表示没有定位的意思，类似于：border 属性的 none；

静态定位按照标准流特性摆放位置，它没有边偏移，使用边偏移没有效果；

静态定位在布局时几乎不用。

相对定位（relative）

语法：  position:relative;

相对定位是相对元素自己原来的位置来定位的（自恋）。

相对定位不会脱标，原有在标准流的位置继续保留，后面的盒子仍然以标准流的方式对待它。

只给盒子设置了 position: relative; 属性，盒子的位置不会发生变化。

因为定位 = 定位模式 + 边偏移，给元素指定成相对定位（定位模式），但没有指定边偏移属性，元素仍然会呆在原有位置。

 绝对定位（absolute）

「绝对定位（absolute）」-没有父级或者父级无定位情况

绝对定位（absolute）是相对什么元素来定位的？

相对最近一级设置了定位属性父级元素定位的（不包含 static）（拼爹型）。

对定位（absolute）的语法是 ：position:absolute;

如果盒子没有父级（是 body 的亲儿子）或者父级没有定位，会相对浏览器定位.

绝对定位（absolute）-父级有定位情况

相对最近一级有定位属性的父级元素定位，如果所有父级都没有定位属性则相对于浏览器定位。

思考 1：在布局时，让盒子相对父级以上的元素定位好吗？

不好，一旦出现问题，不好排查。

可以将父级元素设置为相对定位（relative），因为相对定位的盒子：不会脱标 + 不设置边偏移位置不会变化。

绝对定位脱标的不占有原来位置

问题 1：绝对定位（absolute）的盒子会脱标吗？

会脱标，不在占有原来的位置

问题 2：绝对定位脱标有什么好处？

可以在父盒子内任意摆放位置，同时不会影响父盒子中的其他元素。

思考 1：浮动元素也会脱标，但是能随意摆放位置吗？

浮动元素不能随意摆放位置，会靠左或者靠右一个一个摆放，紧紧的挨在一起，并且顶部对齐。

子绝父相的由来

子级使用绝对定位，父级使用相对定位

父级使用相对定位：

不脱标，在标准流中占据空间

绝对定位的儿子们都参考父亲进行定位

子级使用绝对定位：

脱标，不影响其他元素的摆放

自己则相对父级任意摆放位置

固定定位（fixed）

问题 1：固定定位（fixed）是相对什么来定位的？应用场景是什么？

固定定位（fixed）是相对浏览器的可视窗口来定位的；

可以在浏览器的页面滚动时，元素的位置保持不变。

问题 2：固定定位（fixed）的语法是什么？

position:fixed;

问题 3：固定定位（fixed）的元素会脱标吗？

会；

固定定位的元素同样不会占有原先的位置。

问题 4：在开发时为什么不建议直接控制图片？而是要给图片加一个父盒子？

图片默认是按照实际大小显示的；

页面中的图片通常会很多；

用一个盒子包起来，控制图片更容易。

问题 5：用户调整浏览器的大小时浏览器的可视区域会变化吗？固定定位的元素呢？

会；

固定定位的元素会根据边偏移属性重新调整显示位置。

粘性定位（sticky）（了解）

问题 1：粘性定位（sticky）的特点是什么？

粘性定位（sticky）同样也是相对浏览器的可视窗口来定位的；

粘性定位（sticky）不脱标，会占有原先的位置

问题 2：粘性定位（sticky）的应用场景是什么？

把导航栏固定在屏幕的顶部，始终保持可见

把操作菜单固定在屏幕的左侧或右侧，始终保持可见

问题 3：粘性定位（sticky）的语法是什么？

position:sticky;

问题 4：粘性定位（sticky）有什么注意事项？

必须至少指定一个边偏移的属性；

兼容性不好。

定位的叠放顺序

问题 1：定位的叠放顺序的应用场景是什么？

在使用定位时，如果出现盒子重叠的情况，可以使用 z-index 控制盒子的前后顺序。

问题 2：定位的叠放顺序的语法是什么？

z-index:数值;

问题 3：定位的叠放顺序有什么注意事项？

数值是整数，默认是 auto，数值越大，盒子越靠前；

数值相同，按书写顺序显示，后书写的盒子显示在上方；

数值后面没有单位；

只有定位的盒子在可以使用 z-index 属性。

绝对定位的盒子居中算法

问题 1：绝对定位的盒子可以使用 margin: 0 auto; 实现水平居中吗？

不能

问题 2：绝对定位的盒子实现水平居中的步骤是什么？

left: 50%; 向右移动到父盒子宽度的一半；

margin-left: -宽度的一半; 利用负数向左移动子盒宽度的一半；

top: 50%; 向下移动到父盒子高度的一半；

margin-top: -高度的一半; 利用负数向上移动子盒高度的一半。

定位的特殊特性

问题 1：行内元素添加绝对或固定定位后，可以直接设置宽度和高度吗？

可以

问题 2：块级元素添加绝对或固定定位后，如果不给宽度和高度，大小是怎么计算的？

默认是实际内容的大小

问题 3：脱标的盒子会触发外边距合并吗？

脱标的盒子（浮动、绝对定位、固定定位）不会触发外边距合并。

 浮动元素不会压住标准流的文字定位

问题 1：绝对定位和浮动哪一个会压住下面标准流的文字？为什么？

绝对定位会压住文字，浮动不会；

浮动最开始的设计是为了实现文字环绕效果的

显示属性

display 显示隐藏元素

问题 1：display 属性的作用是什么？有哪两个常用设置项？

display 属性可以设置或检索对象是否及如何显示。

display: none; 隐藏对象

display：block 除了转换为块级元素之外，同时还有显示元素的意思。

问题 2：display：none 有什么特点？

display 隐藏元素后，不再占有原来的位置；

visibility 显示隐藏元素

问题 1：visibility 属性的作用是什么？有哪两个常用设置项？

visibility 属性用于指定一个元素应可见还是隐藏；

visible 元素可见；

hidden 元素隐藏。

问题 2：visibility: hidden 和 display：none 有什么区别？

visibility: hidden 会隐藏元素，但是空间会保留；

display：none 会隐藏元素，同时空间也不会保留（重点）；

overflow 溢出显示隐藏

问题 1：overflow 属性的作用是什么？有几个设置项？

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）的处理方式，包括：

问题 2：大多情况下，我们希望显示溢出的内容吗？有没有例外？

大多情况下，我们不希望让溢出的内容显示出来，因为会影响布局；

例外：如果有定位的盒子超出了边界，则不能使用 overflow:hidden。

*在 Windows 下 scroll 和 auto 有区别，但是在 macOS 下，都会按照 auto 显示

*除了 visible，浏览器在渲染其他三个属性的元素时，都需要先计算出盒子的准确大小和边界。

而一旦有了准确的大小和边界，外边距合并、盒子塌陷、清除浮动等问题也就随之解决了。