課件源碼-03 -第三章div盒子模型

第三章樣式+div盒子模型初識(shí)css樣式css（CascadingStyleSheets）:層疊樣式表

樣式定義如何顯示HTML元素css語(yǔ)法

CSS規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。

內(nèi)部樣式:<styletype=”text/css”>多條css規(guī)則</style>

行內(nèi)樣式:style=”width:300px;background:red;”外部樣式:<linkrel=”stylesheet”type=”text/css”href=”css文件”/>盒子模型CSS框模型(BoxModel)規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框和

外邊距的方式盒子模型的概念1)

元素框的最內(nèi)部分是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。2)

內(nèi)邊距呈現(xiàn)了元素的背景。3)內(nèi)邊距的邊緣是邊框。4)邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會(huì)遮擋其后任何元素。ps:背景應(yīng)用于由內(nèi)容和內(nèi)邊距、邊框組成的區(qū)域。在CSS中，width和height指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸盒子模型內(nèi)邊距1、padding-top 上面(頂部)內(nèi)邊距

padding-top:20px;或padding-top:0%;（值大小:元素寬度*10%）2、padding-right 右邊內(nèi)邊距

padding-right:20px;或padding-right:10%;（值大小:元素寬度*10%）3、padding-bottom下面(底部)內(nèi)邊距

padding-bottom:20px;或padding-bottom:10%;（值大小:元素寬度*10%）4、padding-left 左邊內(nèi)邊距

padding-left:20px;或padding-top:10%;（值大小:元素寬度*10%）

ps:padding不允許使用負(fù)值

盒子模型內(nèi)邊距padding 作用是在一個(gè)聲明中設(shè)置元素的內(nèi)邊距屬性1、paddding四個(gè)值

padding:上右下左;

padding:3px6px10px20px;2、padding三個(gè)值 padding:上左右下; padding:3px10px5px;3、padding兩個(gè)值 padding:上下左右; padding:3px10px;4、padding一個(gè)值

padding:上下左右; padding:3px;

盒子模型邊框線1.邊框線三要素

邊框大小邊框樣式邊框顏色 1pxsolidred

5pxdottedblue

盒子模型邊框線2.邊框樣式值

none無邊框 solid實(shí)線 dashed虛線 dotted點(diǎn)狀 double雙線 groove3D凹槽邊框 ridge3D壟狀邊框 inset3Dinset邊框 outset3Doutset邊框

盒子模型邊框線3、邊框線顏色 1、十六進(jìn)制顏色值 #CC00FF 2、英文單詞中的顏色 redblue4、單獨(dú)定義某個(gè)邊框線樣式border-top

頂部(上)邊框線border-top:1pxsolid#CC00FF;border-right 右邊框線樣式 border-right:5pxsolidred;border-bottom 底邊框線樣式 border-bottom:10pxdotted#660033;border-left

左邊框線樣式 border-left:15pxdoubleblue;

盒子模型外邊距1、margin-top 上面(頂部)外邊距

margin-top:20px;或padding-top:10%;（值大小:元素寬度*10%）2、margin-right 右邊外邊距

margin-right:20px;或padding-right:10%;（值大小:元素寬度*10%）3、margin-bottom下面(底部)外邊距

margin-bottom:20px;或padding-bottom:10%;（值大小:元素寬度*10%）4、margin-left 左邊外邊距

margin-left:20px;或padding-top:10%;（值大小:元素寬度*10%）盒子模型外邊距margin 作用是在一個(gè)聲明中設(shè)置元素的所內(nèi)邊距屬性1、margin

四個(gè)值

margin:上右下左;

margin:3px6px10px20px;2、margin

三個(gè)值

margin:上左右下; margin:3