天天看點
傳回

CSS-盒子模型-邊框、外邊距、内邊距盒子模型（CSS重點）拓展@CSS書寫規範

第01階段.前端基礎.盒子模型

盒子模型（CSS重點）

css學習三大重點： css 盒子模型 、 浮動 、 定位

主題思路：

CSS-盒子模型-邊框、外邊距、内邊距盒子模型（CSS重點）拓展@CSS書寫規範

目标：

  • 了解：
    • 能說出盒子模型有那四部分組成
    • 能說出内邊距的作用以及對盒子的影響
    • 能說出padding設定不同數值個數分别代表的意思
    • 能說出塊級盒子居中對齊需要的2個條件
    • 能說出外邊距合并的解決方法
  • 應用：
    • 能利用邊框複合寫法給元素添加邊框
    • 能計算盒子的實際大小
    • 能利用盒子模型布局子產品案例

2. 盒子模型（Box Model）

  • 所謂盒子模型：
    • 就是把HTML頁面中的布局元素看作是一個矩形的盒子，也就是一個盛裝内容的容器。
    • 盒子模型有元素的内容、邊框（border）、内邊距（padding）、和外邊距（margin）組成。
    • 盒子裡面的文字和圖檔等元素是 内容區域
    • 盒子的厚度 我們成為 盒子的邊框
    • 盒子内容與邊框的距離是内邊距（類似單元格的 cellpadding)
    • 盒子與盒子之間的距離是外邊距（類似單元格的 cellspacing）

标準盒子模型

CSS-盒子模型-邊框、外邊距、内邊距盒子模型（CSS重點）拓展@CSS書寫規範

3. 盒子邊框（border）

  • 文法： 
border : border-width || border-style || border-color
屬性 作用
border-width 定義邊框粗細，機關是px
border-style 邊框的樣式
border-color 邊框顔色
  • 邊框的樣式：
    • none：沒有邊框即忽略所有邊框的寬度（預設值）
    • solid：邊框為單實線(最為常用的)
    • dashed：邊框為虛線
    • dotted：邊框為點線

3.1 邊框綜合設定 

border : border-width || border-style || border-color

例如：

border: 1px solid red;  沒有順序

3.2 盒子邊框寫法總結表

很多情況下，我們不需要指定4個邊框，我們是可以單獨給4個邊框分别指定的。

上邊框 下邊框 左邊框 右邊框
border-top-style:樣式; border-bottom-style:樣式; border-left-style:樣式; border-right-style:樣式;
border-top-width:寬度; border- bottom-width:寬度; border-left-width:寬度; border-right-width:寬度;
border-top-color:顔色; border- bottom-color:顔色; border-left-color:顔色; border-right-color:顔色;
border-top:寬度 樣式 顔色; border-bottom:寬度 樣式 顔色; border-left:寬度 樣式 顔色; border-right:寬度 樣式 顔色;

3.3 表格的細線邊框

  • 通過表格的

    cellspacing="0"

     ,将單元格與單元格之間的距離設定為0，
  • 但是兩個單元格之間的邊框會出現重疊，進而使邊框變粗
  • 通過css屬性： 
    table{ border-collapse:collapse; }
    • collapse 單詞是合并的意思
    • border-collapse:collapse; 表示相鄰邊框合并在一起。 
<style>
	table {
		width: 500px;
		height: 300px;
		border: 1px solid red;
	}
	td {
		border: 1px solid red;
		text-align: center;
	}
	table, td {
		border-collapse: collapse;  /*合并相鄰邊框*/
	}
</style>
CSS-盒子模型-邊框、外邊距、内邊距盒子模型（CSS重點）拓展@CSS書寫規範

4. 内邊距（padding）

4.1 内邊距：

​ padding屬性用于設定内邊距。 是指 邊框與内容之間的距離。

4.2 設定

屬性 作用
padding-left 左内邊距
padding-right 右内邊距
padding-top 上内邊距
padding-bottom 下内邊距

當我們給盒子指定padding值之後， 發生了2件事情：

  1. 内容和邊框 有了距離，添加了内邊距。
  2. 盒子會變大了。

注意： 後面跟幾個數值表示的意思是不一樣的。

我們分開寫有點麻煩，我們可以不可以簡寫呢？

值的個數 表達意思
1個值 padding：上下左右内邊距;
2個值 padding: 上下内邊距 左右内邊距 ；
3個值 padding：上内邊距 左右内邊距 下内邊距；
4個值 padding: 上内邊距 右内邊距 下内邊距 左内邊距 ；

練一練：

請寫出如下内邊距：

  1. 要求盒子有一個左邊内邊距是 5像素
  2. 要求簡寫的形式寫出 一個盒子上下是 25像素 左右是15像素。
  3. 要求簡寫的形式寫出 一個盒子 上内邊距是 12像素 下内邊距是 0 左内邊距是 25像素 右内邊距是 10像素

4.4 内盒尺寸計算（元素實際大小）

  • 盒子的實際的大小 = 内容的寬度和高度 + 内邊距 + 邊框

4.5 内邊距産生的問題

  • 問題

    會撐大原來的盒子

  • 解決：

    通過給設定了寬高的盒子，減去相應的内邊距的值，維持盒子原有的大小

練一練

  1. 一個盒子寬度為100， padding為 10， 邊框為5像素，問這個盒子實際的寬度的是（）
  • (A) 130
  • (B) 135
  • © 125

  • (D) 115

    100 + 20 + 10

  1. 關于根據下列代碼計算 盒子寬高下列說法正确的是（） 
div {

		width: 200px;

         height: 200px;

		border: 1px solid #000000;

		border-top: 5px solid blue;

		padding: 50px;

		padding-left: 100px;

		}
  • (A) 寬度為200px 高度為200px
  • (B) 寬度為352px 高度為306px
  • © 寬度為302px 高度為307px
  • (D) 寬度為302px 高度為252px

w 200 + 150 + 2 = 352

h 200 + 100 + 6 = 306

4.6 padding不影響盒子大小情況

如果沒有給一個盒子指定寬度， 此時，如果給這個盒子指定padding， 則不會撐開盒子。

5. 外邊距（margin）

5.1 外邊距

​ margin屬性用于設定外邊距。 margin就是控制盒子和盒子之間的距離

5.2 設定：

屬性 作用
margin-left 左外邊距
margin-right 右外邊距
margin-top 上外邊距
margin-bottom 下外邊距

margin值的簡寫 （複合寫法）代表意思 跟 padding 完全相同。

5.3 塊級盒子水準居中

  • 可以讓一個塊級盒子實作水準居中必須：
    • 盒子必須指定了寬度（width）
    • 然後就給左右的外邊距都設定為auto，

實際工作中常用這種方式進行網頁布局，示例代碼如下：

常見的寫法，以下下三種都可以。

  • margin-left: auto; margin-right: auto;
  • margin: auto;
  • margin: 0 auto;

5.4 文字居中和盒子居中差別

  1. 盒子内的文字水準居中是 text-align: center, 而且還可以讓 行内元素和行内塊居中對齊
  2. 塊級盒子水準居中 左右margin 改為 auto 
text-align: center; /*  文字 行内元素 行内塊元素水準居中 */
margin: 10px auto;  /* 塊級盒子水準居中  左右margin 改為 auto 就闊以了 上下margin都可以 */

5.5 插入圖檔和背景圖檔差別

  1. 插入圖檔 我們用的最多 比如産品展示類 移動位置隻能靠盒模型 padding margin
  2. 背景圖檔我們一般用于小圖示背景 或者 超大背景圖檔 背景圖檔 隻能通過 background-position 
img {  
		width: 200px;/* 插入圖檔更改大小 width 和 height */
		height: 210px;
		margin-top: 30px;  /* 插入圖檔更改位置 可以用margin 或padding  盒模型 */
		margin-left: 50px; /* 插入當圖檔也是一個盒子 */
	}

 div {
		width: 400px;
		height: 400px;
		border: 1px solid purple;
		background: #fff url(images/sun.jpg) no-repeat;
		background-position: 30px 50px; /* 背景圖檔更改位置 我用 background-position */
	}

5.6 清除元素的預設内外邊距(重要)

CSS-盒子模型-邊框、外邊距、内邊距盒子模型（CSS重點）拓展@CSS書寫規範

為了更靈活友善地控制網頁中的元素，制作網頁時，我們需要将元素的預設内外邊距清除

代碼：

* {
   padding:0;         /* 清除内邊距 */
   margin:0;          /* 清除外邊距 */
}

注意：

  • 行内元素為了照顧相容性， 盡量隻設定左右内外邊距， 不要設定上下内外邊距。

5.7 外邊距合并

使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合并。

(1). 相鄰塊元素垂直外邊距的合并

  • 當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom
  • 下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和
  • 取兩個值中的較大者這種現象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。
    CSS-盒子模型-邊框、外邊距、内邊距盒子模型（CSS重點）拓展@CSS書寫規範

解決方案：盡量給隻給一個盒子添加margin值。

(2). 嵌套塊元素垂直外邊距的合并（塌陷）

  • 對于兩個嵌套關系的塊元素，如果父元素沒有上内邊距及邊框
  • 父元素的上外邊距會與子元素的上外邊距發生合并
  • 合并後的外邊距為兩者中的較大者
    CSS-盒子模型-邊框、外邊距、内邊距盒子模型（CSS重點）拓展@CSS書寫規範

解決方案：

  1. 可以為父元素定義上邊框。
  2. 可以為父元素定義上内邊距
  3. 可以為父元素添加overflow:hidden。

還有其他方法，比如浮動、固定、絕對定位的盒子不會有問題，後面咱們再總結。。。

6. 盒子模型布局穩定性

  • 學習完盒子模型，内邊距和外邊距，什麼情況下用内邊距，什麼情況下用外邊距？
    • 大部分情況下是可以混用的。 就是說，你用内邊距也可以，用外邊距也可以。 你覺得哪個友善，就用哪個。

我們根據穩定性來分，建議如下：

按照 優先使用 寬度 （width） 其次 使用内邊距（padding） 再次 外邊距（margin）。

width >  padding  >   margin
  • 原因：
    • margin 會有外邊距合并 還有 ie6下面margin 加倍的bug（讨厭）是以最後使用。
    • padding 會影響盒子大小， 需要進行加減計算（麻煩） 其次使用。
    • width 沒有問題（嗨皮）我們經常使用寬度剩餘法 高度剩餘法來做。

去掉清單預設的樣式

無序和有序清單前面預設的清單樣式，在不同浏覽器顯示效果不一樣，而且也比較難看，是以，我們一般上來就直接去掉這些清單樣式就行了。 代碼如下

9. 今日總結

CSS-盒子模型-邊框、外邊距、内邊距盒子模型（CSS重點）拓展@CSS書寫規範

拓展@

以下我們講的CSS3部分新屬性， 但是我們遵循的原則是，以下内容，不會影響我們頁面布局， 隻是樣式更好看了而已。

1.圓角邊框(CSS3)

CSS-盒子模型-邊框、外邊距、内邊距盒子模型（CSS重點）拓展@CSS書寫規範
  • 文法：
  • 其中每一個值可以為 數值或百分比的形式。
  • 技巧： 讓一個正方形 變成圓圈 
    border-radius: 50%;
CSS-盒子模型-邊框、外邊距、内邊距盒子模型（CSS重點）拓展@CSS書寫規範
  • 以上效果圖矩形的圓角， 就不要用 百分比了，因為百分比會是表示高度和寬度的一半。
  • 而我們這裡矩形就隻用 用 高度的一半就好了。精确機關。

2. 盒子陰影(CSS3)

  • 文法: 
box-shadow:水準陰影 垂直陰影 模糊距離（虛實）  陰影尺寸（影子大小）  陰影顔色  内/外陰影；
CSS-盒子模型-邊框、外邊距、内邊距盒子模型（CSS重點）拓展@CSS書寫規範
  • 前兩個屬性是必須寫的。其餘的可以省略。
  • 外陰影 (outset) 是預設的 但是不能寫 想要内陰影可以寫 inset 
div {
			width: 200px;
			height: 200px;
			border: 10px solid red;
			/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
			/* box-shadow:水準位置 垂直位置 模糊距離 陰影尺寸（影子大小） 陰影顔色  内/外陰影； */
			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
			
}

CSS書寫規範

開始就形成良好的書寫規範，是你專業的開始。

空格規範

【強制】 選擇器 與 { 之間必須包含空格。

示例：

.selector {
}

【強制】 屬性名 與之後的 : 之間不允許包含空格， : 與 屬性值 之間必須包含空格。

示例：

選擇器規範

【強制】 并集選擇器，每個選擇器聲明必須獨占一行。

示例：

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}


/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

【建議】 一般情況情況下，選擇器的嵌套層級應不大于 3 級，位置靠後的限定條件應盡可能精确。

示例：

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login  input {}
.comment div * {}

屬性規範

【強制】 屬性定義必須另起一行。

示例：

/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

【強制】 屬性定義後必須以分号結尾。

示例：

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}
web前端基礎 css
上一篇: Eclipse在Windows下不能啟動之解決方法
下一篇: cmd下不能ipconfig的解決方法

繼續閱讀