CSS盒子模型


盒子的屬性:width样傍、height横缔、padding、border铭乾、margin

盒子分兩種:

1.標(biāo)準(zhǔn)W3C盒子模型

標(biāo)準(zhǔn)W3C盒子模型包括margin剪廉、border、padding炕檩、content斗蒋,并且content不包括其他部分捌斧。

2.IE盒子模型

標(biāo)準(zhǔn)W3C盒子模型包括margin、border泉沾、padding捞蚂、content,并且content包括border和padding跷究。

ICSS盒模型和IE盒模型的區(qū)別:

在?標(biāo)準(zhǔn)盒子模型中姓迅,width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距俊马、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸丁存,但是會增加元素框的總尺寸。

IE盒子模型中柴我,width 和 height 指的是內(nèi)容區(qū)域+border+padding的寬度和高度解寝。

溫馨提示:<body>標(biāo)簽也有margin

很多人以為<body>標(biāo)簽占據(jù)的是整個頁面的全部區(qū)域,其實是錯誤的艘儒。

正確的理解是這樣的:整個網(wǎng)頁最大的盒子是<document>聋伦,即瀏覽器。而<body>是<document>的兒子界睁。瀏覽器給<body>默認(rèn)的margin大小是8個像素觉增,此時<body>占據(jù)了整個頁面的一大部分區(qū)域,而不是全部區(qū)域翻斟。

解決方案:可以在網(wǎng)頁里清除所有的margin與padding逾礁,代碼如下:

*{

padding:0;

margin:0;

}

但是,*的效率不高访惜,所以我們使用并集選擇器敞斋,羅列所有的標(biāo)簽(不用背,有專業(yè)的清除默認(rèn)樣式的樣式表疾牲,今后學(xué)習(xí)):

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}

關(guān)于width植捎、height

真實占有寬度 = 左border + 左padding + width + 右padding + 右border

真實占有寬度不變,所以 width+ ==>padding-

關(guān)于padding

padding就是內(nèi)邊距阳柔。padding的區(qū)域有背景顏色焰枢,css2.1前提下,并且背景顏色一定和內(nèi)容區(qū)域的相同舌剂。也就是說济锄,background-color將填充所有border以內(nèi)的區(qū)域。

padding:30px 20px 10px 5px? ? ?

綜合屬性的寫法:(上霍转、右荐绝、下、左)(順時針方向避消,用空格隔開低滩。margin的道理也是一樣的)

padding: 20px 40px 60px;(上20px召夹;左、右40px恕沫;下60px监憎。)

后者居上。比如:padding: 20px;padding-left: 30px;

所以正確的是:padding:20px 20px 20px 30px

認(rèn)識border

border就是邊框婶溯。邊框有三個要素:像素(粗細(xì))鲸阔、線型、顏色迄委。

border綜合屬性:border:1px solid red;拆分開來褐筛,border包括:border-width、border-style叙身、border-color死讹。

css 外邊距合并(疊加)

兩個上下方向相鄰的元素框垂直相遇時,外邊距會合并曲梗,合并后的外邊距的高度等于兩個發(fā)生合并的外邊距中較高的那個邊距值,如圖:


只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并妓忍。行內(nèi)框虏两、浮動框或絕對定位之間的外邊距不會合并。


實際開發(fā)中遇到的和框模型相關(guān)的應(yīng)用及小問題世剖。
1 margin越界(第一個子元素的margin-top和最后一個子元素的margin-bottom的越界問題)

以第一個子元素的margin-top 為例:

當(dāng)父元素沒有邊框border時定罢,設(shè)置第一個子元素的margin-top值的時候,會出現(xiàn)margin-top值加在父元素上的現(xiàn)象旁瘫,解決方法有四個:

(1)給父元素加邊框border (副作用)

(2)給父元素設(shè)置padding值 ?(副作用)

(3)父元素添加 overflow:hidden (副作用)

(4)父元素加前置內(nèi)容生成祖凫。(推薦)

2 瀏覽器間的盒子模型。

(1)ul標(biāo)簽在Mozilla中默認(rèn)是有padding值的酬凳,而在IE中只有margin有值惠况。

(2)標(biāo)準(zhǔn)盒子模型與IE模型之間的差異:

  標(biāo)準(zhǔn)的盒子模型就是上述介紹的那種,而IE模型更像是 box-sizing : border-box; 其內(nèi)容寬度還包含了border和padding宁仔。解決辦法就是:在html模板中加doctype聲明稠屠。

3 用盒子模型畫三角形

詳細(xì)了解:

https://blog.csdn.net/qq_34382449/article/details/81234653

http://www.cnblogs.com/blosaa/p/3823695.html

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市翎苫,隨后出現(xiàn)的幾起案子权埠,更是在濱河造成了極大的恐慌,老刑警劉巖煎谍,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件攘蔽,死亡現(xiàn)場離奇詭異,居然都是意外死亡呐粘,警方通過查閱死者的電腦和手機满俗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進店門转捕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人漫雷,你說我怎么就攤上這事瓜富。” “怎么了降盹?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵与柑,是天一觀的道長。 經(jīng)常有香客問我蓄坏,道長价捧,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任涡戳,我火速辦了婚禮结蟋,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘渔彰。我一直安慰自己嵌屎,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布恍涂。 她就那樣靜靜地躺著宝惰,像睡著了一般。 火紅的嫁衣襯著肌膚如雪再沧。 梳的紋絲不亂的頭發(fā)上尼夺,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天,我揣著相機與錄音炒瘸,去河邊找鬼千扔。 笑死骑素,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播鹤树,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼泉蝌,長吁一口氣:“原來是場噩夢啊……” “哼贡翘!你這毒婦竟也來了著角?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤技俐,失蹤者是張志新(化名)和其女友劉穎乘陪,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體雕擂,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡啡邑,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了井赌。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片谤逼。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡贵扰,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出流部,到底是詐尸還是另有隱情戚绕,我是刑警寧澤,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布枝冀,位于F島的核電站舞丛,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏果漾。R本人自食惡果不足惜球切,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望绒障。 院中可真熱鬧吨凑,春花似錦户辱、人聲如沸恩商。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽探橱。三九已至隧膏,卻和暖如春胞枕,著一層夾襖步出監(jiān)牢的瞬間决乎,已是汗流浹背构诚。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工鸭津, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留逆趋,地道東北人名斟。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓坑律,卻偏偏與公主長得像晃择,于是被迫代替她去往敵國和親胰舆。 傳聞我的和親對象是個殘疾皇子骚露,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,452評論 2 348

推薦閱讀更多精彩內(nèi)容