盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間，即都包含邊框、邊界、補白、內容區，這就是盒模型。
說明：填充：padding,在設定頁面中乙個元素內容到元素的邊緣(邊框) 之間的距離。 也稱補白。
用法：1）用來調整內容在容器中的位置關係
2）用來調整子元素在父元素中的位置關係。
注：padding屬性需要新增在父元素上。
3）padding值是額外加在元素原有大小之上的，如想保證元素大小不變，需從元素寬或高上減掉後新增的padding屬性值
屬性值的4種方式：
四個值：上 右 下 左
三個值：上 左右 下
二個值：上下 左右
乙個值：四個方向padding:2px;/*定義元素四周填充為2px*/
說明：可單獨設定一方向填充，如：上方向padding-top:10px; 右方向padding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px;
說明：網頁中很多修飾性的線條都是由邊框來實現；
用法：
邊框寬度： border-width：2px;
邊框樣式：border-style：solid(實線)/ dotted（點）/ dashed（虛線）/ double（雙邊線）/none(取消邊框)；
邊框顏色：border-color：#ff0f0f;
縮寫：border:width style color;
說明：邊界：margin,在元素外邊的空白區域，被稱為邊距。
margin-left:左邊界
margin-right:右邊界
margin-top:上邊界
margin-bottom:下邊界
四個值：上 右 下 左
三個值：上 左右 下
二個值：上下 左右
乙個值：四個方向 margin:2px;/定義元素四邊邊界為2px/
margin:0 auto;/*乙個有寬度的元素在瀏覽器中橫向居中。
說明：可單獨設定一方向邊界，如：margin-top:10px;
寬 =左右margin+左右border+左右padding+width，
高 =上下margin+上下border+上下padding+height，
例如：乙個盒子的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，
寬=margin*2 + border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px，
高=margin*2 + border*2 + padding*2 + content.height = 20*2 + 1*2 +10*2 + 50 = 112px，
4 css盒模型和文字溢位
盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間，即都包含邊框 邊界 補白 內容區，這就是盒模型。寬 左右margin 左右border 左右padding width，高 上下margin 上下border 上下padd...
前端基礎（4） CSS 基礎語法（1）
日期 2017 10 26 通過使用 css 我們可以大大提公升網頁開發的工作效率！html 標籤原本被設計為用於定義文件內容，如下例項 這是乙個段落。樣式表定義如何顯示 html 元素，就像 html 3.2 的字型標籤和顏色屬性所起的作用那樣。樣式通常儲存在外部的 css 檔案中。通過僅僅編輯乙...
web前端學習 基礎知識4 CSS基礎概念
cascading style sheet層疊樣式表標籤 之類的標籤 使用方式 直接輸入標籤名 類 class class名字 使用方式 輸入點 class名 id id名 使用方式 輸入 id名一般來說我們寫css檔案的時候用的都是第二種方法，class名這是因為id名一般被用作js的選擇器 給c...