//注意事項 important
如果乙個盒子沒有給定寬度/高度或繼承父類的寬度/高度，盒子大小不受影響
新盒子（盒子大小就是寬度,padding width 包含在width中）
box-sizing: border-box
盒子計算尺寸(重點)
box-sizing: content-box
外盒尺寸計算： 元素空間尺寸 width+border+padding+margin,height+border+padding+margin
內盒尺寸計算: 實際尺寸 width+padding+border,height+border+padding
盒子陰影
格式：box-shadow:水平位置，垂直位置，模糊距離（可選），陰影尺寸（可選），陰影顏色（可選），內/**影（可選 預設為**影outset//不寫，預設就行 inset）
paddding-top
padding-bottom
padding-right
padding-left
如果只寫乙個值，就是都屬於乙個值
兩個值，1值為 上下，2值為左右
三個值，1為上 2為左右 3為下
四個值 為 上右下左( 順時針順序)
margin-top
margin-bottom
margin-left
margin-right
外邊距可實現盒子居中對齊：
1.必須是塊內元素
2.盒子必須指定寬度
3.左右的外邊距都為auto,可使快元素水平居中
盡量不要給行內元素指定上下的內外邊距
設定系統自帶標籤帶有樣式，設定margin ,padding 為0
相鄰塊元素垂直外邊距合併（以最大的外邊距為準，不會疊加）
巢狀塊元素（父子集）
如父級元素沒有設定邊框或者內邊距，子元素和父元素外邊距合併，子元素不動
解決方案：為父元素定義1畫素的上邊框或內邊距 2.為父元素新增 overflow：hidden
border-top
border-bottom
border-left
border-right
語法：
border: border-width| border-style| border-color
綜合設定語法:
border-邊框[top,bottom,right,left]:寬度 樣式 顏色
屬性：
none 沒有邊框
solid 邊框為外線 **
deshed 邊框為虛線
dotted 邊框為點線
duoble 邊框為雙實線
border-collapse 合併相鄰邊框
border-radius:左上角 右上角 右下角 左下角
寬度和高度同值，取一半值為radius為圓形 或%50
兩個值為對角線關係
三個值按順序宣告
產品展示用插入
CSS 盒模型應用
預設情況下，width和height設定的是內容盒寬高 矛盾 衡量設計稿的時候往往使用的是邊框盒，但設定weight和height，則設定的是內容盒 方法 精確計算 css3屬性 box sizing 預設情況下，背景覆蓋邊框盒 可以通過background clip進行修改 background ...
CSS盒模型及排版
css盒模型由四部分組成 margin border padding content。外邊距 邊框 內邊距 內容。我們設定的width和height都是內容的大小，從而影響整個盒子的大小。盒子的佔位大小包括margin，但盒子的尺寸不包括margin。比如 盒子的高度 border width pa...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...