內外邊距都是透明的，不可以編寫內容乙個html
元素占用的空間=內容區域+內邊距+邊框家外邊距
乙個html元素設定尺寸的時候，預設設定在內容區域。盒模型的內外邊距、邊框都可以單獨設定，四個方向。
可以用方位名詞來進行設定內聯元素不可以設定尺寸，可以通過背景來設定內聯元素可以和塊級元素互相轉化-+方位名詞
padding：abcd 右下左
padding：abc 上 左右 下
padding：ab 上下 左右
padding： a 上下左右
css中塊級、內聯元素的應用：
利用css我們可以擺脫上面**裡html標籤歸類的限制，自由地在不同標籤元素上應用我們需要的屬性。
主要用的css樣式有以下三個：
display:block 顯示為塊級元素
display:inline 顯示為內聯元素
display:inline-block 顯示為內聯塊元素，表現為同行顯示並可修改寬高內外邊距等屬性我們常將所有
1.width和height
2.border
3.padding：內邊距當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充。單獨使用 padding 屬性可以改變上下左右的填充。
4.margin：外邊距margin 清除周圍的（外邊框）元素區域。margin 沒有背景顏色，是完全透明的。margin 可以單獨改變元素的上，下，左，右邊距，也可以一次改變所有的屬性。
5.borderborder-style 值:none: 預設無邊框dotted: 定義乙個點線邊框dashed: 定義乙個虛線邊框solid: 定義實線邊框double: 定義兩個邊框。 兩個邊框的寬度和 border-width 的值相同
6.overflow：內容溢位時的處理，hidden，溢位時隱藏overflow 屬性只工作於指定高度的塊元素上。 預設情況下，overflow 的值為 visible， 意思是內容溢位元素框。visible預設值。內容不會被修剪，會呈現在元素框之外。hidden內容會被修剪，並且其餘內容是不可見的。scroll內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。auto如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。inherit規定應該從父元素繼承 overflow 屬性的值。
7.background： background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;background-position
屬性background-position屬性設定背景影象的起始位置。
右下為正，左上為負
x>50,y>50為右下反之為左上
值描述left topleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottom如果僅指定乙個關鍵字，其他值將是"center"x% y%第乙個值是水平位置，第二個值是垂直。左上角是0％0％。
右下角是100％100％。如果僅指定了乙個值，其他值將是50％。
預設值為：0％0％ x軸》50右方向，y軸》50下方向。
xpos ypos第乙個值是水平位置，第二個值是垂直。左上角是0。單位可以是畫素（0px0px）或任何其他 css單位。如果僅指定了乙個值，其他值將是50％。你可以混合使用％和positions（有負值）
正值往右下移動，負值左上移動，值以右下為正。
inherit指定background-position屬性設定應該從父元素繼承background-size 屬性cover： 此時會保持影象的縱橫比並將影象縮放成將完全覆蓋背景定位區域的最小大小。
content： 此時會保持影象的縱橫比並將影象縮放成將適合背景定位區域的最大大小。
background-size:80px 60px; 設定背景高度和寬度。第乙個值設定寬度，第二個值設定的高度。如果只給出乙個值，第二個是設定為 auto(自動)
background-size:80% 60%; 將計算相對於背景定位區域的百分比。第乙個值設定寬度，第二個值設定的高度。如果只給出乙個值，第二個是設定為"auto(自動)"background-clip
屬性background-clip屬性指定背景繪製區域。
background-clip: border-box|padding-box|content-box;content-box： 背景繪製在內容方框內（剪下成內容方框）。
border-box： 預設值。背景繪製在邊框方框內（剪下成邊框方框）。
padding-box： 背景繪製在襯距方框內（剪下成襯距方框）。
雪碧圖->精靈圖
background-origin 屬性background-origin 屬性指定了背景影象的位置區域。content-box, padding-box,和 border-box區域內可以放置背景影象。
background-color屬性
unset取消當前的樣式
initial使用初始設定，取消當前的樣式
inherit 指定背景顏色，應該從父元素繼承
瘋狂H5筆記 盒模型與布局相關屬性
float 控制目標html元件的浮動方向。有屬性值 left right clear 設定目標html元件的左右是否允許出現浮動物件 有屬性值 none left right both overflow 設定當目標元件內容溢位時的溢位內容顯示方式。有屬性值 visible auto hidden ...
css盒模型理解知記
tip 1.width border padding 內邊距 margin 外邊距 jquery的outerwidth 取得的是 width padding left padding right border left border right outerwidth true 取得的是outerwi...
CSS3 筆記3 彈性盒布局flex
使用css3中的乙個box flex屬性就可以隨著瀏覽器視窗的改變而自適應。彈性盒布局是在盒布局的基礎上進行自適應。彈性盒布局相容性 webkit box flex 1 safara瀏覽器 chrome瀏覽器 moz box flex 1 firefox瀏覽器 數字1 是指所佔的比例份數。比如第乙個...