Web開發(fā)中怎么設(shè)置盒模式的屬性

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

　　在body中的每一個HTML標簽實際上都被包圍在一個看不見的矩形中，這個矩形就叫做“盒”。

盒子模型

　　首先介紹下HTML中標簽的分類

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

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

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

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

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

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

二、盒模式

　　盒模式是描述標簽的邊框和間距的一種方式

1、盒模式由4部分組成

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

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

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

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

　　3）邊框border

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

　　4）邊距margin

　　margin包圍在border的上、右、下、左四個邊緣

　　盒模式

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

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

　　h2{

　　padding-top:6px;

　　padding-right:3px;

　　padding-bottom:0;

　　padding-left:0;

　　}

　　padding屬性

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

　　h2{

　　padding:6px3px00;

　　}

　　padding屬性

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

　　h2{

　　border-width:6px;

　　border-style:solid;

　　border-color:#ffff00;

　　}

　　border屬性

　　或者使用簡寫的形式

　　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è)置

　　h2{

　　margin:6px06px0;

　　}

　　margin屬性

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

　　h2{

　　margin:6px0;

　　}

3、計算盒子的尺寸

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

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

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

4、默認瀏覽器的樣式

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

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

　　padding:0;

　　border:0;

　　margin:0

　　}

到此，相信大家對“Web開發(fā)中怎么設(shè)置盒模式的屬性”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！