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

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

樣式定義如何顯示HTML元素css語法

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

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

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

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

元素框的最內部分是實際的內容，直接包圍內容的是內邊距。2)

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

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

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

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

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

ps:padding不允許使用負值

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

padding:上右下左;

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

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

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

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

5pxdottedblue

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

none無邊框 solid實線 dashed虛線 dotted點狀 double雙線 groove3D凹槽邊框 ridge3D壟狀邊框 inset3Dinset邊框 outset3Doutset邊框

盒子模型邊框線3、邊框線顏色 1、十六進制顏色值 #CC00FF 2、英文單詞中的顏色 redblue4、單獨定義某個邊框線樣式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 作用是在一個聲明中設置元素的所內邊距屬性1、margin

四個值

margin:上右下左;

margin:3px6px10px20px;2、margin

三個值

margin:上左右下; margin:3