css边距设置
這個(gè)屬性用來(lái)設(shè)定上下左右邊框的風(fēng)格，它的值如下：
·?????????none (沒(méi)有邊框，無(wú)論邊框?qū)挾仍O(shè)為多大)
·?????????dotted (點(diǎn)線式邊框)
·?????????dashed (破折線式邊框)
·?????????solid (直線式邊框)
·?????????double (雙線式邊框)
·?????????groove (槽線式邊框)
·?????????ridge(脊線式邊框)
·?????????inset (內(nèi)嵌效果的邊框)
·?????????outset (突起效果的邊框)
演示示例：分別使用none,dotted, dashed, solid, double, groove, ridge, inset, outset的CSS邊框風(fēng)格屬性示例
這個(gè)屬性用來(lái)設(shè)定上下左右邊框的寬度，它的值如下：
·?????????medium (是缺省值)
·?????????thin (比medium細(xì))
·?????????thick (比medium粗)
·?????????用長(zhǎng)度單位定值。可以用絕對(duì)長(zhǎng)度單位(cm, mm, in, pt,?pc)或者用相對(duì)長(zhǎng)度單位?(em, ex,?px)。
演示示例：分別用medium, thin, thick和長(zhǎng)度單位定制的CSS邊框?qū)挾葘傩允纠?/span>
這個(gè)屬性用來(lái)設(shè)定上下左右邊框的顏色。例句如下：
.d5 {border-color:gray;border-style:solid;}演示示例
這個(gè)屬性是邊框?qū)傩缘囊粋€(gè)快捷的綜合寫(xiě)法，它包含border-width, border-style和border-color。例句如下：
.d1 {border:5px solid gray;}演示示例?
上下左右四個(gè)邊框不但可以統(tǒng)一設(shè)定，也可以分開(kāi)設(shè)定。
設(shè)定上邊框?qū)傩?#xff0c;你可以使用border-top, border-top-width, border-top-style, border-top-color。
設(shè)定下邊框?qū)傩?#xff0c;你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。
設(shè)定左邊框?qū)傩?#xff0c;你可以使用border-left, border-left-width, border-left-style, border-left-color。
設(shè)定上邊框?qū)傩?#xff0c;你可以使用border-right, border-right-width, border-right-style, border-right-color。
演示示例：設(shè)置單邊邊框?qū)傩缘氖纠?/span>
邊距屬性是用來(lái)設(shè)置頁(yè)面中一個(gè)元素所占空間的邊緣到相鄰元素之間的距離。
左邊距屬性 (margin-left)這個(gè)屬性用來(lái)設(shè)定左邊距的寬度。示例如下：
.d1{margin-left:1cm}演示示例
這個(gè)屬性用來(lái)設(shè)定右邊距的寬度。示例如下：
.d1 {margin-right:1cm}演示示例請(qǐng)參照左邊距屬性示例，只要將里面的margin-left改成margin-right即可。
這個(gè)屬性用來(lái)設(shè)定上邊距的寬度。示例如下：
.d1 {margin-top:1cm}演示示例請(qǐng)參照左邊距屬性示例，只要將里面的margin-left改成margin-top即可。
這個(gè)屬性用來(lái)設(shè)定下邊距的寬度。示例如下：
.d1{margin-bottom:1cm}演示示例請(qǐng)參照左邊距屬性示例，只要將里面的margin-left改成margin-bottom即可。
這個(gè)屬性是設(shè)定邊距寬度的一個(gè)快捷的綜合寫(xiě)法，用這個(gè)屬性可以同時(shí)設(shè)定上下左右邊距屬性。
你可以為上下左右邊距設(shè)置相同的寬度。示例入下：
.d1 {margin:1cm}你也可以分別設(shè)置邊距，順序是上，右，下，左。示例如下：
.d1 {margin:1cm 2cm 3cm 4cm}上面的代碼表示，上邊距為1cm，右邊距為2cm，下邊距為3cm，左邊距為4cm。
演示示例：上下左右邊距寬度相同
演示示例：上下左右邊距寬度各不相同
?
CSS間隙屬性間隙屬性(padding)是用來(lái)設(shè)置元素內(nèi)容到元素邊界的距離。
左間隙屬性 (padding-left)這個(gè)屬性用來(lái)設(shè)定左間隙的寬度。示例如下：
.d1{padding-left:1cm}演示示例
這個(gè)屬性用來(lái)設(shè)定右間隙的寬度。示例如下：
.d1 {padding-right:1cm}演示示例請(qǐng)參照左間隙屬性示例，只要將里面的padding-left改成padding-right即可。
這個(gè)屬性用來(lái)設(shè)定上間隙的寬度。示例如下：
.d1 {padding-top:1cm}演示示例請(qǐng)參照左間隙屬性示例，只要將里面的padding-left改成padding-top即可。
這個(gè)屬性用來(lái)設(shè)定下間隙的寬度。示例如下：
.d1{padding-bottom:1cm}演示示例請(qǐng)參照左間隙屬性示例，只要將里面的padding-left改成padding-bottom即可。
這個(gè)屬性是設(shè)定間隙寬度的一個(gè)快捷的綜合寫(xiě)法，用這個(gè)屬性可以同時(shí)設(shè)定上下左右間隙屬性。
你可以為上下左右間隙設(shè)置相同的寬度。示例入下：
.d1 {padding:1cm}你也可以分別設(shè)置間隙，順序是上，右，下，左。示例如下：
.d1 {padding:1cm 2cm 3cm 4cm}上面的代碼表示，上間隙為1cm，右間隙為2cm，下間隙為3cm，左間隙為4cm。
演示示例：上下左右間隙寬度相同
演示示例：上下左右間隙寬度各不相同
?
CSS盒子模式(Box Model)
CSS?中有個(gè)重要的概念，就是盒子模式?(Box model)。
胡戈的"一個(gè)饅頭引發(fā)的血案"中有個(gè)圓圈套圓圈娛樂(lè)城，而這個(gè)盒子模式套用這句話來(lái)說(shuō)，就是方塊套方塊。
先看看下面這個(gè)圖，黑框包圍的一個(gè)方塊，就是一個(gè)盒子?(Box)。
盒子里由外至里依次是：
·?????????margin?邊距
·?????????border?邊框
·?????????padding?間隙?(也有人稱做補(bǔ)丁)
·?????????content (內(nèi)容，比如文本，圖片等)
CSS?邊距屬性?(margin)?是用來(lái)設(shè)置一個(gè)元素所占空間的邊緣到相鄰元素之間的距離。
CSS?邊框?qū)傩?(border)?用來(lái)設(shè)定一個(gè)元素的邊線。
CSS?間隙屬性?(padding)?是用來(lái)設(shè)置元素內(nèi)容到元素邊框的距離。
?
CSS?背景屬性指的是?content?和?padding?區(qū)域。
CSS?屬性中的?width?和?height?指的是?content?區(qū)域的寬和高。
總結(jié)
- 上一篇： java计算机毕业设计基于安卓Andro
- 下一篇： 撩妹方式，你值得拥有！！