0基础学前端-----CSS DAY11

视频参考：B站Pink老师
今天是CSS学习的第十一天，今天开始的笔记对应Pink老师课程中的CSS第六天的内容。
本节重点：CSS定位

本章目录

0基础学前端-----CSS DAY11
- 本节目标
- 1. 定位
- - 1.1 为什么需要定位
  - 1.2 定位组成
  - 1.3 静态定位（了解）
  - 1.4 相对定位relative(重要)
  - 1.5 绝对定位absolute(重要)
  - 1.6 子绝父相的由来
  - 1.7 固定定位fixed(重要)
  - 1.8 粘性定位sticky（了解）
  - 1.9 定位的总结
  - 1.10 定位叠放次序z-index
  - 1.11 定位的拓展
- 2. 案例：淘宝焦点图布局制作
- 3. 网页布局总结
- 4.元素的显示与隐藏------->本质：让一个元素在页面中隐藏或显示出来
- - 4.1 display属性
  - 4.2 visibility可见性
  - 4.7 overflow溢出

本节目标

CSS定位

能够说出为什么要用定位
能够说出定位的四种分类
能说出四种定位各自的特点
能说出为什么常用子绝父相布局
能够写出淘宝轮播图布局
能够说出显示隐藏的两种方法以及区别

1. 定位

1.1 为什么需要定位

定位可以让盒子自由在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子。

1.2 定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。
（1）定位模式
定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

（2）边偏移

边偏移就是定位的盒子移动到的最终位置。有top、bottom、left、right四个属性。

边偏移属性	语义	语义
top	top:80px;	顶端偏移量，定位元素相对于父元素上边线的距离
bottom	bottom:80px;	底部偏移量，定位元素相对于父元素下边线的距离
left	left:80px;	左侧偏移量，定位元素相对于父元素左边线的距离
right	right:80px;	右侧偏移量，定位元素相对于父元素右边线的距离

1.3 静态定位（了解）

静态定位是元素的默认定位方式，相当于无定位的意思。（也就是说你不写就默认为static）
语法：
选择器{position：static;}

静态定位按照标准流特性摆放位置，没有边偏移
静态定位在布局时很少用到
-可以理解为静态定位=标准流布置

1.4 相对定位relative(重要)

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。
语法:
选择器{position：relative;}
相对定位特点：

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

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {position: relative;top: 100px;left: 100px;width: 200px;height: 200px;background-color: pink;}.box2 {width: 200px;height: 200px;background-color: deeppink;}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body></html>

结果展示：
在这里插入图片描述
移动后第二个盒子并没有覆盖第一个盒子的位置，而是保留了第一个盒子的位置。

1.5 绝对定位absolute(重要)

绝对定位是元素在移动位置的时候相对于它祖先元素来说的。
语法：
选择器：{position:absolute;}
绝对定位特点（必须记住）

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

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 500px;height: 500px;background-color: skyblue;}.son {position: absolute;/* top: 10px;left: 10px; *//* top: 100px;right: 200px; */left: 0;bottom: 0;width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div class="father"><div class="son"></div></div></body></html>

结果展示：
在这里插入图片描述
很明显代码中其祖先元素没有定位，所以粉色方框以浏览器为准定位，属于特点一。

1.6 子绝父相的由来

子绝父相：子级是绝对定位的话，父级要用相对定位，所以相对定位经常用来作为绝对定位的父级。

子级绝对定位，不会占有位置，可以放到父盒子里面任何一个地方，不会影响其他兄弟盒子
父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局时，需要占有位置，因此父亲只能是相对定位
总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
当然，子绝父相不是永远不变的，如果父元素不需要占位置，子绝父绝也会遇到

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.grandfather {position: relative;width: 800px;height: 800px;background-color: hotpink;padding: 50px;}.father {/* position: relative; */width: 500px;height: 500px;background-color: skyblue;}.son {position: absolute;/* top: 10px;left: 10px; *//* top: 100px;right: 200px; */left: 30px;bottom: 10px;width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div class="grandfather"><div class="father"><div class="son"></div></div></div>
</body></html>

结果展示：
在这里插入图片描述
因为蓝色正方形没有设置相对定位，所以淡粉色正方形的布局是相对于深粉色布局的。
案例：学成在线--------hot new 模块添加
参考代码：请在CSS第五天案例中观察
index.html

<div class="box-bd"><ul class="clearfix"><li><em><img src="images/hot.png" alt=""></em><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><ul><div>

style.css

.box-bd ul li em {position: absolute;top: 4px;right: -3px;
}

结果展示：
在这里插入图片描述

1.7 固定定位fixed(重要)

固定定位是元素固定于浏览器可视区的位置。主要适用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：
选择器：{position:fixed;}
固定定位的特点（务必记住）

以浏览器的可视窗口为参照点移动元素
1）跟父元素没有任何关系
2）不随滚动条滚动
固定定位不再占有原先的位置
固定定位也是脱标的，其实固定定位也可以看作是一种特殊的绝对定位。

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.dj {position: fixed;top: 100px;left: 40px;}</style>
</head><body><div class="dj"><img src="images/pvp.png" alt=""></div><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p><p>请尽情吩咐妲己，主人</p></body></html>

结果展示：
在这里插入图片描述

固定定位小技巧：固定在版心右侧位置，这里有一个小算法

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

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.w {width: 800px;height: 1400px;background-color: pink;margin: 0 auto;}.fixed {position: fixed;/*1.走到浏览器宽度的一半*/left: 50%;/*2.利用margin走版心盒子宽度的一半*/margin-left: 405px;width: 50px;height: 150px;background-color: skyblue;}</style>
</head><body><div class="fixed"></div><div class="w">版心盒子 800像素</div>
</body></html>

结果展示：
在这里插入图片描述
滚动后依然固定

1.8 粘性定位sticky（了解）

粘性定位可以被认为是相对定位和固定定位的混合。
语法：
选择器{position：sticky;}
粘性定位的特点：

以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原来的位置（相对定位的特点）
必须添加top、bottom、left、right其中一个才有效
通常跟页面滚动搭配使用

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {height: 3000px;}.nav {position: sticky;top: 0;width: 800px;height: 50px;background-color: pink;margin: 100px auto;}</style>
</head><body><div class="nav">我是导航栏</div>
</body></html>

结果展示：
滚动前：
在这里插入图片描述
滚动后

1.9 定位的总结

定位模式	是否脱标	移动位置	是否常用
static	否	不能用边偏移	否；很少
relative	否（占有位置）	相对于自身移动	常用
absolute	是（不占有位置）	带有定位的父级	常用
fixed	是（不占有位置）	浏览器可视区	常用
sticky	否（占有位置）	浏览器可视区	现阶段较少

（1）一定记住相对定位、固定定位、绝对定位两个大的特点：
a. 是否占有位置（脱标否）
b. 以谁为基准点移动位置
（2）学会定位重点学会“子绝父相”

1.10 定位叠放次序z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）
语法：
选择器：{z-index:1;}

数值可以是正整数、负整数或0，默认是auto,数值越大，盒子越靠上
如果属性相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才能使用z-index属性（position：static;是无定位它不适用这条）

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {position: absolute;top: 0;left: 0;width: 200px;height: 200px;}.xiongda {background-color: red;z-index: 1;}.xionger {background-color: green;left: 20px;top: 50px;z-index: 2;}.qiangge {background-color: blue;left: 100px;top: 100px;}</style>
</head><body><div class="box xiongda">熊大</div><div class="box xionger">熊二</div><div class="box qiangge">光头强</div>
</body></html>

结果展示：
在这里插入图片描述
因为熊二的z-index值大，所以熊二在最上面。

1.11 定位的拓展

绝对定位的盒子居中
加了绝对定位的盒子不能通过margin:0 auto；水平居中，但是可以通过以下计算方法实现水平和垂直居中。
（1）left:50%;让盒子的左侧移动到父级元素的水平中心位置。
（2）margin-left:-100px;让盒子向左移动自身宽度的一半。

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {/* position: absolute;margin: auto; */position: absolute;/*1.left走50%父容器宽度的一半*/left: 50%;/*margin负值往左边走自己盒子宽度的一半*/margin-left: -100px;top: 50%;margin-top: -100px;width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div class="box"></div>
</body></html>

结果展示：
在这里插入图片描述
使用上述方法，该正方形呈现在页面正中间。

定位特殊特性
绝对定位和固定定位也和浮动类似。
（1）行内元素添加绝对或固定定位，可以直接设置高度和宽度
（2）块级元素添加绝对或者固定定位，如果不给宽/高，默认大小是内容的大小
（3）脱标的盒子不会触发外边距塌陷。浮动元素，绝对定位（固定定位）元素都不会触发外边距合并的问题。

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span {position: absolute;top: 200px;width: 200px;height: 150px;background-color: pink;}div {position: absolute;background-color: skyblue;}</style>
</head><body><span>123</span><div>abcd</div>
</body></html>

结果展示：
在这里插入图片描述
这个例子说明了（1）和（2）是正确的。

（4）绝对定位（固定定位）会完全压住盒子
- 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
- 但是绝对定位（固定定位）会压住下面标准流所有的内容
- 浮动之所以不会压住文字是因为浮动产生的目的最初是为了做文字环绕效果的。----文字会围绕浮动元素。

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {/*浮动的元素不会压住下面标准流的文字*//* float: left; *//*绝对定位/固定定位会压住下面标准流的所有内容*/position: absolute;width: 150px;height: 150px;background-color: pink;}</style>
</head><body><div class="box"> </div><p>阁下何不同风起，扶摇直上九万里</p></body></html>

结果展示：
在这里插入图片描述
可以尝试取消我的浮动注释观察二者的不同。

2. 案例：淘宝焦点图布局制作

注意：如果同时设置left:0;和right:0;会先执行left:0;；如果同时设置top:0;和biottom:0;会先执行top:0;。
即先上后下，先左后右。

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘宝轮播图</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.tb-promo {position: relative;width: 520px;height: 280px;background-color: pink;margin: 100px auto;}.tb-promo img {width: 520px;height: 280px;}/*并集选择器可以集体声明相同的样式*/.prev,.next {position: absolute;top: 50%;margin-top: -15px;width: 20px;height: 30px;background: rgba(0, 0, 0, .3);text-align: center;line-height: 30px;color: #fff;text-decoration: none;}.prev {left: 0;/*绝对定位的盒子垂直居中*//*加了绝对定位的盒子可以直接加高度和宽度*/border-top-right-radius: 15px;border-bottom-right-radius: 15px;}.next {right: 0;/*绝对定位的盒子垂直居中*//*加了绝对定位的盒子可以直接加高度和宽度*/border-top-left-radius: 15px;border-bottom-left-radius: 15px;/*给一个盒子既加了左又加了右（right）会先执行左，上下同理先执行上（top）,先上后下，先做后右*/}.promo-nav {position: absolute;bottom: 15px;left: 50%;margin-left: -35px;width: 70px;height: 13px;background: rgba(255, 255, 255, .3);border-radius: 7px;}.promo-nav li {float: left;width: 8px;height: 8px;background-color: #fff;border-radius: 50%;margin: 3px;}/* 不要忘记选择器权重的问题 */.promo-nav .selected {background-color: #ff5000;}</style>
</head><body><div class="tb-promo"><img src="images/tb.jpg" alt=""><!-- 左箭头 --><a href="#" class="prev">&lt;</a><!-- 右箭头 --><a href="#" class="next">&gt;</a><!-- 小圆点 --><ul class="promo-nav"><li class="selected"></li><li></li><li></li><li></li><li></li></ul></div>
</body></html>

结果展示：
在这里插入图片描述
在这里主要注意权重问题以及并集选择器的使用。课程中给的图不是原图，是做好的图，所以可以自己找一张图去做。

3. 网页布局总结

通过盒子模型，清楚知道大部分html是一个盒子。
通过CSS浮动、定位可以让每个盒子排列称为网页。
一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。
（1）标准流
可以让盒子上下排列或左右排列，垂直的块级盒子显示就用标准流布局。
（2）浮动
可以让多个块级元素一行显示或左右对齐盒子，多个块级盒子水平显示就用浮动布局。
（3）定位
定位最大的特点是由层叠性的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

4.元素的显示与隐藏------->本质：让一个元素在页面中隐藏或显示出来

4.1 display属性

display属性用于设置一个元素应如何显示。

display: none;隐藏对象
display: block;除了转换为块级元素外，同时还有显示元素的意思。
display隐藏后，不再占有原来的位置。
应用广泛可搭配JS做网页特效。

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.peppa {/* display: none; */display: block;width: 200px;height: 200px;background-color: pink;}.geogre {width: 200px;height: 200px;background-color: skyblue;}</style>
</head><body><div class="peppa">佩奇</div><div class="geogre">乔治</div>
</body></html>

结果展示：
在这里插入图片描述
启用隐藏后

4.2 visibility可见性

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

visibility: visible;元素可视
visibility: hidden;元素隐藏

visibility隐藏元素后，继续占有原来的位置。
如果隐藏元素想要原来的位置，就用visibility: hidden;
如果隐藏元素不想要原来的位置，就用display:none;（用处更多重点）

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.baba {visibility: hidden;width: 200px;height: 200px;background-color: pink;}.mama {width: 200px;height: 200px;background-color: skyblue;}</style>
</head><body><div class="baba">猪爸爸</div><div class="mama">猪妈妈</div>
</body></html>

结果展示：
在这里插入图片描述
可以看到隐藏后，位置仍然保留。

4.7 overflow溢出

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

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

参考代码：
visible：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.peppa {/* overflow: hidden; *//*scroll 溢出部分显示滚动条 不溢出也显示滚动条*//* overflow: scroll; *//*auto 溢出时才显示滚动条 不溢出不显示滚动条*//* overflow: auto; */overflow: visible;width: 200px;height: 200px;border: 3px solid pink;margin: 100px auto;}</style>
</head><body><div class="peppa">小猪佩奇是一只可爱的粉色小猪，她与弟弟乔治、爸爸、妈妈快乐地住在一起。小猪佩奇最喜欢做的事情是玩游戏，打扮的漂漂亮亮，度假，以及住在小泥坑里快乐的跳上跳下。除了这些，她还喜欢到处探险，虽然有些时候会遇到一些小状况，但总可以化险为夷，而且都会带给大家意外的惊喜</div>
</body></html>

hidden：

  overflow: hidden;

scroll:

  overflow: scroll;

auto:

  overflow: auto;

结果展示：
visible：
在这里插入图片描述

hidden：
在这里插入图片描述

scroll:
在这里插入图片描述

auto:
超出时：
在这里插入图片描述

不超出时：
在这里插入图片描述

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。但是，如果有定位的盒子，请慎用overflow:hidden;因为它会隐藏多余的部分。
比如在学成在线案例中，原本显示如下：
在这里插入图片描述

使用overflow:hidden;后就变成下面的效果了：
在这里插入图片描述
所以需要慎用！！！
土豆案例：
参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.tudou {position: relative;width: 444px;height: 320px;background-color: pink;margin: 30px auto;}.tudou img {width: 100%;height: 100%;}.mask {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;display: none;}/*当鼠标经过土豆这个盒子，就让里面的遮罩层显示出来了*/.tudou:hover .mask {/*显示元素*/display: block;}</style>
</head><body><div class="tudou"><div class="mask"></div><img src="images/tudou.jpg" alt=""></div><div class="tudou"><div class="mask"></div><img src="images/tudou.jpg" alt=""></div><div class="tudou"><div class="mask"></div><img src="images/tudou.jpg" alt=""></div><div class="tudou"><div class="mask"></div><img src="images/tudou.jpg" alt=""></div><div class="tudou"><div class="mask"></div><img src="images/tudou.jpg" alt=""></div>
</body></html>

结果展示：
在这里插入图片描述
—————————————————————————————————————————
第六天知识点已讲解完毕，下面即将更新课程CSS第七天的内容哦(ง •_•)ง，有什么问题都可以在评论区进行讨论哦！