01、定位导读
02、为什么需要定位
1、实现使用标准流/浮动也很难实现的场景：
某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子、以及无论如何移动滚轮，页面中都有一部分内容会固定显示在屏幕上。
2、所以：
①浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
②定位则是可以让盒子自由的在某个盒子内部移动位置或者固定屏幕中某个位置，并且可以压住其他盒子
3、定位组成
1、定位：将盒子定在某一位置，所以定位也是在拜访盒子，按照定位的方式移动盒子
2、定位=定位模式+边偏移
定位模式用于指定一个元素文档中的定位方式。
边偏移则决定了该元素的最终位置。
3、定位模式：决定元素的定位方式，通过CSS的position属性来设置，其值可以分为4个：
4、边偏移：就是定位盒子移动到最终位置。（类似padding）
有top、bottom、left、right共4个属性
4、相对定位
1、静态定位static（了解）：元素默认的定位方式，无定位的意思。
语法：
选择器 {position: static;}
注意：静态定位按照标准流特性摆放位置，它没有边偏移（可以认为静态定位就是标准流，很少用到）
2、相对定位relative（重要）
相对定位是元素在移动位置的时候，是相对于它原来的位置而言的
语法选择器 {positoin: relative; }
eg：
.box {
position: relative;
top: 100px;
left: 100px;
}
特点：
①相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
②原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置）
③因此相对定位没有脱标，它最典型的应用是给绝对定位当爹的。
5、6、7、绝对定位absolute（重要）-没有父级或者父级无定位的情况、父级有定位的情况、绝对定位脱标的不占有原来位置
1、绝对定位是元素在移动位置的时候，相对于它祖先元素来说的。
2、语法选择器 {position: absolute; }
eg：
.box {
position: absolute;
bottom: 100px;
left: 100px;
}
3、特点：
①如果没有祖先元素，或者祖先元素没有定位，则以浏览器为准定位（document文档）
②如果父级有定位的情况（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置（如果爸爸没定位，爷爷有定位，那就以爷爷为准）。
③绝对定位不会占有位置，脱标，飘地比浮动定位还要高
08、子绝父相的由来
1、口诀：
09、子绝父相的按例、hot模块
eg：
具体见视频吧。。。
10、固定定位fixed（重要）
1、固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：选择器 {position: fixed; }
2、特点：
①以浏览器的可视窗口为参照点移动元素
（和父元素没有任何关系、不随滚条滚动而滚动）
注意窗口化之后也会按照可视窗口来变化
②固定定位不再占有原来的位置，脱标的（可以看做是一种特殊的绝对定位）
11、固定定位小技巧-固定到版心右侧
先走宽度的一半、再走版心盒子宽度一半
eg
12、粘性定位sticky（了解）
1、粘性定位可以认为是相对定位和固定定位的混合。
2、使用场景（京东的右边栏，一开始在右下角，当滚轮下移，固定在了右上角）
3、语法、特点：
13、定位总结：
14、定位的叠放次序 z-index
1、在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序（z轴）
2、语法：选择器 { z-index: 1; }
数值可以是正整数，负整数或0.默认是auto，数值越大，盒子越高
如果数值相同，则按照书写顺序，后来者居上
数字后面不能家单位
只有定位的盒子才有z-index属性！！！！！！！
15、绝对定位盒子居中算法
1、加了绝对定位的盒子是不能通过margin：0 auto；的方法实现水平居中的，但是可以通过以下计算方法实现水平和垂直居中。
水平居中：
①left走50%父容器宽度的一半
②margin 负值往左走自己盒子宽度的一半
垂直居中：
①top走50%父容器长度的一半
②margin 负值往上走自己盒子宽度的一半
代码eg：
16、定位的特殊特性
1、绝对定位和固定定位和浮动很类似
①如果给行内元素设置为绝对/固定定位，则可以直接设置高度和宽度了
②块级元素添加绝对/固定定位，如果不给宽度或者高度，默认大小是内容的大小
2、脱标的盒子是不会触发外边距塌陷的：
浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题
17、浮动元素不会压住标准流的文字定位
绝对定位（固定定位）会完全压住盒子（所有内容、不管文字/图片）
eg：
而浮动元素不同，它只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）（浮动最初的目的就是为了做文字环绕效果的）
eg1：
eg2：
18-24课、按例分析，总结
制作轮播图：
1、大盒子、图片、左右两个按钮（定位）、最下方的小按钮（定位）
制作过程：
1、制作大盒子、放图片：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.tb-promo {
width: 880px;
height: 387px;
background-color: pink;
margin: 100px auto;
}
.tb-promo img {
width: 880px;
height: 387px;
}
</style>
</head>
<body>
<div class="tb-promo">
<img src="../../image/7a6ff0a8e8b0d9cf95e843ed714bdc2d.jpg" alt="">
</div>
</body>
2、制作左右按钮：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.tb-promo {
/* 子绝父相、所以父盒子一定是相对定位 */
position: relative;
width: 880px;
height: 387px;
background-color: pink;
margin: 100px auto;
}
.tb-promo img {
width: 880px;
height: 387px;
}
.prev {
/* 转换为绝对定位，不用站住位置,并且可以直接设置宽高 */
position: absolute;
/* 左侧垂直居中 */
left: 0;
top: 50%;
margin-top: -15px;
width: 20px;
height: 30px;
background: rgba(0, 0, 0, .3);
/* 文字的居中，颜色，下划线 */
text-align: center;
line-height: 30px;
color: #ffffff;
text-decoration: none;
/* 将箭头的盒子变为圆角 */
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.next {
/* 转换为绝对定位，不用站住位置,并且可以直接设置宽高 */
position: absolute;
/* 左侧垂直居中 */
right: 0;
top: 50%;
margin-top: -15px;
width: 20px;
height: 30px;
background: rgba(0, 0, 0, .3);
/* 文字的居中，颜色，下划线 */
text-align: center;
line-height: 30px;
color: #ffffff;
text-decoration: none;
/* 将箭头的盒子变为圆角 */
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
</style>
</head>
<body>
<div class="tb-promo">
<img src="../../image/7a6ff0a8e8b0d9cf95e843ed714bdc2d.jpg" alt="">
<!-- 左侧按钮箭头lt -->
<a href="#" class="prev"><</a>
<!-- 右侧按钮箭头gt -->
<a href="#" class="next">></a>
</div>
</body>
</html>
由于制作过于繁琐、简化代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.tb-promo {
/* 子绝父相、所以父盒子一定是相对定位 */
position: relative;
width: 880px;
height: 387px;
background-color: pink;
margin: 100px auto;
}
.tb-promo img {
width: 880px;
height: 387px;
}
/* 并集选择器可以集体声明相同的样式 */
.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: #ffffff;
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;
}
</style>
</head>
<body>
<div class="tb-promo">
<img src="../../image/7a6ff0a8e8b0d9cf95e843ed714bdc2d.jpg" alt="">
<!-- 左侧按钮箭头lt -->
<a href="#" class="prev"><</a>
<!-- 右侧按钮箭头gt -->
<a href="#" class="next">></a>
</div>
</body>
</html>
3、制作下方小圆点的按钮
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.tb-promo {
/* 子绝父相、所以父盒子一定是相对定位 */
position: relative;
width: 420px;
height: 236px;
margin: 100px auto;
}
.tb-promo img {
width: 420px;
height: 236px;
}
/* 并集选择器可以集体声明相同的样式(左右箭头) */
.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: #ffffff;
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;
}
.promo-nav {
position: absolute;
/* 底部居中对齐 */
bottom: 15px;
left: 50%;
margin-left: -50px;
width: 100px;
height: 12px;
background: rgba(255, 255, 255, .3);
/* 圆角 */
border-radius: 7px;
}
</style>
</head>
<body>
<div class="tb-promo">
<img src="../../image/makeup.jpg" alt="">
<!-- 左侧按钮箭头lt -->
<a href="#" class="prev"><</a>
<!-- 右侧按钮箭头gt -->
<a href="#" class="next">></a>
<!-- 绝对定位制作小圆点，用ul制作 -->
<ul class="promo-nav">
</ul>
</div>
</body>
</html>
4、给下方按钮制作小圆点（li元素）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 去除序列的圆点 */
li {
list-style: none;
}
.tb-promo {
/* 子绝父相、所以父盒子一定是相对定位 */
position: relative;
width: 420px;
height: 236px;
margin: 100px auto;
}
.tb-promo img {
width: 420px;
height: 236px;
}
/* 并集选择器可以集体声明相同的样式(左右箭头) */
.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: #ffffff;
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;
}
.promo-nav {
position: absolute;
/* 底部居中对齐 */
bottom: 15px;
left: 50%;
margin-left: -50px;
width: 100px;
height: 12px;
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 6px;
}
</style>
</head>
<body>
<div class="tb-promo">
<img src="../../image/makeup.jpg" alt="">
<!-- 左侧按钮箭头lt -->
<a href="#" class="prev"><</a>
<!-- 右侧按钮箭头gt -->
<a href="#" class="next">></a>
<!-- 绝对定位制作小圆点，用ul制作 -->
<ul class="promo-nav">
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
</div>
</body>
</html>
最终效果：
24、网页布局总结
1、盒子模型，html大部分标签是盒子
2、CSS浮动、定位可以让每个盒子排列成为网页
3、标准流、浮动、定位
①标准流：
让盒子上下排列：垂直的块级盒子显示用标准流布局
②浮动：
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
③定位：
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局
25、26、display显示隐藏元素
1、类似一个网站广告，当我们点击关闭就不见了，但是我们重新刷新页面会重新出现。
本质：让一个元素在页面中隐藏或者显示出来
①display显示隐藏
②visibility显示隐藏
③overflow溢出显示隐藏
2、display属性：
用于设置一个元素如何显示
①display：none;隐藏对象
！！！display元素隐藏后，不再占有原来的位置！！！
②display: block;除了转换为块级元素之外，同时还有显示元素的意思
这个应用及其广泛，搭配js可以做很多网页特效
3、visibility显示隐藏元素
visibility可见性
①visibility: hidden;隐藏对象
！！！display元素隐藏后，继续占有原来的位置！！！
②visibility: bisible元素可见
4、overflow溢出显示隐藏
overflow溢出
eg：文字太多对溢出的处理方式
overflow属性指定了如果内容溢出一个元素的框（宽高）时，会发生什么
①overflow: visible;
②overflow: hidden;
③overflow: auto;
④overflow: scroll;
28、29课土豆案例
首先把盒子大小写死，然后保证图片和盒子的大小一致即可
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tudou {
/* 子绝父相、父盒子为相对定位 */
position: relative;
width: 744px;
height: 320px;
background-color: pink;
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, .5) url(../../image/logo.jpg) no-repeat center;
}
/* 当鼠标经过图片，显示里面的遮罩层 !!!注意这里的写法*/
.tudou:hover .mask {
/* 这里block不是块级元素，而是显示的意思 */
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<!-- 创建遮盖的阴影 -->
<div class="mask"></div>
<img src="../../image/7a6ff0a8e8b0d9cf95e843ed714bdc2d.jpg" alt="">
</div>
</body>
</html>
587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
