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>