盒子的屬性: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ā)中遇到的和框模型相關(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