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)銷推廣解決方案、網(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)建周圍的邊框
11 在css中是通過(guò)邊框?qū)傩詠?lái)創(chuàng)建出效果出色的邊框,并且可以應(yīng)用于任何元素
12 使用border-color屬性來(lái)設(shè)置邊框?qū)傩裕淮慰梢越邮茏疃嗨膫€(gè)顏色值,分別是邊框的四邊,可以使用任何類型的顏色值,可以是命名顏色,也可以是十六進(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ì)稱復(fù)制
如果缺少左外邊距的值,則是用右外邊距的值
如果缺少下外邊距的值,則使用上外邊距的值
如果缺少右外邊距的值,則使用上外邊距的值
網(wǎng)站名稱:CSS的盒子模型
標(biāo)題鏈接:http://m.rwnh.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)