標籤：布局 參考 ie11 -o 版本 元素 如何 關係 visible
上節回顧上一節學習的內容，有一下幾點，可以注意一下。或者說推薦這麼做。
class可以設定多個值-css樣式重用可以給一個標籤設定多個class值，這樣我們可以為每個class應用一種樣式。標籤有多個class的話，就為這個標籤應用了多個樣式。並且之後別的標籤要求重用其中的部分樣式，只需要設定那個class就好了。
要設定多個class的值，只需要用空格隔開每個值即可。下面的例子分別設定了背景色、高度、寬度、外框，然後div的設定了多個class：
<head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: red; } .c2{ height: 50px; } .c3{ width: 200px; } .c4{ border: 3px solid black; } </style></head><body><div class="c1 c2 c3 c4"></div><div class="c1 c2 c4"></div></body>把整個網頁先從上到下分成若干塊，每一塊都按下面的思路。
先寫第一層div，可以設定背景色，如果有需要設定高度（height）和垂直置中（line-height），設了高度就是固定的高度，我們要確保內部的元素不會超出。不設高度，這個div的高度就靠內部的元素撐起來。
不要設定寬度。讓它可以撐滿一整塊。
再寫第二層div，這個設定一個像素的寬度。這樣你整塊的內容都限制在這個地區內。如果頁面寬度太小，頁面下方會出現捲軸，而不會導致這裡面的內容會混亂。
第三層開始可以寫你的內容，可以繼續用div也可以用別的標籤，寬度可以使用百分比了。繼續用像素也ok，不過如果第二次的寬度要調整，並且裡面寬度用的是百分比的話，貌似就是自動調整好了。如果用了float，最後不要忘記clear。
<body><div class="lv1" style="background-color: #dddddd;height: 48px;line-height: 48px;"> <div class="lv2" style="width: 800px;"> <div style="width: 30%;float: left;">左邊的內容</div> <div style="width: 70%;float: left;">中間的內容</div> <div style="clear: both;"></div> </div></div></body>在a標籤裡的img標籤（圖片），可能在IE上開啟的時候，在最外面有一圈藍色的邊框。雖然我在自己的IE11上試了，並沒有，可能舊版本還有這個問題。這個邊框的顏色應該就是超連結字型的顏色，我們所要做的就是把img外面這個邊框去掉。做法也很簡單，寫一個img的標籤選取器，設定border為0就沒有邊框了。我們可以總是在head裡加上這麼一個標籤選取器來避免這個問題，而不用擔心對沒有類似問題的用戶端會有什麼影響：
<head> <meta charset="UTF-8"> <title>Title</title> <style> img{ border: 0; } </style></head><body><a href="http://www.51cto.com/"> <img src="logo.jpg" /></a></body>上一節的css內容並沒有講完，這節繼續講後續的內容。
定位-positionposition 屬性定義建立元素布局所用的定位機制。
fixed-固定在視窗的某個位置position: fixed; ：固定在視窗的某個位置。結合top、right、botom、left，確定固定的位置。
在頁面右下角放置一個返回頂部的按鈕，用position定位：
<head> <meta charset="UTF-8"> <title>Title</title> <style> .gotop{ width: 45px; height: 45px; background-color: black; color: yellow; position: fixed; right: 15px; bottom: 60px; } </style></head><body><div style="height: 2000px;background-color: #dddddd"></div><div class="gotop">返回頂部</div></body>這裡並不能實現返回頂部的效果，我們還需要後面才會學的JavaScript才能實現點擊之後返回頁面頂部。
再來實現一個始終顯示在頁面頂部的菜單：
<head> <meta charset="UTF-8"> <title>Title</title> <style> .bar{ height: 48px; line-height: 48px; background-color: red; position: fixed; top: 0; left: 0; right: 0; } </style></head><body style="margin: 0 auto"><div class="bar">菜單</div><div class="bar" style="top: 50px;left: unset;right: unset;">菜單2</div><div style="height: 2000px;background-color: #dddddd;margin-top: 100px">主要內容</div></body>和之前學的float一樣，這裡使用position樣式之後，div也不再撐滿一整行了。我們通過設定left和right屬性，讓他往兩邊都撐滿了。下面的菜單2是沒有設定left和right的效果。
另外，因為使用position，會有一個分層的效果。下面的div標籤的內容也是從頁面頂部開始顯示的。為了不讓菜單蓋住主要內容，我們給下面的div設定了外邊距（margin-top）。分開了兩部分的內容。
這個和fixed都是決定定位。所以主要來看看和fixed的差別。把上面的返回頂部的例子裡的position屬性修改為absolute，看看效果。乍一看，貌似一樣，但是如果滾動滾輪，就是發現，他會一起移動。也就是absolute絕對位置了之後，就會固定在父級元素之上。
把上面菜單的例子也改成absolute，菜單依然在頁面頂上，但是往下流量頁面 後，菜單就會向上滾出螢幕了。
ablolute單獨的應用情境不多，主要是結合下面要將講的相對定位一起使用。把一個元素絕對位置到另一個相對定位的元素上。
上面測試absolute的時候提到，他是絕對位置到它的父級元素上的。上面的例子中實際是決定定位在了整個頁面上。如果要將它定位在另外一個元素裡，簡單的在外層加上一個元素標籤是沒用的。還需要在元素上加上 position: relative; 這個屬性，才會被識別為 absolute 的父級標籤。
<body><div style="height: 50px;width: 100px;border: 1px solid black;position: relative;"> <div style="background-color: red;position: absolute;bottom: 0;left: 0;right: 0;">相對定位</div></div></body>設定位移量：這裡也有top、right、bottom、left屬性。這裡設定的位移量。如果設定位移屬性，就是相對於其正常位置所進行的位移。
定位在螢幕中間用了position屬性之後，通過 margin: 0 auto 無法實現置中了。那麼現在置中要怎麼做呢。
位移量的屬性不但可以使用像素（px），也是可以使用百分比的。設定為50%自然就置中了。但是這裡定位是元素的起始位置，即左上方而不是中心。所以還得計算元素高度和寬度的一半，用外邊距把元素撐回去：
<body><div style="background-color: red;height: 80px;width: 80px;position: fixed;top: 50%;left: 50%;margin-top: -40px;margin-left: -40px;">正中間</div></body>元素應用了position屬性之後，就會出現分層的情況。position元素會始終位於其他標準元素的上層。如下的例子，無論div的先後順序如何，都是position元素在上層：
<body><div style="position: fixed;top: 20px;left: 20px;background-color: red;height: 70px;width: 70px;"></div><div style="height: 100px;width: 100px;background-color: blue;"></div></body>如此，我們就把頁面分成了2層。那麼有2層，就能有3層甚至多層。
z-index 屬性，設定元素的堆疊順序。僅能在定位元素上奏效（例如 position:absolute;）。數值越大，處於外層，可以是負數。不設定的話應該是0
<body><div style="z-index: 10;position: fixed;top: 30px;left: 30px;background-color: yellow;height: 50px;width: 50px;"></div><div style="z-index: 5;position: fixed;top: 20px;left: 20px;background-color: red;height: 70px;width: 70px;"></div><div style="height: 100px;width: 100px;background-color: blue;"></div></body>例子中，如果不設定z-index，或者值設定的一樣，那麼層級的關係就是不確定的。調整標籤的順序，效果會不一樣（後面的標籤會蓋住前面的）。設定了z-index後，我們就能確定定位元素的層級關係。
透明度-opacity上面已經學了網頁的層級，下層的頁面會被上層的頁面覆蓋掉。這裡我們可以設定標籤的opacity屬性，使得上層頁面不是完全覆蓋下面的內容，而是有一點的透明度。
opacity 屬性，透明度。取值範圍從 0.0 （完全透明）到 1.0（完全不透明）。
<body><div style="font-size: 48px">網頁的內容</div><div style="opacity: 0.8;background-color: #dddddd;position: fixed;top: 0;left: 0;bottom: 0;right: 0"></div></body>我們可以設計一個這樣的頁面。平時顯示正常的內容（這是第一層）。當我們點擊了一個按鈕需要提交資料的時候，這時候需要屏蔽掉使用者對之前的頁面內容的操作。這時候出現一個第二層，半透明的覆蓋層，就如透明度裡的例子那樣。然後再在頁面的中間彈出一個表單（第三層），讓使用者提交資料。這三層的代碼大概是這樣的：
<head> <meta charset="UTF-8"> <title>Title</title> <style> .lv1{ background-color: aquamarine; font-size: 64px; } .lv2{ background-color: #dddddd; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 2; opacity: 0.8; } .lv3{ height: 50px; width: 100px; position: fixed; top: 30px; left: 50%; z-index: 3; margin-left: -50px; } .disappear{ display: none; } </style></head><body><div class="lv1">網頁的內容</div><div class="lv2 disappear"> <!--覆蓋掉網頁的內容的半透明層--></div><div class="lv3 disappear"> <form action="https://www.baidu.com/s"> <input type="text" name="wd" title="搜尋內容" /> <input type="submit" value="搜尋" /> </form></div></body>直接開啟頁面，應該只顯示了第一層的內容，另外兩層暫時設定了 display :none; 隱藏了。這裡JS還沒學，網頁的內容裡可以加上一個按鈕，觸發一個JS，修改一下.disappear裡的display屬性，改成unset（就是沒有設定）。這裡我們只能暫時先手動改一下看一下效果了。修改後，第二層和第三層的內容就都顯示出來了。先覆蓋掉頁面的內容，此時使用者無法在選擇第一層的內容了。然後中間是彈出的互動介面，使用者可以輸入內容提交表單，或者是以後會學的其他互動內容。
先來看一下顯示圖片的例子。找一張大一點的圖片，然後放在一個div裡。div設定小一點的高度和寬度。效果如下：
<body><div style="height: 100px;width: 80px;"> <img src="1.jpg" /></div><div style="background-color: red;">看看這個內容在哪裡</div></body>這裡雖然div設定了範圍，但是div中的圖片會按照正常尺寸顯示出來，並沒有受到上一層div標籤尺寸的限制，即溢出了。後面還加了一個div，可以看到是接在前一個div的範圍後顯示的。
要處理這個問題，我們可以為圖片也設定一個尺寸，比如：style="height: 100%" 。這樣可以顯示出整張完整的圖片，但是會自適應一個尺寸。
這裡要講的是通過在div裡設定overflow屬性，來處理溢出內容的處理規則（圖片尺寸不變）。overflow: hidden; ：內容會被修剪，並且其餘內容是不可見的。overflow: auto; ：如果內容被修剪，則瀏覽器會顯示捲軸以便查看其餘的內容。overflow: scroll; ：同上，和auto一樣。
這裡拿圖片舉例，但是實際應用中，各種可能會有溢出的情況都可以這麼處理。一般圖片的處理更多的應該是設定一個img的尺寸，做一下縮放。而在一個有限大小的地區內要顯示很多的文字，更加適合用overflow：
<body><div style="background-color: #dddddd;height: 100px;width: 150px;overflow: auto;"> 這個屬性定義溢出元素內容區的內容會如何處理。 如果值為 scroll 或 auto，則會提供一種滾動機制。 如果值為 hidden，則溢出的部分會被修剪並隱藏。 預設值是 visible。</div>當滑鼠移動到元素上時，才會生效的css屬性。下面是一個菜單的例子，應用了hover實現了當滑鼠放上去的時候，指向的那項會改變樣式：
<head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ position: fixed; top: 0; left: 0; right: 0; height: 48px; line-height: 48px; background-color: blue; } .pg-body{ margin-top: 48px; } .w{ width: 980px; margin: 0 auto; } .pg-header .menu{ color: white; /*預設行內標籤不能設定高度，*/ /*這裡設定了display: inline-block;，*/ /*這樣標籤就能有高度了*/ /*這樣a標籤就撐滿了整個地區。*/ /*這裡也沒設定具體的高度，貌似預設就撐滿了。*/ display: inline-block; padding: 0 10px; } .pg-header .menu:hover{ background-color: green; color: red; } </style></head><body><div class="pg-header"> <div class="w"> <a class="menu">檔案</a> <a class="menu">編輯</a> <a class="menu">查看</a> <a class="menu">收藏</a> </div></div><div class="pg-body"> <div class="w">主要的內容</div></div></body>另外這裡a標籤樣式的設定也值得參考。這裡設定了 display: inline-block; ，使得a標籤的高度可以撐滿整個div的高度。如果注釋掉display，a標籤的高度就只有文字的那點高度（可以通過滑鼠移至上方看到效果）。橫向的寬度這裡推薦是用內邊距（padding）撐開的。
之前都是用background設定背景色，我們也可以用圖片當背景。代碼如下：
<body><div style="background-image: url(‘1.jpg‘);height: 800px;width: 600px"></div></body>這裡的效果會重複使用這張圖片平鋪在整個地區中。圖片的比例不變，多出的部分會裁剪掉。
網頁漸層色背景利用平鋪的特性，可以實現漸層色背景的效果。做一個寬1像素，長1000像素的漸層圖片，在這張圖片裡搞好漸層，然後作為背景圖片。被平鋪之後，就是一個漸層色背景了。這個方法應該是通用的。
限制平鋪的方向在上面的基礎上，再增加一個background-repeat屬性可以顯示圖片進行平鋪。
<body><div style="background-image: url(‘1.jpg‘);height: 800px;width: 600px;background-repeat: no-repeat"></div></body>background-repeat: no-repeat ：不允許平鋪background-repeat: repeat-x ：只能橫向平鋪background-repeat: repeat-y ：只能縱向平鋪
有這麼一張圖：
好吧，是很多個小表徵圖拼成的一張圖，現在要顯示其中的一個表徵圖。我們可以這麼做：
<body><div style="background-image: url(‘2.png‘);background-repeat: no-repeat;border: 1px solid black;height: 20px;width: 20px;"></div></body>這樣顯示第一個表徵圖沒問題，如果要顯示下面的表徵圖，我們需要把圖片往上移，這就用到了background-position屬性，給背景圖做一個定位：
<body><div style="background-image: url(‘2.png‘);background-repeat: no-repeat;background-position: 1px -119px;border: 1px solid black;height: 20px;width: 20px;"></div></body>background-position-x 和 background-position-y 是單獨調整x軸和y軸。
上面的background屬性還可以簡寫成這樣：background: url(2.png) 1px -119px no-repeat; ，圖片路徑、縱向位移、橫向位移、是否平鋪。
這樣做的好處是，一次請求就獲得了好幾個表徵圖，減少了用戶端和服務端的互動次數。如果每一個小表徵圖都儲存一張獨立的圖片，那麼每次要擷取到一個新表徵圖可能還會發起一次請求。所以對於這種小表徵圖可以拼接在一張圖中使用。
做一個右邊有表徵圖的input框，類似這樣的：
運用上面講的定位和背景圖片的方法，把表徵圖定位到方框的右邊。
這裡要注意，input的文字的輸入範圍右邊要小於整個邊框的範圍，否則最右邊的內容會被表徵圖擋住。
<body><div style="height: 24px;width: 150px;position: relative;"> <input type="text" style="height: 24px;width: 125px;padding-right: 25px;" /> <span style="background: url(2.png) 1px -119px no-repeat; display: inline-block; height: 20px;width: 20px; position: absolute;top: 5px;right: 0;"></span></div></body>Python自動化開發學習15-css補充內容
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
