盒模型——本質上就是乙個盒子，現實生活中，盒子是拿來裝東西的，同樣，我們在進行網頁布局時，也是利用盒模型裝html元素裡的內容，所有的html元素都是可以看作盒子。
盒模型的作用：規定了網頁元素如何顯示以及元素間相互關係。
盒模型是由內容區（content）、填充區（padding）、邊框（border）和外邊界（margin）組成。
內容區也就是元素部分的寬（width）和高（height）；border就是盒子的邊緣。
在這裡我們可以借助例子更好理解：
*
/*網頁裡面所有元素的外邊距和內邊距都為0*/
.case1
我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子
中間選中的區域為內容區content，紅色背景顯示的為內邊距padding,綠色區域為邊框border，盒子以外空白的地方為外邊界margin。
標準盒模型的大小是由：寬高（content）+內邊距（padding）+邊框(border)+外邊距（margin）組成。
元素寬度實際占有的位置大小：寬width+左右的padding+左右的border+左右的margin；
盒子的寬度=width+padding-left+padding-right+border-left+border-right+margin-left+margin-right盒子的高度=height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom取值有1.百分比形式，(按照頁面大小劃分)如：width：100%；表示的是寬度為瀏覽器螢幕的寬。
2.長度單位（px）如：height：100px；表示高度為100畫素。
3.auto 指的是瀏覽器會自適應，自動計算選擇乙個合適的大小。
padding是指元素內容與邊框之間的空間，只能為正值，不能為負值。padding在盒子裡面，在盒子和內容之間。
1.作用:是用來控制父元素和子元素之間的位置關係，也可用來控制元素和內容之間的位置關係。
2.使用方法：
（1）直接給單一方面新增padding，單個定義。
padding-top(上邊內邊距距)、padding--right（右邊內邊距）、padding--bottom（下邊內邊距）、padding--left（左邊內邊距）padding：屬性值；/*乙個屬性值代表的是四周都為該屬性值*/
padding:屬性值 屬性值；/*第乙個屬性值代表的是上下；第二個屬性值代表的是左右*/
padding：屬性值 屬性值 屬性值；/*第乙個屬性值代表的是上內邊距，第二個代表的是左右內邊距，第****的是下內邊距*/
padding：屬性值 屬性值 屬性值 屬性值；/*第乙個屬性值代表的是上內邊距，第二個代表的是右內邊距，第****的是下內邊距*，第四個代表的是左內邊距*/（按順時針方向）
(1)padding會把盒子撐大，如需保持原有大小，則需減掉所加的padding值。如沒有設定固定的寬高，padding會直接撐開，不需減掉。
.case2
.case2
邊框有4個方向，分為上邊框（border-top）、下邊框（border-bottom）、左邊框（border-left）、右邊框(border-right)。
邊框屬性有邊框寬度（border-width）、邊框顏色（border-color）、邊框樣式（border-style）三種。
首先我們來看邊框寬度border-width：
邊框寬度也分可為上邊框寬度（border-top-width）、下邊框寬度（border-bottom-width）、左邊框寬度（border-left-width）、右邊框寬度（border-right-width）。
邊框寬度取值有百分比（%）形式和長度（px）形式。
邊框寬度可有可無，會有預設的寬度顯示。
邊框顏色分可為上邊框顏色（border-top-color）、下邊框顏色（border-bottom-color）、左邊框顏色（border-left-color）、右邊框顏色（border-right-color）。
邊框顏色設定方法有
英文單詞型如：red，green，blue，yellow....等等；
數字+字母型別如：#f00,#c9caca,#010101;#fff....等等。
常見的屬性有：
none：定義無邊框，可不寫。
solid：實線
dashed：虛線
dotted：點狀線
double：雙線
border的復合寫法可寫成border：邊框寬度 邊框樣式 邊框顏色；
border:5px solid pink;/*四周邊框寬度為5px、實線、顏色為粉色 */border還可以單獨設定乙個方向的邊框屬性,
border-bottom:4px dashed #000;/*設定寬度為4畫素、型別為虛線、顏色為黑色的下邊框*/利用border畫出圓形，使用border-radius屬性
border-radius：50%（可直接具體畫素，也可寫50%）利用border畫出三角形
.case2
利用border畫出梯形
.case2
好的，以上關於盒模型的屬性就總結到這裡啦~ 如有不對的地方，歡迎來修正！
盒模型屬性
邊框 border 邊界 邊距 margin 補白 填充 padding 內容區 content 1 邊框 border 1 border 盒子的邊緣。2 用法 1 邊框的寫法 divborder width 邊框的寬度 border color 邊框的顏色 border style 邊框的樣式 邊...
CSS盒模型之屬性總結
width 屬性指定了元素內容區的寬度 height 屬性指定了元素內容區的高度。取值 長度單位 px值 百分比 參照的是其包含塊的寬度 高度 auto 瀏覽器將會為指定的元素計算並選擇乙個寬度.語法 width 200px height 200px 初始值 auto 是否是繼承屬性 否 注意 塊級...
display屬性 盒模型
確實應該對html中的每個元素標籤都要了解一遍，這樣才能恰到好處的使用它們 這裡做個初步的整理，細節實踐中糾正 一 display屬性的三個值 inline，inline block，block 它們改變元素的特性，將元素重新分類成 內聯元素，行內塊元素，塊元素。inline元素 設定width h...