成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS 最核心的幾個(gè)概念

SwordFly / 2655人閱讀

摘要：本文將講述中最核心的幾個(gè)概念，包括盒模型等。塊級(jí)元素的默認(rèn)為，而內(nèi)聯(lián)元素則是根據(jù)其自身的內(nèi)容或子元素來決定其寬度。如果該元素的下一個(gè)兄弟元素中有內(nèi)聯(lián)元素通常是文字，則會(huì)圍繞該元素顯示，形成類似文字圍繞圖片的效果。

本文將講述 CSS 中最核心的幾個(gè)概念，包括：盒模型、position、float等。這些是 CSS 的基礎(chǔ)，也是最常用的幾個(gè)屬性，它們之間看似獨(dú)立卻又相輔相成。為了掌握它們，有必要寫出來探討一下，如有錯(cuò)誤歡迎指正。

元素類型

HTML 的元素可以分為兩種：

塊級(jí)元素（block level element）

內(nèi)聯(lián)元素（inline element 有的人也叫它行內(nèi)元素）

兩者的區(qū)別在于以下三點(diǎn)：

塊級(jí)元素會(huì)獨(dú)占一行（即無法與其他元素顯示在同一行內(nèi)，除非你顯示修改元素的 display 屬性），而內(nèi)聯(lián)元素則都會(huì)在一行內(nèi)顯示。

塊級(jí)元素可以設(shè)置 width、height 屬性，而內(nèi)聯(lián)元素設(shè)置無效。

塊級(jí)元素的 width 默認(rèn)為 100%，而內(nèi)聯(lián)元素則是根據(jù)其自身的內(nèi)容或子元素來決定其寬度。

最常見塊級(jí)元素應(yīng)該是

吧，內(nèi)聯(lián)元素有 等等，完整的元素列表可以谷歌一下。

具體來說一下吧,

.example {
    width: 100px;
    height: 100px;
}

我們?yōu)?

設(shè)置上面的樣式，是有效果的，因?yàn)槠涫菈K級(jí)元素，而對(duì) 設(shè)置上面的樣式是沒用的。要想讓 也可以改變寬高，可以通過設(shè)置 display: block; 來達(dá)到效果。當(dāng) display 的值設(shè)為 block 時(shí)，元素將以塊級(jí)形式呈現(xiàn)；當(dāng) display 值設(shè)為 inline 時(shí)，元素將以內(nèi)聯(lián)形式呈現(xiàn)。

若既想讓元素在行內(nèi)顯示，又能設(shè)置寬高，可以設(shè)置：

display: inline-block;

inline-block 在我看來就是讓元素對(duì)外呈內(nèi)聯(lián)元素，可以和其他元素共處與一行內(nèi)；對(duì)內(nèi)則讓元素呈塊級(jí)元素，可改變其寬高。

HTML 代碼是順序執(zhí)行的，一份無任何 CSS 樣式的 HTML 代碼最終呈現(xiàn)出的頁面是根據(jù)元素出現(xiàn)的順序和類型排列的。塊級(jí)元素就從上到下排列，遇到內(nèi)聯(lián)元素則從左到右排列。這種無樣式的情況下，元素的分布叫普通流，元素出現(xiàn)的位置應(yīng)該叫正常位置（這是我瞎起的），同時(shí)所有元素會(huì)在頁面上占據(jù)一個(gè)空間，空間大小由其盒模型決定。

盒模型

頁面上顯示的每個(gè)元素（包括內(nèi)聯(lián)元素）都可以看作一個(gè)盒子，即盒模型( box model )。請(qǐng)看Chrome DevTools 里的截圖：

可以顯而易見的看出盒模型由 4 部分組成。從內(nèi)到外分別是：

    content -> padding -> border -> margin

按理來說一個(gè)元素的寬度（高度以此類推）應(yīng)該這樣計(jì)算：

總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

但是不同瀏覽器（你沒有猜錯(cuò)，就是那個(gè)與眾不同的瀏覽器）對(duì)寬度的詮釋不一樣。符合 W3C 標(biāo)準(zhǔn)的瀏覽器認(rèn)為一個(gè)元素的寬度只等于其 content 的寬度，其余都要額外算。于是你規(guī)定一個(gè)元素：

.example {
    width: 200px;
    padding: 10px;
    border: 5px solid #000;
    margin: 20px;
}

則他最終的寬度應(yīng)為：

寬度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) = 270px;

而在 IE（低于IE9） 下，最終寬度為：

寬度 = width(200px) + margin(20px * 2) = 240px;

我個(gè)人覺得 IE 的更符合人類思維，畢竟 padding 叫內(nèi)邊距，邊框算作額外的寬度也說不下去。W3C 最后為了解決這個(gè)問題，在 CSS3 中加了 box-sizing 這個(gè)屬性。當(dāng)我們?cè)O(shè)置 box-sizing: border-box; 時(shí)，border 和 padding 就被包含在了寬高之內(nèi)，和 IE 之前的標(biāo)準(zhǔn)是一樣的。所以，為了避免你同一份 css 在不同瀏覽器下表現(xiàn)不同，最好加上：

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

這里還有兩種特殊情況：

無寬度 —— 絕對(duì)定位（position: absolute;） 元素

無寬度 —— 浮動(dòng)（float） 元素

它們?cè)陧撁嫔系谋憩F(xiàn)均不占據(jù)空間（脫離普通流，感覺像浮在頁面上層一樣，移動(dòng)它們不影響其他元素的定位）。這就涉及到另外兩個(gè)核心概念 position 和 float。

position

position 這個(gè)屬性決定了元素將如何定位。它的值大概有以下五種：

position 值 如何定位
static position的默認(rèn)值。元素將定位到它的正常位置（上文提到過），其實(shí)也就相當(dāng)于沒有定位。元素在頁面上占據(jù)位置。不能使用 top right bottom left 移動(dòng)元素位置。
relative 相對(duì)定位，相對(duì)于元素的正常位置來進(jìn)行定位。元素在頁面占據(jù)位置。可以使用 top right bottom left 移動(dòng)元素位置。
absolute 絕對(duì)定位，相對(duì)于最近一級(jí)的 定位不是 static 的父元素來進(jìn)行定位。元素在頁面不占據(jù)位置。 可以使用 top right bottom left 移動(dòng)元素位置。
fixed 絕對(duì)定位，相對(duì)于瀏覽器窗口來進(jìn)行定位。其余和 absolute 一樣，相當(dāng)于一種特殊的 absolute。
inherit 從父元素繼承 position 屬性的值。

具體效果可以參考w3school的實(shí)例，或者自己寫一下就明白了。

每個(gè)網(wǎng)頁都可以看成是由一層一層頁面堆疊起來的，如下圖所示。

position 設(shè)置為 relative 的時(shí)候，元素依然在普通流中，位置是正常位置，你可以通過 left right 等移動(dòng)元素。會(huì)影響其他元素的位置。

而當(dāng)一個(gè)元素的 position 值為 absolute 或 fixed 的時(shí)候，會(huì)發(fā)生三件事：

把該元素往 Z 軸方向移了一層，元素脫離了普通流，所以不再占據(jù)原來那層的空間，還會(huì)覆蓋下層的元素。

該元素將變?yōu)閴K級(jí)元素，相當(dāng)于給該元素設(shè)置了 display: block;（給一個(gè)內(nèi)聯(lián)元素，如 ，設(shè)置 absolute 之后發(fā)現(xiàn)它可以設(shè)置寬高了）。

如果該元素是塊級(jí)元素，元素的寬度由原來的 width: 100%（占據(jù)一行），變?yōu)榱?auto。

由此觀之，當(dāng) position 設(shè)置為 absolute 或 fixed，就沒必要設(shè)置 display 為 block 了。而且如果你不想覆蓋下層的元素，可以設(shè)置 z-index 值 達(dá)到效果。

float

float 顧名思義，就是把元素浮動(dòng)，它的取值一共有四個(gè)：left right none inherit，光看名字就懂了，無需多言。

最初的 float 只是用來實(shí)現(xiàn)文字環(huán)繞圖片的效果，僅此而已。而現(xiàn)在 float 的應(yīng)用已不止這個(gè)，前輩們也是寫了無數(shù)博文來深入淺出的講解它。
淺如：
經(jīng)驗(yàn)分享：CSS浮動(dòng)(float,clear)通俗講解 篇幅不長(zhǎng)，通俗易懂，可以看完這篇文章再回過頭來看本文。
深如：
CSS float浮動(dòng)的深入研究、詳解及拓展(一)
CSS float浮動(dòng)的深入研究、詳解及拓展(二)
從本質(zhì)上講解了 float 的原理。

我就不班門弄斧寫原理了，只說說 float 的幾個(gè)要點(diǎn)就行了：

只有左右浮動(dòng)，沒有上下浮動(dòng)。

元素設(shè)置 float 之后，它會(huì)脫離普通流（和 position: absolute; 一樣），不再占據(jù)原來那層的空間，還會(huì)覆蓋下一層的元素。

浮動(dòng)不會(huì)對(duì)該元素的上一個(gè)兄弟元素有任何影響。

浮動(dòng)之后，該元素的下一個(gè)兄弟元素會(huì)緊貼到該元素之前沒有設(shè)置 float 的元素之后（很好理解，因?yàn)樵撛孛撾x普通流了，或者說不在這一層了，所以它的下一個(gè)元素當(dāng)然要補(bǔ)上它的位置）。

如果該元素的下一個(gè)兄弟元素中有內(nèi)聯(lián)元素（通常是文字），則會(huì)圍繞該元素顯示，形成類似「文字圍繞圖片」的效果。（可參考CSS float浮動(dòng)的深入研究、詳解及拓展(一)中的講解）。這個(gè)我還是實(shí)踐了一下的，點(diǎn)這個(gè)JSfiddle看看吧。

下一個(gè)兄弟元素如果也設(shè)置了同一方向的 float，則會(huì)緊隨該元素之后顯示。

該元素將變?yōu)閴K級(jí)元素，相當(dāng)于給該元素設(shè)置了 display: block;（和position: absolute; 一樣）。

這里還有個(gè)東西，就是廣為人知的——清除浮動(dòng)。具體的方法五花八門，可以看這篇：那些年我們一起清除過的浮動(dòng)，我就不多說了。

寫完本文后，腦子中又出現(xiàn)了一系列問題，假如 position 和 float 同時(shí)設(shè)置會(huì)出現(xiàn)什么問題？兼容性如何？哪個(gè)屬性會(huì)被覆蓋？還沒來得及實(shí)踐，改天以排列組合的方式看看到底是什么效果……如果有人實(shí)踐過可以偷偷告訴我^_^

原文地址：CSS 最核心的幾個(gè)概念

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110825.html

相關(guān)文章

  • Web前端開發(fā)學(xué)習(xí)推薦--菜鳥必看

    Web前端開發(fā)是創(chuàng)建Web頁面或app等前端界面呈現(xiàn)給用戶的過程。第一階段：前端基礎(chǔ)（HTML / CSS / JavaScript / jQuery）初識(shí)HTML+CSS【學(xué)習(xí)筆記】HTML基礎(chǔ)完結(jié)篇html基礎(chǔ)知識(shí)——標(biāo)簽詳解html基礎(chǔ)知識(shí)——與用戶交互!（表單標(biāo)簽）html基礎(chǔ)知識(shí)——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個(gè)概念純HTM...

    shadajin 評(píng)論0 收藏0

  • Web前端開發(fā)學(xué)習(xí)推薦--菜鳥必看

    Web前端開發(fā)是創(chuàng)建Web頁面或app等前端界面呈現(xiàn)給用戶的過程。第一階段：前端基礎(chǔ)（HTML / CSS / JavaScript / jQuery）初識(shí)HTML+CSS【學(xué)習(xí)筆記】HTML基礎(chǔ)完結(jié)篇html基礎(chǔ)知識(shí)——標(biāo)簽詳解html基礎(chǔ)知識(shí)——與用戶交互!（表單標(biāo)簽）html基礎(chǔ)知識(shí)——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個(gè)概念純HTM...

    asoren 評(píng)論0 收藏0

  • Web前端開發(fā)學(xué)習(xí)推薦--菜鳥必看

    Web前端開發(fā)是創(chuàng)建Web頁面或app等前端界面呈現(xiàn)給用戶的過程。第一階段：前端基礎(chǔ)（HTML / CSS / JavaScript / jQuery）初識(shí)HTML+CSS【學(xué)習(xí)筆記】HTML基礎(chǔ)完結(jié)篇html基礎(chǔ)知識(shí)——標(biāo)簽詳解html基礎(chǔ)知識(shí)——與用戶交互!（表單標(biāo)簽）html基礎(chǔ)知識(shí)——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個(gè)概念純HTM...

    keithxiaoy 評(píng)論0 收藏0

  • Web前端開發(fā)學(xué)習(xí)推薦--菜鳥必看

    Web前端開發(fā)是創(chuàng)建Web頁面或app等前端界面呈現(xiàn)給用戶的過程。第一階段：前端基礎(chǔ)（HTML / CSS / JavaScript / jQuery）初識(shí)HTML+CSS【學(xué)習(xí)筆記】HTML基礎(chǔ)完結(jié)篇html基礎(chǔ)知識(shí)——標(biāo)簽詳解html基礎(chǔ)知識(shí)——與用戶交互!（表單標(biāo)簽）html基礎(chǔ)知識(shí)——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個(gè)概念純HTM...

    JerryWangSAP 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<