2020年2月20日
一. 本节课学习目标。
- 掌握常用的居中方式。
- 掌握定位的作用。 重点
- 掌握定位的实现方式。
- 掌握相对定位，绝对定位，固定定位的区别。
- 能够通过html，css，盒模型，浮动，定位进行复杂网页布局。
二. 居中方式。
- 水平居中。
1.1 行元素，行内块元素，文字等内容水平居中。
直接给父元素添加text-align:center;即可。
1.2 块元素水平居中。
直接给当前的块元素添加margin：0 auto;即可。
注意：当前块元素必须得设置了width属性。 - 垂直居中。
2.1 一行文字垂直居中。
给该元素添加line-height属性，将值设置为和当前元素高度保持一致。
Line-height: 当前元素高度值;
2.2 图片文字垂直居中(垂直居中对齐)。
给图片标签img添加vertical-align: middle;即可。
2.3 一个块元素垂直居中。
a.通过给父元素添加上下相同的padding可以实现（特殊情况）。
b.定位。
三. 悬浮。
- 悬浮到标签上，更改标签的样式。
.box>a:hover {
Color:white;
}
把鼠标移动到a标签上时，更改a标签的文字颜色。 - 悬浮到父元素身上，更改子元素的样式。
.box:hover>a {
Color:blue;
}
把鼠标悬浮到.box这个div上，然后更改.box下直接相关联的下一级a标签，将a标签文字颜色更改为蓝色。
四. 补充知识点。
- 边框圆角。
Border-radius: 半径值; 单位px.
注意：如果想要将一个正方形变成圆形，只需要将border-radius: 宽度一半/高度一半;
更多复杂的圆角效果：
https://jingyan.baidu.com/article/1876c852549b2a890b1376bf.html - 阴影。
Box-shadow:水平方向偏移量 垂直方向偏移量 模糊距离 阴影大小 阴影颜色 阴影方向;
学习链接：https://www.runoob.com/cssref/css3-pr-box-shadow.html - 移动。
Transform: translateY(移动值)； 单位px
注意：网页布局中的坐标系和数学中的坐标系有区别，在于网页布局中的y轴的正方向是往下的。
4.属性更改的完成时间
transition: 秒数; 单位：s 添加属性更改的完成时间
五. 定位。
- 作用。
解决具有层级叠加效果（元素覆盖）的元素的精准布局问题。 - 实现方式。
只需要给想进行层级叠加效果的元素（想上到更高层级的）添加属性position。
注意：一个元素一旦添加了position属性之后，该元素的层级就会被提升。 和浮动的区别在于，浮动提升层级，只会提升半级，而且浮动之后之后的元素都是一个层级的，而定位的元素，越晚定位的元素层级提升就会越高。
如果想提升一个元素的层级，可以给该元素使用z-index属性。 格式：z-index: 数值（没有单位）。
每个元素都会有一个z-index属性，默认值为0。规范：z-index的值尽量给1000以上。 - 不同的定位方式。
添加了定位属性的元素要调整位置必须配合left,right,top,bottom这四个属性来使用。
3.1 相对定位。
a. 给元素添加position: relative；
b. 相对于该元素原来的位置进行调整。
c. 相对定位的元素会提升层级，但是不会脱离文档流。
3.2 绝对定位。
a. 给元素添加position：absolute;
b. 相对于父元素来进行位置调整。
前提条件1：该元素必须是父元素（只要在该元素的上层都是父元素，上一级，上上一级，上上上一级等等， 最终body）。
前提条件2：该父元素必须是一个已经定位了的父元素。（就是该父元素也添加positioon属性）。
注意： 既然只需要给父元素添加position属性就可以作为子元素绝对定位的参照物，那父元素position的值用relative还是用absolute呢？
答案：使用relative相对定位更好一些。
原因：因为给父元素添加position属性的目的，只是为了想把该父元素作为参照物。如果属性值用了absolute绝对定位，则会影响和父元素同级的元素的位置，而相对定位不会，所以优先选择相对定位。
c. 绝对定位的元素会提升层级，但是会脱离文档流，会影响后边的之前同级的元素。
3.3 固定定位。
a. 给元素添加positon: fixed;
b. 只相对于body（浏览器窗口）来做位置调整。
c. 固定定位的元素会提升层级，但是会脱离文档流。
六. 定位练习1-韩都衣舍。
- 元素的隐藏以及显示：
方式一：
隐藏掉： display: none;
显示出来： display:block;
但是display是不支持transition变化时长的设置。
方式二：
隐藏掉： opcity: 0;
显示出来： opcity: 1;
Opcity支持transition变化时长的设置。
效果图：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>韩都衣舍</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 380px;
height: 270px;
border: 1px solid black;
/* 相对定位 - 让该父元素成为p元素位置调整的参照物 */
position: relative;
/* 超出该元素的范围的内容全部隐藏掉 */
overflow: hidden;
}
/* 调整img，让宽高和div保持一致 */
.box>img {
width: 100%;
height: 100%;
}
.box>p {
color: white;
font-size: 12px;
line-height: 20px;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
/* 绝对定位 */
position: absolute;
/* 调整位置left,right,top,bottom */
bottom: -20px;
left: 0;
right: 0;
/*
该元素设置的宽度百分比
1.当元素未提升层级之前，该100%是相对于父元素的宽度的百分比。
2.当元素提升层级之后，该100%是参照物的宽度的百分比。
*/
width: 100%;
/* 变化时长 */
transition: 2s;
}
/* 父子悬浮效果 */
.box:hover>p {
/* 移动到和div底部重合的位置 */
bottom: 0;
}
</style>
</head>
<body>
<div class="box">
<img src="img/l1.jpg" >
<p>三只松鼠 全场包邮低至一元起</p>
</div>
<!--
需求：
网页显示时，p元素在div外边，当鼠标悬浮到div上时，p元素从底部移入。
-->
</body>
</html>