定位及CSS常見屬性
定位的應用場景和基本原理
定位的原理
-
在本文流中 , 任何一個標籤都被文字流所限制了自身的位置 , 但是通過 CSS 我們依然使得這些標籤可以改變 自己的位置 , 我們可以通過 float 來讓標籤浮動 , 我們也可以通過 margin 來讓標籤產生位置移動。 CSS 定位屬性，允許定義標籤框相對於其正常位置應該出現的位置，或者相對於父標籤、 另一個標籤甚至瀏覽器視窗本身的位置。標籤可以使用頂部、底部、左側和右側屬性定義具體的位置
position
-
static 預設 靜態定位
-
預設的定位位置，不寫就是靜態定位
-
-
relative 相對定位
-
相對於自己本身移動
-
-
absolute 絕對定位
-
-
相對於父標籤（父標籤相對定位，子標籤絕對定位）
-
-
fixed 固定定位
-
相對於瀏覽器視窗
-
不會隨著滾動條滾動
-
總結一下position
-
定位 是否脫標 參考點 引數 static 否 無 relative 否 自己本身 left,right,top,bottom absolute 是 父標籤（子絕父相） left,right,top,bottom fixed 是 瀏覽器視窗 left,right,top,bottom
定位的技巧與層級關係
居中技巧
-
1、方案 1 margin 負間距 （1）必需知道該 div 的寬度和高度； （2）然後設定位置為絕對位置； （3）距離頁面視窗左邊框和上邊框的距離設定為 50%，這個 50% 就是指盒子左上角頂點距離頁面左、上邊 界的 50%； （4）最後將該 div 分別左移和上移，使整個盒子居中，左移和上移的大小就是該 DIV( 包括 border 和 padding) 寬度和高度的一半
-
- 2、方案 2 margin:auto 實現絕對定位元素的居中（該方法相容 ie8 以上瀏覽器）。 此方案程式碼關鍵點： （1）上下左右均 0 位置定位； （2）margin: auto。
- ```html
<!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>
* {
padding: 0;
margin: 0;
}
.box {
width: 300px;
height: 200px;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
定位標籤的層級屬性 z-index
-
1.預設定位的標籤一定在沒加定位的標籤上方。
-
2.預設是0，可以設定1、2、3、4，也可以是負值-1、-2，數值大的在上方
-
3.z-index屬性必須要配合定位使用，否則無效
常見屬性
-
vertical-align 屬性設定標籤的垂直對齊方式。利用這個屬性做圖文對齊方式
-
baseline 預設。標籤放置在父標籤的基線上。
-
top 把標籤的頂端與行中最高標籤的頂端對齊。
-
middle 把此標籤放置在父標籤的中部。
-
bottom 把標籤的底端與行中最低的標籤底端對齊。
-
-
圖片下間隙解決
-
去除圖片下間隙的辦法有很多，常用的有 3 種：
-
設定父盒子字號為 0
-
.wrap{
font-size: 0;
}
-
-
改變圖片的 display
-
img{
display: block;
}
-
-
給圖片設定垂直對齊方式
-
img{
vertical-align: middle;// 設定為任意不為 baseline 的值都可以
}
-
-
-
-
顯示與隱藏
-
盒子顯示：
-
display:block;
-
-
盒子隱藏：
-
display:none：隱藏該元素並且該元素所佔的空間也不存在了。
-
visibility:hidden ：隱藏該元素但是該元素所佔的記憶體空間還存在，即“隱身效果”。
-
-
-
overflow 屬性
-
overflow 屬性規定當內容溢位標籤框時的顯示方式，包括水平方向和垂直方向。
-
overflow-x 只包括水平方向。
-
overflow-y 只包括垂直方向。
-
visible 預設值。內容不會被修剪，會呈現在標籤框之外。
-
hidden 內容會被修剪，並且其餘內容是不可見的。
-
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
-
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
-
-
透明度屬性 (opacity,rgba())
-
opacity
-
1、相容性：IE6、7、8 不支援，IE9 及以上版本和標準瀏覽器都支援。
-
2、使用說明：設定 opacity 元素的所有後代元素會隨著一起具有透明性，一般用於調整圖片或者模組的整體 不透明度。
-
-
rgba()
-
1、相容性：IE6、7、8 不支援，IE9 及以上版本和標準瀏覽器都支援。
-
-