Web開發中怎么設置盒模式的屬性

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

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

盒子模型

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

一、HTML的標簽分為兩種：塊標簽和內斂標簽

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

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

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

　　內聯標簽：包含span，a，img，input，label等

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

二、盒模式

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

1、盒模式由4部分組成

　　1）內容區域contentarea

　　內容區域中包含的是盒子中真正的內容（文本，圖片等）

　　2）補白或內邊距padding

　　padding包圍在內容區域的邊緣，分為上，右，下，左四個區域

　　3）邊框border

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

　　4）邊距margin

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

　　盒模式

2、如何設置盒模式的屬性？

　　1）每次設置padding屬性的一個值

　　h2{

　　padding-top:6px;

　　padding-right:3px;

　　padding-bottom:0;

　　padding-left:0;

　　}

　　padding屬性

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

　　h2{

　　padding:6px3px00;

　　}

　　padding屬性

　　2）設置三個關于border的屬性

　　h2{

　　border-width:6px;

　　border-style:solid;

　　border-color:#ffff00;

　　}

　　border屬性

　　或者使用簡寫的形式

　　h2{

　　border:6pxsolid#ffff00;

　　}

　　border屬性

　　也可以只設置其中一側的邊框

　　h2{

　　border-bottom:6pxsolid#ffff00;

　　}

　　border屬性

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

　　h2{

　　margin-top:6px;

　　margin-right:0;

　　margin-bottom:6px;

　　margin-left:0;

　　}
　　margin屬性

　　或者按順時針方向一次性設置

　　h2{

　　margin:6px06px0;

　　}

　　margin屬性

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

　　h2{

　　margin:6px0;

　　}

3、計算盒子的尺寸

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

　　整個盒子的寬度=內容區域的寬度左padding右padding左border右border左margin右margin

　　整個盒子的高度=內容區域的高度上padding下padding上border下border上margin下margin

4、默認瀏覽器的樣式

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

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

　　padding:0;

　　border:0;

　　margin:0

　　}

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