CSS基础

1. 定位核心 —— 子绝父相

1.1 定位导读

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

1.2 为什么需要定位

定位就是解决标准流和浮动无法实现的效果。

标准流可以从上向下摆放块级盒子，从左向右摆放行内盒子；
浮动可以从左向右摆放多个块级盒子，盒子之间没有缝隙并且顶端对齐；
定位可以让盒子：
1. 摆放在另一个盒子中的任意位置；
2. 固定在屏幕中的某个位置；
3. 可以压住其他盒子。

1.3 定位组成

定位的概念是什么？

将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位由哪两部分属性构成？各自的作用是什么？

定位 = 定位模式 + 边偏移。

定位模式：用于指定元素的定位方式，通过 position 属性设置
边偏移：根据定位模式确定最终位置，通过 top、bottom、left、right 四个属性设置

定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个：

序号	值	语义
1	static	静态定位
2	relative	相对定位
3	absolute	绝对定位
4	fixed	固定定位
5	sticky	粘性定位

边偏移有几个属性？标准流或浮动能够使用这四个属性吗？

边偏移属性	示例	描述
`top`	`top: 80px`	顶端偏移量，定义元素相对于其父元素上边线的距离
`bottom`	`bottom: 80px`	底部偏移量，定义元素相对于其父元素下边线的距离
`left`	`left: 80px`	左侧偏移量，定义元素相对于其父元素左边线的距离
`right`	`right: 80px`	右侧偏移量，定义元素相对于其父元素右边线的距离

标准流或浮动与这四个属性搭配使用无效。

1.4 静态定位 static（了解）

静态定位是元素的默认定位方式，无定位的意思。

语法：选择器 { position: static; }

静态定位按照标准流特性摆放位置，它没有边偏移
静态定位在布局时很少用到

1.5 相对定位 relative（重要）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。

语法：选择器 { position: relative; }

相对定位的特点：（务必记住）

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

.relative {
            background-color: pink;
            position: relative;
            top: 50px;
            left: 50px;
        }

1.6 绝对定位 absolute（重要）

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

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

绝对定位（`absolute`）的语法是什么？

选择器 { position: absolute; }

绝对定位的特点：（务必记住）

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
绝对定位不再占有原先的位置。（脱标）

所以绝对定位是脱离标准流的。

.son {
            width: 100px;
            height: 100px;
            background-color: rgb(255, 238, 0);
            position: absolute;
            top: 100px;
            left: 100px;
        }

1.7 子绝父相的由来

弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。

对定位的话，父级要用相对定位。

子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
父盒子需要加定位限制子盒子在父盒子内显示。
父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结：

因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

绝对定位（`absolute`）的盒子会脱标吗？

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

绝对定位脱标有什么好处？

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3. 绝对定位脱标的不占有原来位置」.heml</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: aqua;
        }
        .box-c {
            position: absolute;
            right: 15px;
            bottom: 15px;
            width: 100px;
            height: 100px;
            background-color: blanchedalmond;
            border: 2px solid rgb(248, 244, 27);
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-c"></div>
    </div>
</body>
</html>

2. 定位方式 —— 固定和粘性

2.1 固定定位（fixed）

固定定位（`fixed`）是相对什么来定位的？应用场景是什么？

固定定位（fixed）是相对浏览器的可视窗口来定位的；
可以在浏览器的页面滚动时，元素的位置保持不变。

固定定位（`fixed`）的语法是什么？

语法:选择器 { position: fixed; }

固定定位的特点：（务必记住）

以浏览器的可视窗口为参照点移动元素。

跟父元素没有任何关系
不随滚动条滚动。

固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

固定定位（`fixed`）的元素会脱标吗？

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

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

图片默认是按照实际大小显示的；
页面中的图片通常会很多；
用一个盒子包起来，控制图片更容易。

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

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

2.2 固定定位小技巧-固定到版心右侧

固定到版心右侧的实现步骤是什么？

left: 50%;；
margin-left: 版心宽度的一半。小算法：
让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置。
让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

2.3 粘性定位（sticky）（了解）

粘性定位（`sticky`）的特点是什么？

粘性定位（sticky）同样也是相对浏览器的可视窗口来定位的；
粘性定位（sticky）不脱标，会占有原先的位置

粘性定位（`sticky`）的应用场景是什么？

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

粘性定位（`sticky`）的语法是什么？

   position: sticky;

粘性定位（`sticky`）有什么注意事项？

必须至少指定一个边偏移的属性；
兼容性不好。

2.4 定位总结

序号	值	语义	脱标	移动位置	常用	场景
1	static	静态定位	否	不移动	几乎不用	不定位
2	relative ☆	相对定位	否	相对自身	常用	子绝父相
3	absolute ☆	绝对定位	是	带定位的父级	常用	子绝父相
4	fixed ☆	固定定位	是	浏览器可视区	常用	浏览器可视区
5	sticky	粘性定位	否	浏览器可视区	不常用	浏览器可视区

3. 定位扩展

3.1 定位的叠放顺序

在使用定位时，如果出现盒子重叠的情况，可以使用 z-index 控制盒子的前后顺序。定位的叠放顺序的应用场景是什么？

定位的叠放顺序的语法是什么？

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

定位的叠放顺序有什么注意事项？

数值是整数，默认是 auto，数值越大，盒子越靠前；
数值相同，按书写顺序显示，后书写的盒子显示在上方；
数值后面没有单位；
只有定位的盒子在可以使用 z-index 属性。

3.2 绝对定位的盒子居中算法

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

不能

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

left: 50%; 向右移动到父盒子宽度的一半；
margin-left: -宽度的一半; 利用负数向左移动子盒宽度的一半；
top: 50%; 向下移动到父盒子高度的一半；
margin-top: -高度的一半; 利用负数向上移动子盒高度的一半。注意：

绝对定位之后，不仅会脱标，而且有层次 —— 没有相邻的盒子；
此时与边偏移属性联用，修改 margin 可以参照盒子的外边框位置继续调整盒子的位置。

3.3 定位的特殊特性

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

可以

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

默认是实际内容的大小

脱标的盒子会触发外边距合并吗？

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

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

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

绝对定位会压住文字，浮动不会；
浮动最开始的设计是为了实现文字环绕效果的。

4. 网页布局总结

淘宝焦点图:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝焦点图案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tb-slider {
            position: relative;
            margin: 100px auto;
            width: 520px;
            height: 280px;
            background-color: blueviolet;
        }

        .tb-slider img {
            width: 100%;
            height: 100%;
        }

        .tb-slider a {
            background-color: rgba(0, 0, 0, 0.3);
            text-align: center;
            line-height: 28px;
            color: #fff;
            text-decoration: none;
        }

        .tb-slider .prev {
            position: absolute;
            width: 20px;
            height: 30px;
            left: 0;
            top: 50%;
            margin-top: -15px;
            border-radius: 0 15px 15px 0;
        }

        .tb-slider .next {
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 30px;
            border-radius: 15px 0 0 15px;
        }

        .tb-slider .indicator {
            position: absolute;
            bottom: 15px;
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 7px;
        }

        .tb-slider .indicator li {
            float: left;
            width: 8px;
            height: 8px;
            margin: 3px;
            list-style: none;
            background-color: #fff;
            border-radius: 50%;
        }
        .tb-slider .indicator li:hover {
            background-color: #ff5000;
        }
    </style>
</head>

<body>
    <div class="tb-slider">
        <img src="./images/tb.jpg" alt="">
        <a href="#" class="prev">&lt;</a>
        <a href="#" class="next">&gt;</a>
        <ul class="indicator">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

一个完整的网页，是由标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

标准流
- 块级元素上下排列 / 行内元素或行内块元素左右排列；
- 垂直的块级盒子显示就用标准流布局。
浮动
- 让多个块级元素一行显示或者左右对齐盒子；
- 多个块级盒子水平显示就用浮动布局。
定位
- 定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示；
- 如果元素自由在某个盒子内摆放就用定位布局。

5. 显示属性

5.1 display 显示隐藏元素

`display` 属性的作用是什么？有哪两个常用设置项？

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

display: none; 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。

`display：none` 有什么特点？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9. display 显示隐藏元素</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
        }
        .box-1 {
            display: none;
            width: 200px;
            height: 200px;
            background-color: rgb(255, 187, 0);
        }
    </style>
</head>
<body>
    <div class="box">display 显示元素</div>
    <div class="box-1">display 隐藏元素</div>
</body>
</html>

5.2 visibility 显示隐藏元素

`visibility` 属性的作用是什么？有哪两个常用设置项？

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

visible 元素可见；
hidden 元素隐藏。

`visibility: hidden` 和 `display：none` 有什么区别？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9. display 显示隐藏元素</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
        }
        .box-1 {
            visibility: hidden;
            width: 200px;
            height: 200px;
            background-color: rgb(255, 187, 0);
        }
    </style>
</head>
<body>
    <div class="box">visibility 显示元素</div>
    <div class="box-1">visibility 隐藏元素</div>
</body>
</html>

5.3 overflow 溢出显示隐藏

`overflow` 属性的作用是什么？有几个设置项？

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

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

大多情况下，我们希望显示溢出的内容吗？为什么？有没有例外？

大多情况下，我们不希望让溢出的内容显示出来，因为会影响布局；
例外：如果有定位的盒子超出了边界，则不能使用 overflow:hidden。
在 Windows 下 scroll 和 auto 有区别，但是在 macOS 下，都会按照 auto 显示。
除了 visible，浏览器在渲染其他三个属性的元素时，都需要先计算出盒子的准确大小和边界。
而一旦有了准确的大小和边界，外边距合并、盒子塌陷、清除浮动等问题也就随之解决了。

5.4 土豆案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12. 土豆案例</title>
    <style>
        .tudou {
            position: relative;
            width: 440px;
            height: 320px;
            background-color: #ccc;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4) url(images/arr.png) no-repeat center;
        }

        .tudou:hover .mask {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="./images/tudou.jpg" alt="">
    </div>
</body>

</html>

CSS基础（定位,定位方式,定位扩展,显示属性）