# 1.定位 position position:absolute/relative ~~~ relative定位 相對定位：元素在頁面上正常的位置。 ~~~ ~~~ absolute定位 絕對定位：1.它的位置是相對于最近的給了定位的父元素(包含爸爸的爸爸) 2.如果父元素沒有給定位,那么它的位置(left,top,right,bottom)是相對于整個窗口 都通過left,top,right,bottom移動 z-index:設置元素的堆疊順序 給position:absolute絕對定位的元素 ~~~ ~~~ 固定定位 position:fixed ~~~ - 找一個固定定位的例子，簡書 - demo 百度一下搜索框 # 2. 實現元素的垂直水平居中 > 第一種 ~~~ 父元素設置parent{position:relative;} 子元素設置 child{ position:absolute; left:50%; top:50%; margin-left:-50%*child*width; margin-top:-50%*child*height; } ~~~ > 第二種 ~~~ parent{ position:relative; } child{ position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; } ~~~ # 3. `css`樣式的幾種引入方式 ## 3-1 外部樣式表 --->W3C推薦用這種 ~~~ <link rel="stylesheet" type="text/css" href="/c5.css"> ~~~ ## 3-2 內部樣式表（位于 標簽內部） ~~~ <style> p{color:pink;font-size:16px} </style> ~~~ ## 3-3 內聯樣式（在 HTML 元素內部）！！！不要用 ~~~ <p style="color:pink;font-size:16px">hello world</p> ~~~ - 給同一選擇器設置同一樣式,離元素近的樣式設置方式優先級高 # 4.絕對路徑和相對路徑 **絕對路徑：從盤符開始的路徑** > 因為會上傳html和css，所以不要寫絕對路徑 ~~~ <img src="D:/images/down.jpg" alt=""/> ~~~ **相對路徑：相對當前文件所在的路徑** ~~~ 同級目錄 src='down.jpg' 下一級目錄 src='images/down.jpg' 上一級目錄 src='../down.jpg ~~~ ## 5.定位的寬高繼承問題 ~~~ 父元素給position:relative 子元素position:absolute 子元素絕對定位,不會繼承父元素的width ~~~