前端頁面布局、定位、模糊遮罩問題小總結
定位
1、定位組成
定位=定位模式+邊偏移
1.定位模式決定元素的定位方式，通過css的positon屬性來設置
| 值 | 語義 |
|---|---|
| static | 靜態定位 |
| relative | 相對定位 |
| absolute | 絕對定位 |
| fixed | 固定定位 |
2.邊偏移
| 邊偏移屬性 | 示例 | 描述 |
|---|---|---|
| top | top:88px | 頂端偏移量定義元素相對於其父元素上邊框的距離 |
| bottom | bottom:80px | 頂端偏移量定義元素相對於其父元素上邊框的距離 |
| left | left:80px | 頂端偏移量定義元素相對於其父元素上邊框的距離 |
| right | right:80px | 頂端偏移量定義元素相對於其父元素上邊框的距離 |
相對定位
相對於原來的位置來移動
不脫標，繼續保留原來的位置
絕對定位
如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為準定位.
如果祖先元素有定位(相對、絕對、固定定位),則以最近以及的有定位祖先元素為參考點移動位置。
子絕父相
因為父級需要佔有位置，因此是相對定位，子盒子不需要佔有位置，則是絕對定位
固定定位
- 以瀏覽器的可視窗口為參照點移動元素，
跟父元素沒有任何關係
不隨滾動條移動
固定定位不佔用原先的位置
固定定位是脫標的，其實固定定位可以看做是一種特殊的絕對定位
固定定位小技巧
讓固定定位的盒子left:50%,走到瀏覽器可視區 版心的一半位置
讓固定定位的盒子margin-left：版心寬度的一半距離，多走版心寬度的一半距離就可以讓固定定位的盒子貼著版心右側對齊了
粘性定位sticky
{position:sticky;top:10px;}粘性特點：
以瀏覽器的可視窗口為參照點移動元素
粘性定位佔有原先的位置
必須添加top、left、right、bottom其中一個才有效
3.定位小結
| 定位模式 | 是否脫標 | 移動位置 | 是否常用 |
|---|---|---|---|
| static靜態定位 | 否 | 不能使用邊偏移 | 很少 |
| relative相對定位 | 否(佔有位置) | 相對於自身位置移動 | 常用 |
| absolute | 是(不佔用位置) | 帶有定位的父級 | 常用 |
| fixed固定定位 | 是(不佔用位置) | 瀏覽器可視區 | 常用 |
| sticky粘性定位 | 否(佔有位置) | 瀏覽器可視區 | 當前階段少 |
2、定位疊放次序z-index
數值可以是正整數、負整數、0，默認是auto，數值越大盒子越靠上，
如果屬性相同，則按照書寫順序，後來居上
數字後面不能加單位
只有定位的盒子才有z-index屬性
絕對定位的盒子居中演算法
加了絕對定位的盒子不能通過margin0 atuo水平居中，可以通過left:50%;
讓盒子的左側移動到父級元素的水平中心位置
margin-left:100px 讓盒子向左移動自身寬度的一半
定位特殊特性
行內元素添加絕對或固定定位，可以直接設置高度和寬度。
塊級元素添加絕對或者固定定位，如果不給寬度或高度，默認大小是內容的大小
脫標的盒子不會觸發外邊距塌陷
浮動元素、絕對定位元素的都不後悔觸發外邊距合併的問題
/* 1.浮動的元素不會壓住下面標準流的文字 */
/* float: left; */
/* 2. 絕對定位（固定定位） 會壓住下面標準流所有的內容。 */
position: absolute;
1.水平居中 絕對定位的盒子居中演算法
left:50%;margin-left:width/2 ;
.promo-nav {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -35px;
width: 70px;
height: 13px;
border-radius: 7px;
background: rgba(255, 255, 255, .3);
}
2.垂直居中
top為50% margin-top:height/2 ;
.prev,
.next {
position: absolute;
top: 50%;
margin-top: -15px;
width: 20px;
height: 30px;
line-height: 30px;
text-decoration: none;
color: #fff;
background: rgba(0, 0, 0, .3);
}
3、網頁布局總結
1、標準流
可以讓盒子上下排列或者左右排列，垂直的塊級盒子顯示就用標準流布局
2、浮動
可以讓多個塊級元素一行顯示或者左右對齊盒子，多個塊級盒子水平顯示就用浮動布局
3、定位
定位最大的特點就是有層疊的概念，就是可以讓多個盒子前後疊壓來顯示，如果元素自由的在某個盒子內移動就用定位布局
4、元素的顯示與隱藏
本質： 讓一個元素在頁面中隱藏或者顯示出來
display：none 隱藏對象
display:block;除了轉換為塊級元素之外，同時還有顯示元素的意思
display隱藏元素後不再佔有原來的位置
visibility 屬性用於指定一個元素應可見還是隱藏
visibility:visible;元素可視
visibility:hidden;元素隱藏
visibility:隱藏元素後，繼續佔有原來的位置
/* overflow: visible; */
/* overflow: hidden; */
/* scroll 溢出的部分顯示滾動條 不溢出也顯示滾動條 */
/* overflow: scroll; */
/* auto 溢出的時候才顯示滾動條 不溢出不顯示滾動條 */
/* overflow: auto; */
1.土豆網顯示隱藏遮罩實現
<!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>Document</title>
<style>
.tudou {
position: relative;
width: 444px;
height: 320px;
background-color: plum;
margin: 30px auto;
}
.tudou img {
width: 444px;
height: 320px;
}
.mask {
display: none;
/* 絕對定位不佔位置 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 不重複 居中 */
background: rgba(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/pic02.png" alt="">
</div>
</body>
</html>
