1. 程式人生 > >CSS - 盒模型(框模型)

CSS - 盒模型(框模型)

目錄

一、盒模型概念

二、盒模型成員介紹

1、content(內容顯示區域)

2、border(邊框)

- 透明邊框(邊框顏色 transparent)

3、padding

單邊內邊距屬性

內邊距的百分比數值

4、margin(外邊距)

- 值複製

- 單邊外邊距屬性

三、border-radius(邊界圓角)

四、其他相關屬性

1.max、min-width、height

2.display

3.overflow


一、盒模型概念

  • 廣義盒模型:文件中所有功能性及內容性標籤,及文件中所有顯示性標籤

  • 俠義盒模型:文件中以塊級形式存在的標籤(塊級標籤擁有盒模型100%特性且最常用)

  • 盒模型組成:margin + border + padding + content

二、盒模型成員介紹

1、content(內容顯示區域)

  • content控制內容的顯示區域

  • 通過設定width與height來規定content(content = width * height)

  • 塊級標籤可以設定自身寬高,預設寬為父級寬(width=auto)、高為0,高度可以由內容決定

  • 內聯標籤不可以設定自身寬高,預設寬高均為0,寬高一定由內容決定

2、border(邊框)

  • border 邊框 組成成員(三部分): border-width(寬度)border-color(顏色)border-style(風格)

  • border 成員:border-left、border-right、border-top、border-bottom

  • border-width 成員:border-left-width(左邊框寬度)、border-right-width(右邊框寬度)、border-top-width(上邊框寬度)、border-bottom-width(下邊框寬度)

    p {border-width: 5px;}
    p {border-width: thick;}
    p {border-width: 15px 5px 15px 5px;}
    p {border-width: 15px 5px;}
    ​
    p {
      border-top-width: 15px;
      border-right-width: 5px;
      border-bottom-width: 15px;
      border-left-width: 5px;
      }
     :CSS 沒有定義 3 個關鍵字的具體寬度,所以一個使用者代理可能把 thin 、medium 和 thick 分別設定為等於 5px、3px 和 2px,而另一個使用者代理則分別設定為 3px、2px 和 1px。
    
  • border-color成員:border-left-color、border-right-color、border-top-color、border-bottom-color

    p {
      border-style: solid;
      border-color: blue rgb(25%,35%,45%) #909090 red;
      }
    p {
      border-style: solid;
      border-color: blue red;
      }
    h1 {
      border-style: solid;
      border-color: black;
      border-right-color: red;
      }

    - 透明邊框(邊框顏色 transparent)

    我們剛才講過,如果邊框沒有樣式,就沒有寬度。不過有些情況下您可能希望建立一個不可見的邊框。

    CSS2 引入了邊框顏色值 transparent。這個值用於建立有寬度的不可見邊框。請看下面的例子:

    <a href="#">AAA</a>
    <a href="#">BBB</a>
    <a href="#">CCC</a>

    我們為上面的連結定義瞭如下樣式:

    a:link, a:visited {
      border-style: solid;
      border-width: 5px;
      border-color: transparent;
      }
    /*懸浮顯示灰色邊框*/
    a:hover {border-color: gray;}

     

  • border-style 成員:border-left-style、border-right-style、border-top-style、border-bottom-style

    p {border-style: solid solid solid none;}
    p {border-style: solid; border-left-style: none;}
    注意:如果要使用第二種方法,必須把單邊屬性放在簡寫屬性之後。因為如果把單邊屬性放在 border-style 之前,簡寫屬性的值就會覆蓋單邊值 none。
風格 解釋
solid 實線
dashed 虛線
dotted 點狀線
double 雙實線
groove 槽狀線
ridge 脊線
inset 內嵌效果線
outset 外凸效果線
none 清除邊框線

注意:border滿足整體設定語法,eg:border: 1px solid red;

 

屬性 描述
border 簡寫屬性,用於把針對四個邊的屬性設定在一個宣告。
border-style 用於設定元素所有邊框的樣式,或者單獨地為各邊設定邊框樣式。
border-width 簡寫屬性,用於為元素的所有邊框設定寬度,或者單獨地為各邊邊框設定寬度。
border-colo 簡寫屬性,設定元素的所有邊框中可見部分的顏色,或為 4 個邊分別設定顏色。
border-bottom 簡寫屬性,用於把下邊框的所有屬性設定到一個宣告中。
border-bottom-color 設定元素的下邊框的顏色。
border-bottom-style 設定元素的下邊框的樣式。
border-bottom-widt 設定元素的下邊框的寬度。
border-left 簡寫屬性,用於把左邊框的所有屬性設定到一個宣告中。
border-left-color 設定元素的左邊框的顏色。
border-left-style 設定元素的左邊框的樣式。
border-left-width 設定元素的左邊框的寬度。
border-right 簡寫屬性,用於把右邊框的所有屬性設定到一個宣告中。
border-right-color 設定元素的右邊框的顏色。
border-right-style 設定元素的右邊框的樣式。
border-right-width 設定元素的右邊框的寬度。
border-top 簡寫屬性,用於把上邊框的所有屬性設定到一個宣告中。
border-top-color 設定元素的上邊框的顏色。
border-top-style 設定元素的上邊框的樣式。
border-top-width 設定元素的上邊框的寬度。

3、padding

  • padding成員:padding-left、padding-right、padding-top、padding-bottom

  • padding整體設定

值得個數 方位
1個 -- >> h1 {padding: 10px;} 上下左右
2個 -->> h1 {padding: 10px 2ex;} 上下 | 左右
3個 -->> h1 {padding: 10px 0.25em 2ex;} 上 | 左右 | 下
4個 -->> h1 {padding: 10px 0.25em 2ex 20%;} 上 | 右 | 下 | 左

 

單邊內邊距屬性

也通過使用下面四個單獨的屬性,分別設定上、右、下、左內邊距:

  • padding-top
  • padding-right
  • padding-bottom:
  • padding-left

下面的規則實現的效果與上面的簡寫規則是完全相同的:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

內邊距的百分比數值

可以為元素的內邊距設定百分數值。
百分數值是相對於其父元素的 width 計算的,這一點與外邊距一樣。所以,如果父元素的 width 改變,它們也會改變。

下面這條規則把段落的內邊距設定為父元素 width 的 10%

p {padding: 10%;}

例如:如果一個段落的父元素是 div 元素,那麼它的內邊距要根據 div 的 width 計算。

<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div> 

注意:上下內邊距與左右內邊距一致;即上下內邊距的百分數會相對於父元素寬度設定,而不是相對於高度。

4、margin(外邊距)

  • margin成員:margin-left、margin-right、margin-top、margin-bottom

  • margin 的預設值是 0,所以如果沒有為 margin 宣告一個值,就不會出現外邊距。

  • 在實際中,瀏覽器對許多元素已經提供了預定的樣式,外邊距也不例外。 例如,在支援 CSS 的瀏覽器中,外邊距會在每個段落元素的上面和下面生成“空行”。因此,如果沒有為 p 元素宣告外邊距,瀏覽器可能會自己應用一個外邊距。當然,只要你特別作了宣告,就會覆蓋預設樣式。

  • margin整體設定(值複製概念)

賦值個數 方位
1個 -->> h1 {margin : 0.25px;} 上下左右
2個 -->> h1 {margin: 0.5em 1em;} 上下 | 左右
3個 -->>h1 {margin: 0.25em 1em 0.5em;} 上 | 左右 | 下
4個 -->>h1 {margin : 10px 0px 15px 5px;} 上 | 右 | 下 | 左

- 值複製

p {margin: 0.5em 1em 0.5em 1em;}  
/*等價於*/
p {margin: 0.5em 1em;}

CSS 定義了一些規則,允許為外邊距指定少於 4 個值。規則如下:

  • 如果缺少左外邊距的值,則使用右外邊距的值。

  • 如果缺少下外邊距的值,則使用上外邊距的值。

  • 如果缺少右外邊距的值,則使用上外邊距的值。

下圖提供了更直觀的方法來了解這一點:

  1. 如果為外邊距指定了 3 個值,則第 4 個值(即左外邊距)會從第 2 個值(右外邊距)複製得到。

  2. 如果給定了兩個值,第 4 個值會從第 2 個值複製得到,第 3 個值(下外邊距)會從第 1 個值(上外邊距)複製得到。

  3. 如果只給定一個值,那麼其他 3 個外邊距都由這個值(上外邊距)複製得到。

利用這個簡單的機制,您只需指定必要的值,而不必全部都應用 4 個值,例如:

h1 {margin: 0.25em 1em 0.5em;}  /*(上,左右,下)等價於 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}     /*(上下,左右)等價於 0.5em 1em 0.5em 1em */
p {margin: 1px;}            /* (上下左右)等價於 1px 1px 1px 1px */

假設希望把 p 元素的上外邊距和左外邊距設定為 20 畫素,下外邊距和右外邊距設定為 30 畫素。在這種情況下,必須寫作:

p {margin: 20px 30px 30px 20px;}

這樣才能得到您想要的結果。遺憾的是,在這種情況下,所需值的個數沒有辦法更少了。

如果希望除了左外邊距以外所有其他外邊距都是 auto(左外邊距是 20px):

p {margin: auto auto auto 20px;}

同樣的,這樣才能得到你想要的效果。問題在於,鍵入這些 auto 有些麻煩。如果您只是希望控制元素單邊上的外邊距,請使用單邊外邊距屬性

 

- 單邊外邊距屬性

單邊外邊距屬性:為元素單邊上的外邊距設定值。 假設您希望把 p 元素的左外邊距設定為 20px。不必使用 margin(需要鍵入很多 auto),而是可以採用以下方法:

p {margin-left: 20px;}

您可以使用下列任何一個屬性來只設置相應上的外邊距,而不會直接影響所有其他外邊距

  • margin-top

  • margin-right

  • margin-bottom

  • margin-left
    常用值: auto--瀏覽器設定的右外邊距,自定義數字值

一個規則中可以使用多個這種單邊屬性,例如:

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

當然,對於這種情況,使用 margin 可能更容易一些:

p {margin: 20px 30px 30px 20px;}

一般來說,如果希望為多個邊設定外邊距,使用 margin 會更容易一些。

注意:

  1. Netscape 和 IE 對 body 標籤定義的預設邊距(margin)值是 8px

  2. 而 Opera 相反,Opera 將內部填充(padding)的預設值定義為 8px,因此如果希望對整個網站的邊緣部分進行調整,並將之正確顯示於 Opera 中,那麼必須對 body 的 padding 進行自定義。

 

三、border-radius(邊界圓角)

  • border-radius成員

成員 解釋
border-top-left-radius 左上 方位
border-top-right-radius 右上 方位
border-bottom-left-radius 左下 方位
border-bottom-right-radius 右下 方位
  • 單方位(指定單角)設定

賦值個數(值型別:長度 | 百分比) 解釋
1 --->> border-top-left-radius: 100px; 單角 橫縱
2 --->> border-top-left-radius: 100px 50px; 單角 橫 | 縱
  • 按角整體設定

賦值個數(值型別:長度 | 百分比) 解釋
左上&右上&左下&右下
2   左上&右下,右上&左下
左上 ,右上& 左下 , 右下
4 左上,右上, 右下, 左下
  • 分向整體設定

格式 解釋
1 / 1  --- >> border-radius: 10px 100px 50px / 50px; 橫向/ 縱向
 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>邊界圓角</title>
	<style type="text/css">
		.box {
			width: 200px;
			height: 200px;
			background-color: orange;
		}
		/*單角設定*/
		.box {
			/*一個固定值: 橫縱*/
			border-top-left-radius: 100px;
			/*兩個固定值:橫 縱*/
			border-top-left-radius: 100px 50px;
			/*百分比賦值*/
			border-top-left-radius: 100%;
		}

		/*整體賦值*/
		.box {
			/*不分方位(橫縱)*/
			/*左上為第一個角,順時針,不足找對角*/
			/*border-radius: 10px 100px 50px;*/

			/*區分橫縱*/
			/*1./前控制橫向,後控制縱向*/
			/*2.橫向又可以分為1,2,3,4個值,縱向毅然*/
			border-radius: 10px 100px 50px / 50px;
			/*左上橫10 右上橫100 右下橫50 左下橫100 / 縱向全為50*/
			/*所有最多可以賦值8個值*/
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

四、其他相關屬性

1.max、min-width、height

2.display

描述
inline 內聯
block 塊級
inline-block 內聯塊

塊(block):

  1. 獨行顯示

  2. 支援寬高,寬預設適應父級,高預設由子級或內容撐開

  3. 設定寬高後,一定採用設定的寬高

內聯(inline):

  1. 同行顯示

  2. 不支援寬高

內聯塊(inline-block):

  1. 同行顯示,之間有間距

  2. 支援寬高,寬高由內容撐開

  3. 設定寬高後,一定採用設定的寬高

  4. 若設定寬高中其一,另一個會根據內容等比縮放

巢狀規則:

  1. 塊可以巢狀所有型別

  2. 內聯一般只巢狀內聯

  3. 內聯塊一般只作為最內層級

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>display</title>
	<!-- 預設值 -->
	<style type="text/css">
		div {
			/*塊*/
			display: block;
			/*自適應父級可用content的寬度*/
			/*width: auto;*/
			/*預設0*/
			/*height: 0px;*/
		}
		span {
			/*內聯*/
			display: inline;
			/*不支援寬高*/
		}
		img {
			/*內聯塊*/
			display: inline-block;
			width: auto;
			height: auto;
		}
	</style>
	<!-- 驗證寬高設定 -->
	<style>
		.sup {
			width: 300px;
			/*height: 100px;*/
			background-color: orange
		}
		.sub {
			/*width: 200px;*/
			/*height: 200px;*/
			background-color: cyan
		}
		.s1, .s2 {
			/*width: 200px;
			height: 200px;*/
			background-color: brown
		}
		img {
			/*width: 350px;*/
			/*height: 350px;*/
		}
	</style>
</head>
<body>
	<!-- 塊 -->
	<div></div>
	<!-- 內聯 -->
	<span></span>
	<!-- 內聯塊 -->
	<!-- 同行顯示,之間有間距 
		支援寬高,寬高由內容撐開  -->
	<img src="./img/icon.jpg" alt="">
	<img src="./img/icon.jpg" alt="">
	
	<!-- 橘色塊 -->
	<div class="sup">
		<!-- 藍色塊 未設定寬高:預設父寬,內容高-->
		<div class="sub">111</div>
	</div>
	
	<!-- 內聯 不支援設定寬高 -->
	<span class="s1">123</span>
	<span class="s2">456</span>

</body>
</html>

3.overflow

描述
visible 預設值。內容不會被修剪,會呈現在元素框之外。
hidden 內容會被修剪,並且其餘內容是不可見的。
scroll 內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto 如果內容被修剪,則瀏覽器會顯示滾動條以便檢視其餘的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>voerflow</title>
	<!-- 顯示區域只能由父級大小決定 -->
	<style type="text/css">
		/*子級區域大於父級*/
		.sup {
			width: 100px;
			height: 100px;
			/*預設值*/
			/*border: 3px none black;*/
			/*清除邊框*/
			/*border: 0;*/
			/*border: none;*/
			/*最簡單的設定*/
			border: solid;
		}
		.sub {
			width: 200px;
			height: 200px;
			background-color: red
		}
		/*對父級進行overflow設定*/
		.sup {
			/*以滾動的方式允許子級所有內容顯示*/
			overflow: auto;
			/*overflow: scroll;*/

			/*只執行子級在父級所在區域的部分顯示,超出的部分影藏*/
			/*overflow: hidden;*/
		}
	</style>
</head>
<body>
	<!-- display: block大環境下 -->
	<!-- <div class="sup">
		<div class="sub"></div>
	</div> -->
	<div class="sup">
		呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿
	</div>
</body>
</html>