CSS 復習與擴展(二) · 地表最強JS文檔

[toc] # 繼承 > 基于繼承機制，樣式不僅應用到指定的元素，還會應用到它的后代元素。 > 例如，如果向一個 h1 元素應用一個顏色，那么這個顏色將應用到 h1 中的所有文本，甚至應用到該 h1 的子元素中的文本 ```html <!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>Document</title> <style> h1 { color: red; } </style> </head> <body> <h1> hello <span>world</span> </h1> </body> </html> ``` 繼承對無序列表也適用 ```html <!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>Document</title> <style> ul { color: red; } </style> </head> <body> <ul> <li>this is li 0</li> <li>this is li 1</li> <li>this is li 2</li> <li>this is li 3</li> <li>this is li 4</li> <li>this is li 5</li> <li>this is li 6</li> <li>this is li 7</li> </ul> </body> </html> ``` 關于繼承和優先級 ```html <!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>Document</title> <style> div { color: yellow; } ul { color: red; } </style> </head> <body> <div> <ul> <li>this is li 0</li> <li>this is li 1</li> <li>this is li 2</li> <li>this is li 3</li> <li>this is li 4</li> <li>this is li 5</li> <li>this is li 6</li> <li>this is li 7</li> </ul> </div> </body> </html> ``` 所有屬性均可繼承? ```html <!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>Document</title> <style> .div1 { border: 10px solid red; width: 300px; height: 300px; background: #000; } .div2 { width: 200px; height: 200px; background: yellow; } </style> </head> <body> <div class="div1"><div class="div2"></div></div> </body> </html> ``` > 如果邊框能繼承，文檔會變得非常混亂，除非另外花功夫去掉繼承的邊框大多數框模型屬性（包括外邊距、內邊距、背景和邊框）都不能繼承，其原因是一樣的。 _繼承的值根本沒有特殊性，甚至連 0 特殊性都沒有_ ```html <!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>Document</title> <style> * { color: red; } h1#name { color: black; } </style> </head> <h1 id="name"> 云和 <em>數據</em> </h1> <p>歡迎來到前端的世界!</p> </html> ``` 清除默認樣式, 應該這么寫 ```css html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, p { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } ``` ## 層疊如果特殊性相等的兩個規則同時應用到同一個元素會怎么樣呢？瀏覽器如何解決這個沖突 ```css h1 { color: red; } h1 { color: blue; } ``` 按順序, 越后出現, 權重卻大(覆蓋) 為什么內部樣式, 優先級高于外部樣式?(一般情況下) > 如果樣式表中有導入的樣式表，一般認為出現在導入樣式表中的聲明在前，主樣式表中的所有聲明在后 **但是, 需要注意, 誰近, 誰的優先級越高** ## 顏色的三種定義方式 1. RGB 2. 16 進制 3. 單詞命名透明度 ```html <!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>Document</title> <style> .div1 { width: 200px; height: 200px; background: rgba(197, 240, 4, 0.5); z-index: 100; float: left; position: absolute; } .div2 { width: 100px; height: 100px; z-index: 0; float: left; position: absolute; } </style> </head> <body> <div class="div1"></div> <div class="div2">hello world</div> </body> </html> ``` ![alt](https://box.kancloud.cn/4dda0b7dc3a647410766a777d25a8b0f_649x223.png) ## 文本水平對齊 ```html <!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>Document</title> <style> div { border: 1px red solid; text-align: center; } </style> </head> <body> <div>hello world</div> </body> </html> ``` ## 文本垂直對齊 ```html <!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>Document</title> <style> div { border: 1px red solid; text-align: center; height: 200px; } p { line-height: 200px; margin: 0; padding: 0; } </style> </head> <body> <div><p>hello world</p></div> </body> </html> ``` # CSS 布局奇技淫巧之--各種居中 ## margin:auto ```html <!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>Document</title> <style> div { width: 500px; height: 500px; border: 1px solid red; margin-left: auto; margin-right: auto; /* 相對定位不影響居中, 絕對定位和浮動會影響居中 */ position: relative; } </style> </head> <body> <div></div> </body> </html> ``` ```html <!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>Document</title> <style> div { width: 500px; height: 500px; border: 1px solid red; /* 最重要, 左右 auto */ margin: 0 auto; } </style> </head> <body> <div></div> </body> </html> ``` ```html <!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>Document</title> <style> body { /* 需要寫在父級, ie6,7 不限制 */ text-align: center; } div { width: 500px; height: 500px; border: 1px solid red; } </style> </head> <body> <div></div> </body> </html> ``` ```html <!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>Document</title> <style> body { /* 需要寫在父級, ie 5, 6, 7 不限制 */ text-align: center; } div { width: 500px; height: 500px; border: 1px solid red; } </style> </head> <body> <div></div> </body> </html> ``` ## 使用 line-height 讓單行的文字垂直居中(注意: 只能垂直居中一行) ```html <!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>Document</title> <style> div { border: 1px red solid; text-align: center; height: 200px; } p { line-height: 200px; margin: 0; padding: 0; } </style> </head> <body> <div> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, repellat dolore quidem sunt quaerat tempore quis aperiam neque nostrum commodi deserunt fuga tenetur atque maxime velit modi ad laboriosam officia? Quam commodi tempore iure! Animi, deserunt dolore! Nam, praesentium molestiae? Aut deleniti labore error, iusto quis nam vero, repellendus, nemo voluptatibus porro architecto! Assumenda consectetur impedit, consequatur minima hic quam! Deleniti doloremque alias veritatis perferendis nemo placeat a tempore qui possimus recusandae blanditiis odit, quia sit temporibus quod voluptatem similique. Vero aperiam harum aut accusantium unde hic, consequuntur accusamus culpa. Molestias sunt odit, similique odio id voluptatum velit fugiat inventore dicta consequuntur eaque, ipsa laboriosam, ipsam sed sequi reprehenderit illo aliquid hic. A iste minus nisi accusantium. Minus, rem rerum? Cumque expedita exercitationem unde, possimus aperiam ratione ad, iure qui sed error nemo alias temporibus adipisci fugit. Sapiente adipisci ab amet? Enim, nam repellat distinctio nostrum voluptatibus voluptatum blanditiis delectus? Ut cupiditate voluptates ipsum eius omnis iusto est quod facilis! Saepe, totam pariatur optio delectus esse aperiam ad eveniet, voluptatum veniam repudiandae maiores necessitatibus similique? Consectetur maiores ex accusamus nesciunt? Minima itaque ipsam magnam doloremque iusto dolorum explicabo quaerat molestias accusantium, repellendus consectetur repellat quibusdam quis sunt rem quisquam consequatur atque rerum enim in incidunt! Repudiandae inventore a nesciunt reiciendis! Quis similique modi doloribus rem nostrum laudantium? Totam voluptas quaerat, iure, tempore nobis earum voluptatibus veritatis, sapiente eveniet reiciendis accusamus non deserunt incidunt culpa alias et delectus doloribus natus nulla. Perferendis voluptate odio repellat similique, commodi facere debitis labore non vero et suscipit illo dicta esse cumque error omnis harum quidem deleniti impedit sit excepturi veniam iusto. Harum, quo soluta. Deserunt molestias necessitatibus unde atque! Corrupti, id saepe maiores delectus illo eos et nesciunt, molestiae ut ipsa adipisci odio optio cumque voluptatibus repellendus dolorem architecto reprehenderit beatae quidem? Vitae, assumenda? </p> </div> </body> </html> ``` ```html <!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>Document</title> <style> td { height: 200px; width: 200px; border: 1px solid red; } div { width: 100px; height: 100px; background: #000; /* display: inline-block; */ } </style> </head> <body> <table> <tr> <td align="center"><div></div></td> </tr> </table> </body> </html> ``` 使用 table 的水平居中和垂直居中 ```html <!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>Document</title> <style> .div1 { width: 200px; height: 200px; border: 1px solid red; display: table-cell; vertical-align: middle; text-align: center; } .div2 { width: 50px; height: 50px; background: #000; display: inline-block; } </style> </head> <body> <div class="div1"><div class="div2"></div></div> </body> </html> ``` # css 布局 `display` 是 CSS 中最重要的用于控制布局的屬性。每個元素都有一個默認的 `display` 值，這與元素的類型有關。對于大多數元素它們的默認值通常是 `block` 或 `inline` 。一個 `block` 元素通常被叫做塊級元素。一個 `inline` 元素通常被叫做行內元素。 ## block div 是一個標準的塊級元素。一個塊級元素會新開始一行并且盡可能撐滿容器。其他常用的塊級元素包括 p 、 form 和 HTML5 中的新元素： header 、 footer 、 section 等等。 ## inline span 是一個標準的行內元素。一個行內元素可以在段落中 `<span> 像這樣 </span>` 包裹一些文字而不會打亂段落的布局。 a 元素是最常用的行內元素，它可以被用作鏈接。 ## none 另一個常用的 display 值是 none 。一些特殊元素的默認 display 值是它，例如 script 。 display:none 通常被 JavaScript 用來在不刪除元素的情況下隱藏或顯示元素。 ```html <!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>Document</title> <style> script { display: block; } </style> </head> <body> <p>hello world</p> </body> <script> window.onload = function() { alert("hello world"); }; </script> </html> ``` 它和 visibility 屬性不一樣。把 display 設置成 none 元素不會占據它本來應該顯示的空間，但是設置成 visibility: hidden; 還會占據空間。 ```html <!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>Document</title> <style> .span1 { visibility: hidden; } </style> </head> <body> <span class="span1">hi world</span> <span>hello world</span> </body> </html> ``` 每個元素都有一個默認的 `display` 類型。不過我們可以隨時隨地的重寫它！常見的例子是：把 li 元素修改成 inline，制作成水平菜單。 ```html <!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>Document</title> <style> li { display: inline; } </style> </head> <body> <ul> <li>this is li tag 0</li> <li>this is li tag 1</li> <li>this is li tag 2</li> <li>this is li tag 3</li> </ul> </body> </html> ``` ## `margin: auto;` div 水平居中 ```html <!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>Document</title> <style> div { width: 500px; height: 500px; background-color: red; margin: 0 auto; } </style> </head> <body> <div></div> </body> </html> ``` 設置塊級元素的 width 可以防止它從左到右撐滿整個容器。然后你就可以設置左右外邊距為 auto 來使其水平居中。元素會占據你所指定的寬度，然后剩余的寬度會一分為二成為左右外邊距。唯一的問題是，當瀏覽器窗口比元素的寬度還要窄時，瀏覽器會顯示一個水平滾動條來容納頁面。 ```css #main { max-width: 600px; margin: 0 auto; } ``` 在這種情況下使用 max-width 替代 width 可以使瀏覽器更好地處理小窗口的情況。這點在移動設備上顯得尤為重要順便提下，所有的主流瀏覽器包括 IE7+在內都支持 max-width ，所以放心大膽的用吧。 ```html <!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>Document</title> <style> div { max-width: 500px; height: 500px; background-color: red; margin: 0 auto; } </style> </head> <body> <div></div> </body> </html> ``` ## 盒模型 ![alt](http://img.smyhvae.com/20170727_2128.png) ![alt](http://www.w3school.com.cn/i/ct_boxmodel.gif) ![alt](http://img.smyhvae.com/20170727_2326.png) ![alt](http://img.smyhvae.com/20170727_2329.png) 當設置了元素的寬度，實際展現的元素卻超出你的設置：這是因為元素的邊框和內邊距會撐開元素。 ```html <!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>Document</title> <style> .normal { width: 500px; margin: 20px auto; background: #f00; } .plus { width: 500px; margin: 20px auto; padding: 50px; border: 10px #00f solid; background: #00f; } </style> </head> <body> <div class="normal">我小一些</div> <div class="plus">我比它大!!!</div> </body> </html> ``` 以前有一個代代相傳的解決方案是通過數學計算。 CSS 開發者需要用比他們實際想要的寬度小一點的寬度，需要減去內邊距和邊框的寬度。值得慶幸地是你不需要再這么做了... ## box-sizing 人們慢慢的意識到傳統的盒子模型不直接，所以他們新增了一個叫做 box-sizing 的 CSS 屬性。當你設置一個元素為 box-sizing: border-box; 時，此元素的內邊距和邊框不再會增加它的寬度。這里有一個與前一頁相同的例子，唯一的區別是兩個元素都設置了 box-sizing: border-box; ： ```html <!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>Document</title> <style> .normal { width: 500px; margin: 20px auto; background: #f00; } .plus { width: 500px; margin: 20px auto; padding: 50px; border: 10px #00f solid; background: #00f; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } </style> </head> <body> <div class="normal">現在一樣大了</div> <div class="plus">萬歲!!!!!!!!!!!</div> </body> </html> ``` 既然沒有比這更好的方法，一些 CSS 開發者想要頁面上所有的元素都有如此表現。所以開發者們把以下 CSS 代碼放在他們頁面上： ```css * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ``` 這樣可以確保所有的元素都會用這種更直觀的方式排版。不過 box-sizing 是個很新的屬性，推薦使用 -webkit- 和 -moz- 前綴。這可以啟用特定瀏覽器實驗中的特性。同時記住它是支持 IE8+的。 ## position 一切皆為框 div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內元素”，這是因為它們的內容顯示在行中，即“行內框”。您可以使用 display 屬性改變生成的框的類型。這意味著，通過將 display 屬性設置為 block，可以讓行內元素（比如 `<a>` 元素）表現得像塊級元素一樣。還可以通過把 display 設置為 none，讓生成的元素根本沒有框。這樣的話，該框及其所有內容就不再顯示，不占用文檔中的空間。為了制作更多復雜的布局，我們需要討論下 position 屬性。 ### static ```css .static { position: static; } ``` ```html <div class="static"></div> ``` static 是默認值。任意 position: static; 的元素不會被特殊的定位。一個 `static` 元素表示它不會被“positioned”，一個 `position` 屬性被設置為其他值的元素表示它會被“positioned”。 ### relative ```css .relative1 { position: relative; } .relative2 { position: relative; top: -20px; left: 20px; background-color: white; width: 500px; } <div class="relative1"> ``` relative 表現的和 static 一樣，除非你添加了一些額外的屬性。在一個相對定位（position 屬性的值為 relative）的元素上設置 top 、 right 、 bottom 和 left 屬性會使其偏離其正常位置。設置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。 ![](http://www.w3school.com.cn/i/ct_css_positioning_relative_example.gif) 相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然后，可以通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。如果將 top 設置為 20px，那么框將在原位置頂部下面 20 像素的地方。如果 left 設置為 30 像素，那么會在元素左邊創建 30 像素的空間，也就是將元素向右移動。 > 注意，在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它框。 ### fixed 一個固定定位（position 屬性的值為 fixed）元素會相對于視窗來定位，這意味著即便頁面滾動，它還是會停留在相同的位置。和 relative 一樣， top 、 right 、 bottom 和 left 屬性都可用。 ```css .fixed { position: fixed; bottom: 0; right: 0; width: 200px; background: #000; height: 200px; } ``` 一個固定定位元素不會保留它原本在頁面應有的空隙（脫離文檔流）。 ### absolute absolute 是最棘手的 position 值。 absolute 與 fixed 的表現類似，但是它不是相對于 body 而是相對于最近的“positioned”祖先元素。如果絕對定位（position 屬性的值為 absolute）的元素沒有“positioned”祖先元素，那么它是相對于文檔的 body 元素設置為絕對定位的元素框從文檔流完全刪除，就好像該元素原來不存在一樣。絕對定位使元素的位置與文檔流無關，因此不占據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。普通流中其它元素的布局就像絕對定位的元素不存在一樣： ```css #box_relative { position: absolute; left: 30px; top: 20px; } ``` ![](http://www.w3school.com.cn/i/ct_css_positioning_absolute_example.gif) ```html <!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>Document</title> <style> .relative { position: relative; width: 600px; height: 400px; background: black; } .absolute { position: absolute; top: 120px; right: 0; width: 300px; height: 200px; background: red; } </style> </head> <body> <div class="relative"><div class="absolute"></div></div> </body> </html> ``` 父元素是相對定位的。如果它是 position: static; ，那么它的絕對定位子元素會跳過它直接相對于 body 元素定位。 ## 浮動 > 浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。 > 由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣 ![](http://www.w3school.com.cn/i/ct_css_positioning_floating_right_example.gif) ![](http://www.w3school.com.cn/i/ct_css_positioning_floating_left_example.gif) ![](http://www.w3school.com.cn/i/ct_css_positioning_floating_left_example_2.gif) ![](http://www.w3school.com.cn/i/ct_css_positioning_floating_linebox.gif)