盒子模型-教育玄武老師

潭州教育CSS盒子模型玄武老師011、盒子模型概念2、盒子示意圖示3、邊框4、輪廓5、外邊距、內(nèi)邊距6、外邊距合并7、盒子模型的寬高計算CSS盒子模型02與我們?nèi)粘Ｉ钪械暮凶酉嗨?，是可以用來裝東西的一種箱子。所有頁面中的元素都可以看做是一個裝了東西的盒子。每個盒子都有：邊界、邊框、填充、內(nèi)容四個屬性；每個屬性都包括四個部分：上、右、下、左；這四部分可同時設(shè)置，也可分別設(shè)置；CSS盒子模型03盒子模型概念CSS盒子模型04盒子示意圖示內(nèi)容（CONTENT）就是盒子里裝的東西；而填充(PADDING)就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框(BORDER)就是盒子本身了；邊界(MARGIN)則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風(fēng)，同時也為了方便取出CONTENT內(nèi)容PADDING填充BORDER邊框MARGIN邊界元素外邊距內(nèi)就是元素的的邊框(border)。元素的邊框就是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。每個邊框有3個方面：寬度、樣式，以及顏色。CSS盒子模型05邊框CSS盒子模型06邊框?qū)挾菴SS盒子模型07邊框類型CSS盒子模型08邊框顏色輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。CSSoutline屬性規(guī)定元素輪廓的樣式、顏色和寬度。CSS定位09輪廓屬性描述outline在一個聲明中設(shè)置所有的輪廓屬性。outline-color設(shè)置輪廓的顏色。outline-style設(shè)置輪廓的樣式。outline-width設(shè)置輪廓的寬度。外邊距：圍繞在元素邊框的空白區(qū)域是外邊距。設(shè)置外邊距會在元素外創(chuàng)建額外的“空白”。內(nèi)邊距：元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間，CSSpadding屬性定義元素的內(nèi)邊距。padding屬性接受長度值或百分比值，但不允許使用負(fù)值。設(shè)置外邊距的最簡單的方法就是使用margin屬性，這個屬性接受任何長度單位、百分?jǐn)?shù)值甚至負(fù)值。CSS盒子模型

10外邊距、內(nèi)邊距外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。

當(dāng)一個元素出現(xiàn)在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。

當(dāng)一個元素包含在另一個元素中時（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發(fā)生合并。CSS盒子模型

11外邊距合并盒子寬度=border-left+border-right+padding-left+

padding-right+width

盒子高度=border-top+border-bottom+padding-top+

padding-bottom

+

he