CSS的盒子模型

    CSS盒子模型

企業(yè)建站必須是能夠以充分展現(xiàn)企業(yè)形象為主要目的，是企業(yè)文化與產(chǎn)品對(duì)外擴(kuò)展宣傳的重要窗口，一個(gè)合格的網(wǎng)站不僅僅能為公司帶來(lái)巨大的互聯(lián)網(wǎng)上的收集和信息發(fā)布平臺(tái)，創(chuàng)新互聯(lián)公司面向各種領(lǐng)域：紗窗等網(wǎng)站設(shè)計(jì)、全網(wǎng)營(yíng)銷(xiāo)推廣解決方案、網(wǎng)站設(shè)計(jì)等建站排名服務(wù)。

1   盒子的組成包括

   margin外邊距、border邊框、padding內(nèi)邊框和content內(nèi)容

2   正文框的最內(nèi)部分是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距，內(nèi)邊距呈現(xiàn)了元素的背景，內(nèi)邊距的邊緣是邊框，邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會(huì)遮擋其后的任何元素

3   內(nèi)邊距、邊框和外邊距都是可選的，默認(rèn)值是零，外邊距可以是負(fù)值

4   寬度width和高度height指的是內(nèi)容區(qū)域的寬度和高度，增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的尺寸

5  CSS盒子模型的內(nèi)邊距

   內(nèi)邊距在正文content外，邊框border內(nèi)，控制該區(qū)域的最簡(jiǎn)單的屬性是padding屬性，padding屬性定義元素邊框與元素內(nèi)容之間的空白區(qū)域，可以進(jìn)行統(tǒng)一的內(nèi)邊距設(shè)置，也可以進(jìn)行單邊的內(nèi)邊距設(shè)置

6   css padding屬性定義元素的內(nèi)邊距，padding屬性接受長(zhǎng)度值或百分比值，但不允許使用負(fù)值

   可以按照上、下、左、右的順序分別設(shè)置各邊的內(nèi)邊距，各邊均可以使用不同的單位或百分比值

7   設(shè)置數(shù)值時(shí)，常用的單位有像素px和厘米cm

8   設(shè)置內(nèi)邊距的常用屬性

屬性	描述
padding-top	設(shè)置頂部屬性
padding-right	設(shè)置右側(cè)屬性
padding-bottom	設(shè)置底部屬性
padding-left	設(shè)置左側(cè)屬性

9   CSS盒子模型的邊框

   元素的邊框border是圍繞元素內(nèi)容的內(nèi)邊距的一條或多條線

   設(shè)置border屬性可以規(guī)定元素邊框的樣式、寬度和顏色

10   在html中是使用表格來(lái)創(chuàng)建周?chē)倪吙?/p>

11   在css中是通過(guò)邊框?qū)傩詠?lái)創(chuàng)建出效果出色的邊框，并且可以應(yīng)用于任何元素

12   使用border-color屬性來(lái)設(shè)置邊框?qū)傩?，它一次可以接受最多四個(gè)顏色值，分別是邊框的四邊，可以使用任何類(lèi)型的顏色值，可以是命名顏色，也可以是十六進(jìn)制和RGB值

13   css盒子模型的邊框

屬性	描述
border-top-color	設(shè)置頂部顏色屬性
border-left-color	設(shè)置左側(cè)顏色屬性
border-bottom-color	設(shè)置底部顏色屬性
border-right-color	設(shè)置右側(cè)顏色屬性

14   盒子模型的外邊距

   外邊距就是圍繞在內(nèi)容框的區(qū)域，默認(rèn)為透明的區(qū)域

    外邊距也接受任何長(zhǎng)度的單位，百分?jǐn)?shù)與內(nèi)邊距很相似

    使用任何一個(gè)屬性來(lái)只設(shè)置相應(yīng)的外邊距，不會(huì)直接影響所有其他外邊距

15   設(shè)置外邊距的常用屬性

屬性	描述
margin-top	設(shè)置頂部的外邊距
margin-bottom	設(shè)置底部的外邊距
margin-right	設(shè)置右側(cè)的外邊距
margin-left	設(shè)置左側(cè)的外邊距

16   morgin的默認(rèn)值是零，如果沒(méi)有為margin聲明一個(gè)值，就不會(huì)出現(xiàn)外邊距

17   對(duì)稱(chēng)復(fù)制

   如果缺少左外邊距的值，則是用右外邊距的值

   如果缺少下外邊距的值，則使用上外邊距的值

   如果缺少右外邊距的值，則使用上外邊距的值

網(wǎng)站名稱(chēng)：CSS的盒子模型
標(biāo)題鏈接：http://muchs.cn/article36/jcghsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、商城網(wǎng)站、響應(yīng)式網(wǎng)站、Google、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)