Web開發(fā)中怎么設(shè)置盒模式的屬性-創(chuàng)新互聯(lián)

本篇內(nèi)容主要講解“Web開發(fā)中怎么設(shè)置盒模式的屬性”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Web開發(fā)中怎么設(shè)置盒模式的屬性”吧!

在濟(jì)源等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供做網(wǎng)站、網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)制作按需開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計(jì),成都全網(wǎng)營(yíng)銷推廣,成都外貿(mào)網(wǎng)站建設(shè)公司,濟(jì)源網(wǎng)站建設(shè)費(fèi)用合理。

在body中的每一個(gè)HTML標(biāo)簽實(shí)際上都被包圍在一個(gè)看不見的矩形中，這個(gè)矩形就叫做“盒”。

盒子模型

首先介紹下HTML中標(biāo)簽的分類

一、HTML的標(biāo)簽分為兩種：塊標(biāo)簽和內(nèi)斂標(biāo)簽

1、塊標(biāo)簽：占據(jù)了容器的整個(gè)寬度，容器指的是body標(biāo)簽，每個(gè)塊標(biāo)簽所在的盒都盡可能的占據(jù)頁(yè)面的整個(gè)寬度，就是要占用瀏覽器一整行的位置。

塊標(biāo)簽：包含p、div、ul、ol、li、h2~h7等；塊標(biāo)簽獨(dú)自占據(jù)一行、自帶換行的效果；除了div以外，一般塊級(jí)標(biāo)簽都會(huì)有內(nèi)外邊距，寬度和高度。

2、內(nèi)聯(lián)標(biāo)簽：不會(huì)占據(jù)容器的一整行，它會(huì)和它周圍的內(nèi)容在一起，在一行內(nèi)自然的從左到右依次顯示，內(nèi)容的多少?zèng)Q定了內(nèi)聯(lián)標(biāo)簽的寬度。

內(nèi)聯(lián)標(biāo)簽：包含span，a，img，input，label等

瀏覽器怎么會(huì)知道盒子與盒子之間的距離應(yīng)該是多少？就會(huì)用到盒模式

二、盒模式

盒模式是描述標(biāo)簽的邊框和間距的一種方式

1、盒模式由4部分組成

1）內(nèi)容區(qū)域contentarea

內(nèi)容區(qū)域中包含的是盒子中真正的內(nèi)容（文本，圖片等）

2）補(bǔ)白或內(nèi)邊距padding

padding包圍在內(nèi)容區(qū)域的邊緣，分為上，右，下，左四個(gè)區(qū)域

3）邊框border

border包圍在padding的邊緣，也分為上，右，下，左四個(gè)區(qū)域

4）邊距margin

margin包圍在border的上、右、下、左四個(gè)邊緣

盒模式

2、如何設(shè)置盒模式的屬性？

1）每次設(shè)置padding屬性的一個(gè)值

h2{

padding-top:6px;

padding-right:3px;

padding-bottom:0;

padding-left:0;

}

padding屬性

或者按照順時(shí)針方向一次性設(shè)置：上，右，下，左

h2{

padding:6px3px00;

}

padding屬性

2）設(shè)置三個(gè)關(guān)于border的屬性

h2{

border-width:6px;

border-style:solid;

border-color:#ffff00;

}

border屬性

或者使用簡(jiǎn)寫的形式

h2{

border:6pxsolid#ffff00;

}

border屬性

也可以只設(shè)置其中一側(cè)的邊框

h2{

border-bottom:6pxsolid#ffff00;

}

border屬性

4）添加margin的方式和padding是一樣的，如：

h2{

margin-top:6px;

margin-right:0;

margin-bottom:6px;

margin-left:0;

}
margin屬性

或者按順時(shí)針方向一次性設(shè)置

h2{

margin:6px06px0;

}

margin屬性

當(dāng)上下和左右參數(shù)一致的時(shí)候，也可以這樣設(shè)置，如下：

h2{

margin:6px0;

}

3、計(jì)算盒子的尺寸

在所有標(biāo)簽中都有padding，border，margin一層層的包圍在內(nèi)容區(qū)域的外面，四個(gè)部分被設(shè)置后，整個(gè)盒子的尺寸計(jì)算方法如下：

整個(gè)盒子的寬度=內(nèi)容區(qū)域的寬度左padding右padding左border右border左margin右margin

整個(gè)盒子的高度=內(nèi)容區(qū)域的高度上padding下padding上border下border上margin下margin

4、默認(rèn)瀏覽器的樣式

當(dāng)你沒有為網(wǎng)頁(yè)定義樣式的時(shí)候，瀏覽器會(huì)使用默認(rèn)的樣式，把下面的這段代碼加入到你的CSS開始部分覆蓋瀏覽器的默認(rèn)樣式，代碼包含我們前面介紹過(guò)的標(biāo)簽，這樣我們就可以根據(jù)自己需求自由控制網(wǎng)頁(yè)了，這個(gè)過(guò)程稱之為CSS的初始化，在實(shí)際的項(xiàng)目中，初始化是必不可少的部分。

html,body,h2,h3,h4,p,ol,ul,li,a{

padding:0;

border:0;

margin:0

}

到此，相信大家對(duì)“Web開發(fā)中怎么設(shè)置盒模式的屬性”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)建站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

文章題目：Web開發(fā)中怎么設(shè)置盒模式的屬性-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)路徑：http://www.muchs.cn/article44/dhcgee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、App開發(fā)、自適應(yīng)網(wǎng)站、面包屑導(dǎo)航、品牌網(wǎng)站制作、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(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)