|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言,是因?yàn)槲谋局邪怂^“超級鏈接”點(diǎn)。 很多前端人員認(rèn)為CSS太簡單了,沒必要花那么長的時(shí)間學(xué)習(xí),其實(shí)不然,一個(gè)前端開發(fā)人員把CSS用好以后,效率和用戶體驗(yàn)都會提升不少,最近打算深入的學(xué)習(xí)一下CSS,以便遇到問題時(shí),才知道如何下手,從而迅速的對癥下藥。接下來主要介紹CSS的盒子模型。什么是盒子模型 說起盒子模型,作為前端開發(fā)的我們,相信大家都有了解過的 。這里套用mdn官網(wǎng)的解釋: 在一個(gè)文檔中,每個(gè)元素都被表示為一個(gè)矩形的盒子。確定這些盒子的尺寸, 屬性 --- 像它的顏色,背景,邊框方面 --- 和位置是渲染引擎的目標(biāo)。 在CSS中,使用標(biāo)準(zhǔn)盒模型描述這些矩形盒子中的每一個(gè)。這個(gè)模型描述了元素所占空間的內(nèi)容。每個(gè)盒子有四個(gè)邊:外邊距邊, 邊框邊, 內(nèi)填充邊與內(nèi)容邊。 官方語言總是那么的晦澀難懂,那我接用chrome的控制臺的截圖來說明吧:
最外面橙色的就是外邊距區(qū)域(margin area ),往里黃色的是邊框區(qū)域(border area),再往里的綠色的是內(nèi)邊距區(qū)域(padding area ),最里面綠色的就是內(nèi)容區(qū)域(content area)了。 盒子模型的作用 好吧,盒子模型的概念好像沒有什么好說的,就上面那張圖片罷了。下面一起來看看盒子模型對我們布局有什么影響。舉個(gè)栗子,假如想設(shè)置一個(gè)元素的大小為200px,如果寫了如下的代碼: <style>
.box {
width: 200px;
height: 100px;
padding: 20px;
}
</style>
<div class="box">
盒子模型
</div>結(jié)果,你在審查元素時(shí),發(fā)現(xiàn)這個(gè)元素的大小變成了240px,而不是200px了。
這是為什么呢?因?yàn)槟J(rèn)情況下,設(shè)置width 、height 等作用對象是內(nèi)容區(qū)域,所以設(shè)置的width: 200px僅僅是內(nèi)容區(qū)域的寬度,加上左右內(nèi)邊距大小,導(dǎo)致了元素的整體尺寸變大了。這和我們對現(xiàn)實(shí)世界的中盒子的認(rèn)識有差異的。比如,你我們說房子的面積,并不單單指可用面積,還要包括墻壁厚度、陽臺、電梯之類的空間的。 盒子模型和box-sizing 為了把CSS和現(xiàn)實(shí)世界對應(yīng)起來,這時(shí)候box-sizing就要用上場了。box-sizing是用來設(shè)置width、height的作用對象的。有三個(gè)值,分別是content-box 、 paading-box 、 border-box, 默認(rèn)值是content-box。可能有人會問,為什么沒有margin-box啊?具體原因就不知道了,可以參考張鑫旭老師在《CSS世界》一書中提到了兩個(gè)原因: margin-box 本身沒有多大的價(jià)值 和 margin 的規(guī)范會沖突。因?yàn)閙argin規(guī)范寫著“ margin的背景永遠(yuǎn)是透明的 ”,如果來個(gè)margin-box,那background怎么辦? 至于為什么沒有margin-box就簡單的提一下,有興趣的朋友可以自己去查一下。 最佳實(shí)踐 為了布局上的方便,一些專家建議我們將所有的元素都設(shè)置為box-sizing: border-box 如果不考慮低版本瀏覽器的話,可以用下面的代碼: *,
*:before,
*:after {
box-sizing: border-box;
}后來,又有專家建議用的繼承的方法,如下: html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}這種方法被稱為最佳實(shí)踐,具體原因就不說了,既然是專家推薦 ,那我們以后可以把第二種方法的段代碼放到reset.css里面的。 以上就是深入理解CSS盒子模型含義和原理的詳細(xì)內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章! 網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!