前端之CSS——屬性和定位
1、字體屬性
一、font-size（字體大小）
p { font-size: 14px; }
font-size 屬性可設置字體的尺寸。javascript
px：像素，穩定和精確css
%：把 font-size 設置爲基於父元素的一個百分比值，佈局時用到。html
em：移動端字體樣式大小，相對於其父元素來設置字體大小java
rem：能夠換算爲各類移動端，相對於根元素來設置字體大小jquery
二、font-weight（字體粗細）
font-weight字重，可用來調整字體粗細。瀏覽器
/*font-weight: normal;*/ /*font-weight: bold;*/ /*font-weight: bolder;*/ font-weight: 500;
取值：ide
/*值 描述 normal 默認值，標準粗細 bord 粗體 border 更粗 lighter 更細 100~900 設置具體粗細，400等同於normal，而700等同於bold inherit 繼承父元素字體的粗細值 */
三、font-family（字體系列）
body { font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif; }
font-family能夠把多個字體名稱做爲一個「回退」系統來保存。若是瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。工具
字體設置綜合性寫法佈局
p{ width: 300px; height: 60px; /*綜合性寫法*/ font: 14px/30px"宋體"; /* 等價於 font-size: 14px; line-height: 30px; font-family: '宋體'; */ }
使用font-family的注意要點：性能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>字體</title> <style> p{ width: 300px; height: 60px; /*綜合性寫法*/ /*font: 14px/30px"宋體";*/ font: 14px/30px"HanziPen SC"; /* 等價於 font-size: 14px; line-height: 30px; font-family: '宋體'; */ /*font:14px/30px "Arial","Hanzipen SC","微軟雅黑";*/ } </style> </head> <body> <!-- 使用font-family注意幾點： 1.網頁中不是全部字體都能用哦，由於這個字體要看用戶的電腦裏面裝沒裝， 好比你設置： font-family: "華文彩雲"; 若是用戶電腦裏面沒有這個字體， 那麼就會變成宋體 頁面中，中文咱們只使用： 微軟雅黑、宋體、黑體。 若是頁面中，須要其餘的字體，那麼須要切圖。 英語：Arial 、 Times New Roman 2.爲了防止用戶電腦裏面，沒有微軟雅黑這個字體。 就要用英語的逗號，隔開備選字體，就是說若是用戶電腦裏面， 沒有安裝微軟雅黑字體，那麼就是宋體： font-family: "微軟雅黑","宋體"; 備選字體能夠有無數個，用逗號隔開。 3.咱們要將英語字體，放在最前面，這樣全部的中文，就不能匹配英語字體， 就自動的變爲後面的中文字體： font-family: "Times New Roman","微軟雅黑","宋體"; 4.全部的中文字體，都有英語別名， 咱們也要知道： 微軟雅黑的英語別名： font-family: "Microsoft YaHei"; 宋體的英語別名： font-family: "SimSun"; font屬性可以將font-size、line-height、font-family合三爲一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun"; 5.行高能夠用百分比，表示字號的百分之多少。 通常來講，都是大於100%的，由於行高必定要大於字號。 font:12px/200% 「宋體」 等價於 font:12px/24px 「宋體」; 反過來，好比： font:16px/48px 「宋體」; 等價於 font:16px/300% 「宋體」 --> <p> 我是文本</p> </body> </html>
CSS font-family 各名稱一覽表:
http://www.javashuo.com/article/p-odaermsg-dg.html
四、color（字體顏色、背景顏色）
顏色表示方法有三種：顏色名稱單詞（如:red）、rgb表示法（如:rgb(255,0,0) ）、十六進制值（如:#FF0000）。
（1）RGB原理：光學顯示器每一個像素都是由三原色（紅綠藍）發光原件組成的，靠明亮不一樣調成不一樣的顏色。
用逗號隔開，r、g、b的值，每一個值的取值範圍0~255，一共256個值；其中255表明純色，0表明無色。
div{ /*黑色：*/ background-color: rgb(0,0,0); /*光學顯示器，每一個元件都不發光，黑色的。*/ /*白色：*/ background-color: rgb(255,255,255); /*顏色能夠疊加，好比黃色就是紅色和綠色的疊加：*/ background-color: rgb(255,255,0); background-color: rgb(111,222,123); /*就是紅、綠、藍三種顏色的不一樣比例疊加。*/ }
後來還演化出了rgba，能夠用來實現透明度的調整：
div{ background-color: rgba(0,0,0,.1); }
（2）16進製表示法：
全部用#開頭的值，都是16進制的。例如：#ff0000：紅色
16進製表示法，也是兩位兩位看，看r、g、b，可是沒有逗號隔開。ff就是10進制的255 ，00 就是10進制的0，00就是10進制的0。因此等價於rgb(255,0,0)。
十六進制能夠簡化爲3位，全部#aabbcc的形式（2位2位同樣的），可以簡化爲#abc;
/*要記住：*/ #000 黑 #fff 白 #f00 紅 #333 灰 #222 深灰 #ccc 淺灰
對於顏色最方便的仍是使用各類取色工具輔助實現。下面是顏色代碼示例詳解：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; /*background-color: rgb(0,0,0);*/ background-color: rgba(0,0,0,.1); /*background-color: #f00;*/ /* 顏色表示方法有哪些？ 一共有三種：單詞、rgb表示法、十六進制表示法 rgb:紅色 綠色 藍色 三原色 光學顯示器，每一個像素都是由三原色的發光原件組成的，靠明亮度不一樣調成不一樣的顏色的。 用逗號隔開，r、g、b的值，每一個值的取值範圍0~255，一共256個值。 若是此項的值，是255，那麼就說明是純色： 黑色： background-color: rgb(0,0,0); 光學顯示器，每一個元件都不發光，黑色的。 白色： background-color: rgb(255,255,255); 顏色能夠疊加，好比黃色就是紅色和綠色的疊加： background-color: rgb(255,255,0); 再好比： background-color: rgb(111,222,123); 就是紅、綠、藍三種顏色的不一樣比例疊加。 16進製表示法 紅色： background-color: #ff0000; 全部用#開頭的值，都是16進制的。 #ff0000：紅色 16進製表示法，也是兩位兩位看，看r、g、b，可是沒有逗號隔開。 ff就是10進制的255 ，00 就是10進制的0，00就是10進制的0。因此等價於rgb(255,0,0); 怎麼換算的？咱們介紹一下 咱們如今看一下10進制中的基本數字（一共10個）: 0、一、二、三、四、五、六、七、八、9 16進制中的基本數字（一共16個）: 0、一、二、三、四、五、六、七、八、九、a、b、c、d、e、f 16進制對應表： 十進制數 十六進制數 0 0 1 1 2 2 3 3 …… 10 a 11 b 12 c 13 d 14 e 15 f 16 10 17 11 18 12 19 13 …… 43 2b …… 255 ff 十六進制中，13 這個數字表示什麼？ 表示1個16和3個1。 那就是19。 這就是位權的概念，開頭這位表示多少個16，末尾這位表示多少個1。 小練習： 16進制中28等於10進制多少？ 答：2*16+8 = 40。 16進制中的2b等於10進制多少？ 答：2*16+11 = 43。 16進制中的af等於10進制多少？ 答：10 * 16 + 15 = 175 16進制中的ff等於10進制多少？ 答：15*16 + 15 = 255 因此，#ff0000就等於rgb(255,0,0) background-color: #123456; 等價於： background-color: rgb(18,52,86); 因此，任何一種十六進制表示法，都可以換算成爲rgb表示法。也就是說，兩個表示法的顏色數量，同樣。 十六進制能夠簡化爲3位，全部#aabbcc的形式，可以簡化爲#abc; 好比： background-color:#ff0000; 等價於 background-color:#f00; 好比： background-color:#112233; 等價於 background-color:#123; 只能上面的方法簡化，好比 background-color:#222333; 沒法簡化！ 再好比 background-color:#123123; 沒法簡化！ 要記住： #000 黑 #fff 白 #f00 紅 #333 灰 #222 深灰 #ccc 淺灰 */ } </style> </head> <body> <div> </div> </body> </html>
2、文字屬性
一、text-align（文本匹配）
text-align 屬性規定元素中的文本的水平對齊方式。
| 值 | 描述 |
|---|---|
| left | 左邊對齊 默認值 |
| right | 右對齊 |
| center | 居中對齊 |
| justify | 兩端對齊 |
二、text-decoration(文字裝飾)
| 值 | 描述 |
|---|---|
| none | 默認。定義標準的文本。 |
| underline | 定義文本下的一條線。 |
| overline | 定義文本上的一條線。 |
| line-through | 定義穿過文本下的一條線。 |
| inherit | 繼承父元素的text-decoration屬性的值。 |
具體使用時，還能夠同時設置線的顏色。
text-decoration: underline blue;
運用最頻繁的仍是消除a標籤的默認樣式：
text-decoration: none;
三、line-height（行高）
p{ /*行高*/ line-height: 100px; }
經常使用於文本垂直居中操做。
（1）單行文本垂直居中
示例以下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width: 300px; height: 50px; border: 1px solid red; /*行高的意思： 公式：行高=盒子的高度，讓文本垂直居中， 可是隻適應於單行文本。 */ line-height: 50px; font-size: 18px; } </style> </head> <body> <div> 內容 國家 </div> </body> </html>
公式：行高=盒子的高度，讓文本垂直居中（只適用於單行）
（2）多行文本垂直居中
注意：line-height必定要大於font-size，不然全部字都會擠在一塊兒，影響美觀。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width: 300px; /*height: 200px;*/ height: 160px; /* padding加了40px,height必定要減40px */ border: 1px solid red; /*運用padding居中*/ padding-top: 40px; line-height: 30px; font-size: 16px; } </style> </head> <body> <!--一個行高30px,一共4列，那就是120px 總的高度是200px,若是讓整個行高垂直居中在當前的盒子中。 （200-120)/2=40px，設置padding-top,height高度 --> <div> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 </div> </body> </html>
一個行高（line-height）30px,一共4列，那就是120px，總的高度是200px,若是讓整個行高垂直居中在當前的盒子中。(200-120)/2=40px，設置padding-top=40px, height高度-40px。
總之：利用padding和line-height實現多行垂直居中須要經過精確計算實現。
四、cursor(光標)
p{ text-decoration: underline blue; color: blue; cursor: pointer; /* point在鼠標移上去時，光標呈現爲指示連接的指針（一隻手） */ }
cursor 屬性規定要顯示的光標的類型（形狀）。該屬性定義了鼠標指針放在一個元素邊界範圍內時所用的光標形狀。
五、text-indent（首行縮進）
text-indent 屬性規定文本塊中首行文本的縮進。
注意：容許使用負值。若是使用負值，那麼首行會被縮進到左邊。
p{ /*text-indent:50px;*/ /* 首行縮進以em爲準 */ text-indent: 2em; /* 不論字體大小， 2格字*/ }
3、超連接美化首頁導航案例
經過下述代碼實現了一個美化的首頁導航欄：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超連接美化</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } .nav{ width: 960px; /* height: 40px; */ overflow: hidden; /* 清除浮動 */ margin: 100px auto 0; /* 上：100px 左右居中 下：0 */ background-color: purple; /* 設置圓角 */ border-radius: 5px; /* 上右下左都切除半徑3px的一小塊——美化導航欄邊角 */ } .nav ul li{ float: left; width: 160px; height: 40px; /* 浮動元素不會填充父元素的高度 */ /* color: white; */ line-height: 40px; /* 行高 */ text-align: center; /* 文本居中對齊 */ } /* a標籤不繼承父元素的color，要給a標籤單獨設置 */ .nav ul li a{ display: block; /* <a>標籤是行內元素不能設寬高，所以轉化爲塊級元素 */ width: 160px; height: 40px; font-size: 18px; color: white; text-decoration: none; /* 去除a標籤默認樣式 */ font-family: "HanziPen SC"; /*字體*/ } .nav ul li a:hover{ /* 僞類選擇器，鼠標懸浮在元素上應用樣式 */ background-color: #E766EA; /* 字體變色 */ font-size: 20px; /* 字體變大 */ } </style> </head> <body> <div class="nav"> <ul> <li> <a href="">網站導航</a> </li> <li> <a href="">網站導航</a> </li> <li> <a href="">網站導航</a> </li> <li> <a href="">網站導航</a> </li> <li> <a href="">網站導航</a> </li> <li> <a href="">網站導航</a> </li> </ul> </div> </body> </html>
其中利用到了以前學的字體、文字等知識完成各類選擇器以下：
.nav{ width: 960px; /* height: 40px; */ overflow: hidden; /* 清除浮動 */ margin: 100px auto 0; /* 上：100px 左右居中 下：0 */ background-color: purple; /* 設置圓角 */ border-radius: 5px; /* 上右下左都切除半徑3px的一小塊——美化導航欄邊角 */ } .nav ul li{ float: left; width: 160px; height: 40px; /* 浮動元素不會填充父元素的高度 */ /* color: white; */ line-height: 40px; /* 行高 */ text-align: center; /* 文本居中對齊 */ } /* a標籤不繼承父元素的color，要給a標籤單獨設置 */ .nav ul li a{ display: block; /* <a>標籤是行內元素不能設寬高，所以轉化爲塊級元素 */ width: 160px; height: 40px; font-size: 18px; color: white; text-decoration: none; /* 去除a標籤默認樣式 */ font-family: "HanziPen SC"; /*字體*/ } .nav ul li a:hover{ /* 僞類選擇器，鼠標懸浮在元素上應用樣式 */ background-color: #E766EA; /* 字體變色 */ font-size: 20px; /* 字體變大 */ }
4、背景屬性
經常使用背景相關屬性：
/*屬性 描述 background-color 規定要使用的背景顏色。 background-image 規定要使用的背景圖像。 background-size 規定背景圖片的尺寸。 background-repeat 規定如何重複背景圖像。 background-attachment 規定背景圖像是否固定或者隨着頁面的其他部分滾動。 background-position 規定背景圖像的位置。 inherit 規定應該從父元素繼承background屬性的設置。*/
一、background-image(背景圖片)和background-repeat(平鋪)
給網頁設置背景圖寫法：
body{ background-image: url("./images/bojie.jpg"); }
背景和平鋪結合使用：
設定背景圖片及各類平鋪代碼示例
上面代碼設置水平方向平鋪並設置padding:100px; 能夠發現padding的區域也供background-image佔用了。
background-repeat取值範圍：
/*值 描述 repeat 默認。背景圖像將在垂直方向和水平方向重複。 repeat-x 背景圖像將在水平方向重複。 repeat-y 背景圖像將在垂直方向重複。 no-repeat 背景圖像將僅顯示一次。 inherit 規定應該從父元素繼承background-repeat屬性的設置。*/
二、background-position(背景圖像位置)
<style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 1500px; height: 1600px; background-image: url(./images/bojie.jpg); background-repeat: no-repeat; /*第一個是水平位置，第二個是垂直位置 正值的時候，第一個值往右偏移，第二個值表示往下偏移 負值則相反 */ /*background-position: 100px 100px;*/ background-position: 100px -100px; } </style>
background-position:200px 100px——第一個是水平位置，第二個是垂直位置
正值的時候，第一個值往右偏移，第二個值表示往下偏移；負值則正好相反。
因爲導入背景圖片的時候，默認就會平鋪。所以須要設置background-repeat: no-repeat;
三、雪碧圖（精靈圖）技術
background-position除了移動位置，更重要的是用來定位切圖，也叫css精靈圖。用處：爲了不網站大量img，請求過多，把不少小圖標合併到一張圖上，而後經過css的background-position切出來須要的圖片。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雪碧圖</title> <style type="text/css"> *{ padding: 0; margin: 0; } box1{ width: 48px; height: 48px; background-image: url("./images/1.png"); background-repeat: no-repeat; background-position: 0 -528px;/*在Photoshop上查看寬高*/ } box2{ width: 48px; height: 48px; background-image: url("./images/1.png"); background-repeat: no-repeat; background-position: 0 -440px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
設置背景圖位置方向：
水平方向： left center right
垂直方向： top center bottom
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 1500px; height: 1600px; border: 1px solid red; background-image: url(./images/bojie.jpg); background-repeat: no-repeat; /*水平方向 left center right 垂直方向 top center bottom */ background-position: center top; } </style> </head> <body> <div> 波多野結衣 </div> </body> </html>
常規寫法：
body{ background-image: url("./images/banner.jpg"); background-repeat: no-repeat; /*水平居中通天banner圖*/ background-position: center top; }
綜合屬性寫法：
body{ /*設置綜合屬性*/ background: red url("./images/banner.jpg") no-repeat center top; }
這個寫法的順序不是固定的，可是水平方向和垂直方向設置必須寫在一塊兒。
四、background-attachment（固定背景圖像）
規定背景圖像是否固定或者隨着頁面的其他部分滾動。
div{ /*綜合屬性*/ width: 1200px; height: 1600px; background: url(./images/bojie.jpg) no-repeat 0 0; /*固定背景*/ background-attachment: fixed; color: white; }
把固定背景屬性也加入綜合屬性：
div{ width: 1200px; height: 1600px; /*綜合屬性*/ background: url(./images/bojie.jpg) no-repeat 0 0 fixed; color: white; }
設置了background-attachment後，下上滾動頁面內容時，背景圖片保持不變。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background-attach</title> <style type="text/css"> div{ /*綜合屬性*/ width: 1200px; height: 1600px; background: url(./images/bojie.jpg) no-repeat 0 0 fixed; /*固定背景*/ /*background-attachment: fixed;*/ color: white; } </style> </head> <body> <div> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> </div> </body> </html>
5、位置屬性
position，定位有三種：
1.相對定位——position:relative;
2.絕對定位——position:absolute;
3.固定定位——position:fixed;
這三種定位，每一種都暗藏玄機，都很是重要，須要一一細講。
6、相對定位：相對於自身位置定位
.box1{ width: 200px; height: 200px; background-color: red; /*若是對當前元素僅僅設置相對定位，那麼與標準流下的盒子沒有什麼區別*/ position: relative; }
若是對當前元素僅僅設置相對定位，那麼與標準流下的盒子沒有什麼分別。
設置相對定位後，就可使用四個方向的屬性：top、left、right、bottom。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: red; /*若是對當前元素僅僅設置相對定位，那麼與標準流下的盒子沒有什麼區別*/ position: relative; /*設置相對定位 咱們就可使用四個方向的屬性 top left right bottom 相對定位：相對於本身原來的自己定位 top:20px; 那麼盒子相對於原來的位置向下移動。相對定位僅僅的微調咱們元素的位置 */ top: 20px; left: 30px; } </style> </head> <body> <!-- 定位有三種： 1.相對定位 2.絕對定位 3.固定定位 這三種定位，每種定位都暗藏玄機，因此咱們要一一單講 position:relative; position:absolute; position:fixed; --> <div class="box1"></div> </body> </html>
top:20px; 那麼盒子相對於原來的位置向下移動。相對定位僅僅的微調咱們元素的位置。
一、相對定位三大特性
1.不脫標——不脫離標準流；
2.形影分離——自己和影子分不開
3.老家留坑——還保留原來的位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相對定位特性</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; } .box1{ background-color: red; } .box2{ background-color: green; position: relative; top: 50px; left: 100px; } .box3{ background-color: blue; } </style> </head> <body> <!--相對定位三大特性 1.不脫標————不脫離標準流 2.形影分離————自己和影子分不開 3.老家留坑————還保留在原來的位置上 會影響頁面的佈局，所以相對定位在頁面中沒有什麼太大的做用。 --> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
能夠看到box3並不會離開本身的位置上移，box2原來的位置依然保留在原處。
所以會影響頁面呃佈局，相對定位在頁面上沒有太大的做用。
咱們不要使用相對定位來作壓蓋效果。
二、相對定位的用途
由於相對定位有坑，佔着茅坑不拉屎，因此通常都不要使用相對定位來作壓蓋效果。
它在頁面中，做用極小，就兩個做用：
1.微調元素位置
2.作絕對定位的參考（父相子絕）講絕對定位會講
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ margin: 100px; } .user{ font-size: 25px; } .btn{ position: relative; top: 0; left: 0; } </style> </head> <body> <!--微調咱們元素位置--> <div> <input type="text" name="username" class="user"> <input type="button" name="" value="點我" class="btn"> </div> </body> </html>
能夠看到輸入框和確認按鈕底邊沒有徹底對齊，設置relative微調後，實現對齊。
7、絕對定位
絕對定位的盒子：1.脫標（脫離標準流）
2.作遮蓋效果，提高層級
3.設置絕對定位以後，不區分行內元素和塊級元素，都能設置寬高.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>絕對定位特性</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; } .box1{ background-color: red; /*絕對定位的盒子：1.脫標（脫離標準流） 2.作遮蓋效果，提高層級 3.設置絕對定位以後，不區分行內元素和塊級元素，都能設置寬高 */ position: absolute; } .box2{ background-color: green; } .box3{ background-color: blue; } span{ width: 100px; height: 100px; background-color: pink; position: absolute; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <span>文字</span> </body> </html>
執行效果如上圖所示，box1設置爲絕對定位後，box1脫標後box2上移，可是box1層級更高，產生遮蓋效果，所以只顯示了紅色(box1)和藍色(box3)。
<span>是行內標籤，原本是不能設置寬高的，可是設置絕對定位後，設置寬高生效。
一、絕對定位參考點
參考點這個問題比較難理解，示例代碼以下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /**{*/ /*padding: 0;*/ /*margin: 0;*/ /*}*/ body{ width: 100%; height: 2000px; border: 10px solid green; } .box{ width: 200px; height: 200px; background-color: red; /*絕對定位參考點：當我使用top屬性描述的時候 是以頁面的左上角（跟瀏覽器的左上角區分）爲參考點來調整位置 當我使用bottom屬性描述得時候，以首屏左下角爲參考點 */ position: absolute; /*top: 100px;*/ bottom: 100px; left: 18px; } </style> </head> <body> <div class="box"> </div> </body> </html>
絕對定位參考點：
(1)當使用top屬性描述的時候，是以頁面的左上角（跟瀏覽器的左上角區分）爲參考點來調整位置。
在滾動頁面時，box跟着body一塊兒上下移動，它的參考點是針對的瀏覽器的左上角。
如何肯定參考點是瀏覽器？
box的left設置的是18px，body的邊框(border)寬度是10px，body的margin寬度是8px。正好完成貼邊，所以能夠看出是針對瀏覽器移動。
(2)當使用bottom屬性描述得時候，以首屏左下角爲參考點
能夠看到在從下往上縮小瀏覽器時，box跟着往上移動，始終保持與首屏左下角的絕對距離。
所以能夠看出上下滾動頁面時，box跟着瀏覽器移動也是相對首屏移動的。
二、絕對定位以父輩盒子做參考點
父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角爲參考點。
這個父輩元素不必定是爸爸，也能夠是爺爺（曾爺爺）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; border: 5px solid red; margin: 100px; /*給父盒子設置相對定位*/ position: relative; padding: 50px; } .box2{ width: 300px; height: 300px; background-color: green; position: relative; } .box p{ width: 100px; height: 100px; background-color: pink; /*子元素設置了絕對定位*/ position: absolute; top: 0px; left: 0px; } /*父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角爲參考點。 這個父輩元素不必定是爸爸，也能夠是爺爺（曾爺爺）。 */ /*爺爺級設置了相對定位，父級也設置相對定位，兒子設置了絕對定位，那麼是以父級爲參考點*/ </style> </head> <body> <div class="box"> <div class="box2"> <p></p> </div> </div> </body> </html>
爺爺設置了相對定位，父也設置相對定位，兒子設置了絕對定位，那麼是以父做爲參考點。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; border: 5px solid red; margin: 100px; /*給父盒子設置相對定位*/ position: relative; padding: 50px; } .box2{ width: 300px; height: 300px; background-color: green; /*position: relative;*/ } .box p{ width: 100px; height: 100px; background-color: pink; /*子元素設置了絕對定位*/ position: absolute; top: 0px; left: 0px; } /*父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角爲參考點。 這個父輩元素不必定是爸爸，也能夠是爺爺（曾爺爺）。 */ /*爺爺級設置了相對定位，父級也設置相對定位，兒子設置了絕對定位，那麼是以父級爲參考點*/ /*爺爺級設置相對定位，父級沒有設置定位，兒子設置了絕對定位，那麼是以爺爺級爲參考點*/ </style> </head> <body> <div class="box"> <div class="box2"> <p></p> </div> </div> </body> </html>
爺爺設置相對定位，父沒有設置定位，兒子設置了絕對定位，那麼是以爺爺爲參考點。
總結：
若是父親設置了定位，那麼以父親爲參考點；若是父親沒有設置定位，那麼以祖宗元素中設置定位最近的做爲參考點。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; border: 5px solid red; margin: 100px; /*給父盒子設置絕對定位*/ position: absolute; padding: 50px; } .box p{ width: 100px; height: 100px; background-color: pink; /*子元素設置了絕對定位*/ position: absolute; top: 0px; left: 0px; } </style> </head> <body> <div class="box"> <p></p> </div> </body> </html>
能夠看到不只僅是父相子絕，父絕子絕、父固子固也都是以父輩元素爲參考點。
注意：
一、父絕子絕沒有實在乎義，作站的時候不會出現父絕子絕。由於絕對定位脫離標準流，影響頁面的佈局。
二、相反父相子絕在頁面佈局中，是經常使用的佈局方案。由於父親設置相對定位，不脫離標準流，子元素設置絕對定位，僅僅是在當前父輩元素內調整位置信息。
三、絕對定位的盒子無視父輩的padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>無視父輩padding</title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ width: 300px; height: 300px; margin: 100px; border: 10px solid red; position: relative; /*padding: 50px;*/ } .father p{ width: 100px; height: 100px; background-color: yellow; position: absolute; top: 0px; left: 0px; } </style> </head> <body> <div class="father"> <p></p> </div> </body> </html>
能夠看到的是：
當父盒子不設置定位，子盒子設置絕對定位時：子盒子浮動與父盒子位置不相干。
當父盒子設置相對定位，子盒子設置絕對定位時：子盒子在父盒子內調整位置，但父盒子padding的設置僅僅是擴大了父盒子的大小，不會影響子盒子。以下圖所示：
當父盒子設置爲絕對定位、子盒子設置絕對定位，效果同上。
四、絕對定位盒子居中
通常要實現元素居中都是運用的margin:0 auto;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>絕對定位盒子居中</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 100%; /* 繼承body的100%的寬度 */ height: 69px; background-color: #000; } .box .c{ width: 960px; height: 69px; background-color: pink; margin: 0 auto; position: absolute; /* 設置絕對定位後居中失效 */ left: 50%; margin-left: -480px; /*設置絕對定位以後，margin:0 auto;不起任何做用 若是想讓絕對定位的盒子居中。當作公式記下來 設置元素絕對定位,left:50%; margin-left等於元素寬度的一半，實現絕對定位盒子居中 */ } </style> </head> <body> <div class="box"> <div class="c"></div> </div> </body> </html>
設置絕對定位以後，margin:0 auto;是不起任何做用的。
若是想讓絕對定位的盒子居中。當作公式記下來：設置元素絕對定位,left:50%;margin-left等於元素寬度的一半，實現絕對定位盒子居中。
p{ width: 960px; position: absolute; left: 50%; margin-left: -480px; /*width的一半*/ }
8、固定定位
固定定位：固定當前的元素不會隨着頁面滾動而滾動。
特性：一、脫標 二、提高層級（壓蓋效果） 三、不會隨頁面滾動而滾動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定定位</title> <style type="text/css"> *{ padding: 0; margin: 0; } p{ width: 100px; height: 100px; background-color: red; /*固定定位:固定當前的元素不會隨着頁面滾動而滾動， 特性：一、脫標 二、提高層級（壓蓋效果） 三、不會隨頁面滾動而滾動 參考點：設置固定定位用top描述，那麼是以瀏覽器的左上角設爲參考點 若是用bottom描述那麼是以瀏覽器的左下角爲參考點（注意與絕對定位的區別） 做用：1.返回頂部欄；2.固定導航欄；3.小廣告 */ position: fixed; /*top: 100px;*/ bottom: 100px; /*left: 100px;*/ right: 40px; } </style> </head> <body> <div> <p></p> <img src="./images/bojie.jpg" alt=""> <img src="./images/bojie.jpg" alt=""> <img src="./images/bojie.jpg" alt=""> <img src="./images/bojie.jpg" alt=""> <img src="./images/bojie.jpg" alt=""> <img src="./images/bojie.jpg" alt=""> </div> </body> </html>
參考點：設置固定定位用top描述，那麼是以瀏覽器的左上角設爲參考點；
若是用bottom描述那麼是以瀏覽器的左下角爲參考點（注意與絕對定位的區別）
做用：1.返回頂部欄；2.固定導航欄；3.小廣告
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定定位</title> <style type="text/css"> *{ padding: 0; margin: 0; } p{ width: 100px; height: 100px; background-color: red; position: fixed; bottom: 100px; right: 40px; line-height: 100px; font-size: 20px; text-align: center; color: #FFF; } </style> </head> <body> <div> <p>返回頂部</p> <img src="./images/bojie.jpg" alt=""> <img src="./images/bojie.jpg" alt=""> <img src="./images/bojie.jpg" alt=""> <img src="./images/bojie.jpg" alt=""> <img src="./images/bojie.jpg" alt=""> <img src="./images/bojie.jpg" alt=""> </div> <script src="./js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function () { //JavaScript後面會講 $('p').click(function () { $('html').animate({ "scrollTop":0 },2000) }) }) </script> </body> </html>
另外用一個示例來展現固定導航欄：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定導航欄</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } a{ text-decoration: none; } body{ /*給body設置導航欄的高度，來顯示下放圖片的整個內容*/ padding-top: 49px; } .wrap{ width: 100%; height: 49px; background-color: #000; /*給父盒子設置固定定位，必定必定要加top屬性和left屬性*/ position: fixed; top: 0; left: 0; } .wrap .nav{ width: 960px; height: 49px; margin: 0 auto; } .wrap .nav ul li{ float: left; width: 160px; height: 49px; text-align: center; /*中間對齊*/ } .wrap .nav ul li a{ width: 160px; height: 49px; display: block; color: #FFF; font: 20px/49px "Hanzipen SC"; /*大小、行高(讓文字垂直居中) 字體*/ background-color: paleturquoise; } .wrap .nav ul li a:hover{ /*選擇鼠標指針浮動在其上的元素，並設置其樣式*/ background-color: #FC4838; font-size: 22px; } </style> </head> <body> <div class="wrap"> <div class="nav"> <ul> <li> <a href="#">網頁開發</a> </li> <li> <a href="#">網頁開發</a> </li> <li> <a href="#">網頁開發</a> </li> <li> <a href="#">網頁開發</a> </li> <li> <a href="#">網頁開發</a> </li> <li> <a href="#">網頁開發</a> </li> </ul> </div> </div> <img src="./images/bojie.jpg" alt=""> <img src="./images/bojie.jpg" alt=""> <img src="./images/bojie.jpg" alt=""> <img src="./images/bojie.jpg" alt=""> <img src="./images/bojie.jpg" alt=""> <img src="./images/bojie.jpg" alt=""> <img src="./images/bojie.jpg" alt=""> <img src="./images/bojie.jpg" alt=""> <img src="./images/bojie.jpg" alt=""> </body> </html>
在給warp設置固定定位後，圖片背景最上面的圖片會有一部分被導航欄遮蓋。wrap和img都是body的子元素。給body設置padding-top，也就給body設置了導航欄高度，來顯示下放圖片的內容。
注意：給父盒子設置固定定位，必定必定要加top屬性和left屬性。
9、z-index屬性
一、z-index的四大特性
一、z-index值表示誰壓着誰，數值大的壓蓋住數值小的。z-index值沒有單位，就是一個正整數，默認的z-index值爲0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>z-index</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 200px; height: 200px; background-color: red; position: relative; top: 30px; left: 40px; z-index: 3; } .box2{ width: 200px; height: 200px; background-color: yellow; position: relative; top: 0; left: 0; z-index: 2; } </style> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> </body> </html>
能夠看到原本在都設置定位的狀況下是box2壓蓋box1，在給box1的z-index設置爲3，box2的z-index設置爲2後，
數值更大的box1壓蓋box2。
二、只有定位了的元素，纔能有z-index，也就是說無論是相對定位仍是絕對定位或固定定位，均可以使用z-index，而浮動元素不能使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>z-index</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 200px; height: 200px; background-color: red; position: relative; top: 30px; left: 40px; z-index: 3; } .box2{ width: 200px; height: 200px; background-color: yellow; position: relative; top: 0; left: 0; z-index: 2; } .box3{ width: 200px; height: 200px; background-color: green; float: left; margin: -30px 0 0 20px; z-index: 5; } </style> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> </body> </html>
能夠看到box3沒有定位可是設置了z-index值爲5，數值最高，但實際沒有起到任何做用。box3依然被box2壓蓋。
三、若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，誰在上面壓着別人，定位了的元素永遠壓住沒有定位的元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>z-index</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 200px; height: 200px; background-color: red; position: relative; top: 30px; left: 40px; } .box2{ width: 200px; height: 200px; background-color: yellow; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
能夠看到定位了的元素box1壓蓋沒有定位的元素box2。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>z-index</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 200px; height: 200px; background-color: red; position: relative; top: 30px; left: 40px; } .box2{ width: 200px; height: 200px; background-color: yellow; position: relative; } </style> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> </body> </html>
在box1和box2都定位了以後，在沒有設置z-index的狀況下，寫在HTML後面的box2壓着box1。
四、從父現象：父親慫了，兒子再牛逼也沒用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>從父現象</title> <style type="text/css"> *{ margin: 0; padding: 0; } .tianliang{ width: 200px; height: 200px; background-color: red; position: relative; z-index: 3; } .tianliang .sendie{ width: 100px; height: 100px; background-color: pink; position: absolute; top: 240px; left: 300px; z-index: 333; } .linzy{ width: 200px; height: 200px; background-color: yellow; z-index: 2; } .linzy .brother{ width: 100px; height: 100px; background-color: green; position: absolute; top: 260px; left: 330px; z-index: 222; } p{ font-size: 12px; } </style> </head> <body> <div class="tianliang"> tianliang:3 <p class="sendie">tianliang-son:333</p> </div> <div class="linzy"> linzy:5 <p class="brother">linzy-son:222</p> </div> </body> </html>
能夠看到在上例中tianliang兒子的z-index值是大於linzy兒子的。可是因爲linzy的z-index值大於tianliang。所以依然是linzy-son壓蓋tianliang-son。
二、z-index的應用
在某些元素遮蓋導航欄，或者某些元素沒有在頁面顯示的時候。能夠經過增長z-index的方式解決。
相關文章
- 1. 前端之CSS——屬性和定位
- 2. CSS之position（定位）屬性
- 3. CSS-定位屬性
- 4. CSS定位屬性
- 5. css定位屬性
- 6. CSS定位屬性？
- 7. Css定位屬性
- 8. CSS 定位屬性
- 9. 前端——CSS之浮動和定位
- 10. CSS中的定位屬性
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端之CSS——屬性和定位
- 2. CSS之position（定位）屬性
- 3. CSS-定位屬性
- 4. CSS定位屬性
- 5. css定位屬性
- 6. CSS定位屬性？
- 7. Css定位屬性
- 8. CSS 定位屬性
- 9. 前端——CSS之浮動和定位
- 10. CSS中的定位屬性