CSS之盒子模型

carson0408發表於2018-03-18
CSS模型

        如果將html元素看做盒子，那麼在佈局設計時，只需要將每個元素代表的盒子進行整體佈局，這樣使得佈局樣式更加規範。CSS盒模型本質上是一個盒子，封裝周圍的html元素，包括：邊距，邊框，填充和實際內容。如圖所示，就是盒子模型的示意圖，文章主要通過邊框、外邊距、內邊距等方面的內容來介紹盒子模型。


1.border

        border是指邊框的意思。它有四個方位：top、bottom、left、right；主要有三大屬性：border-width、border-style、border-color;對應每個方位的屬性則是(以top為例):border-top-width、border-top-style、border-top-color。針對border-width可以填寫畫素單位px，或者使用三個關鍵詞:thick、medium、thin；border-style則主要有dotted(點線)、dashed(虛線)、solid(實線)、double(兩個邊框)等等;border-color則可以取常見的顏色。

以下通過示例來了解border的特點：

<html>
 <head>
  <style type="text/css">

	div {
		border-width: 10px;
		border-style: dotted;
		border-color:blue;
	}
	#div1{
		border-width:thick;
		border-style:double;
		border-color:red;
	}
	.div2{
		border:10px dashed gray;
	}
	#div3{
		border-top:10px dashed gray;
		border-bottom:5px dotted pink;
		border-left:15px double red;
		border-right:10px solid green;
	}
	
  </style>
 </head>
 <body>

<div >border三個元素分別標註使用示例</div>
<div id="div1" >border三個元素分別標註使用示例</div>
<div class="div2">border三個元素統一標註使用示例</div>
<div id="div3">border四個方位分開標註使用示例</div>
 </body>
</html>

檢視效果：


由於佈局不太好，利用選擇器的優先順序將div標籤選擇器程式碼更改如下：

div {
		height:100px;
		width:500px;
		border-width: 10px;
		border-style: dotted;
		border-color:blue;
	}

得到效過如下：


2.padding

        padding是指內邊距，即內容內容塊與border的距離，它主要有四個方向：top、bottom、left、right，因此有可以設定四個方向的內邊距:padding-top、padding-bottom、padding-left、padding-right四個方向；或者統一設定padding。以下padding使用示例：

<html>
 <head>
  <style type="text/css">
	div {
		padding:50px;	
	}
	#div1{
		padding-top:20px;
		padding-bottom:20px;
		padding-left:10px;
		padding-right:10px;
		
	}
  </style>
 </head>
 <body>

<div >padding統一標註使用示例</div>
<div  id="div1">padding四個方向分開標註使用示例</div>

 </body>
</html>

效過如圖：


3.margin

        margin主要是指外邊距，margin的使用與padding類似。直接使用示例說明：

<html>
 <head>
  <style type="text/css">
	div {
		margin:50px 50px 60px 70px;	
		border:10px double red;
	}
	#div1{
		margin-top:20px;
		margin-bottom:20px;
		margin-left:10px;
		margin-right:10px;
		border:10px double red;
		
	}
  </style>
 </head>
 <body>

<div >margin統一標註使用示例</div>
<hr color="black"/>
<div  id="div1">margin四個方向分開標註使用示例</div>

 </body>
</html>

其中以上將兩個盒子模型分開，使用了一條黑線分開，外邊距就是邊框距離整個頁面邊角的距離。


4.綜合使用盒子模型

        綜合使用盒子模型，就是設定相關的屬性，並且新增內容，同時還涉及了之前學過的選擇器的一些內容，幾個知識點混合一起。

<html>
 <head>
  <style type="text/css">
	div {
		border:10px double green;
		padding:20px 20px 30px 30px;
		margin:50px 50px 60px 70px;	
		height:200px;
		weight:50px;
		background-color:pink;

	}
	p.word{
		color:blue;
		font-family:Serif;
		font-size:35px;
		font-style:oblique;
		font-weight:10px;
	}
	#font{
		font-size:18px;
		color:red;

	}
  </style>
 </head>
 <body>

<div id="font"><center color="red"><p class="word">盒子模型綜合使用</p></center><br/>網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。
這些屬性我們可以用日常生活中的常見事物——盒子作一個比喻來理解，所以叫它盒子模式。
CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。</div>


 </body>
</html>

效果如圖：



相關文章