★
css盒模型是css的基石，每個html標籤都可以看作是乙個盒模型。
css盒模型是由內容(content)，補白或填充(padding)，邊框(border)，外邊距(margin)四部分組成
1.內容(content)
寬度 width:數值+單位;
高度 height:數值+單位;
eg: .box
2.補白或填充 （設定內容和邊框之間的距離）
語法：padding:數值+單位;
a) 設定乙個值：padding:10px; （四個方向的padding均為10px）
b）設定兩個值：padding:20px 10px; （第乙個值代表上下，各為20px,第二個值代表左右，各為10px）
c）設定三個值：padding:20px 5px 10px; （第乙個值代表上，為20px,第二個值代表左右，為5px,第三個值代表下，為10px）
d）設定四個值：padding:20px 10px 5px 0; （順時針方向上20，右10，下5,左0）
e) 還可以單獨設定某乙個方向的padding值：padding-top:20px; （top還可以更改為left，right，bottom）
注：
i.padding不允許設定負值
ii.背景可以延伸到padding區域
iii.當我們需要調整內容在父容器中的位置關係時，給父元素新增padding屬性
iv.當給元素設定了padding值後，要在原來的寬，高上減去設定的padding值，保證總寬高不變
3.邊框(border)
a)邊框型別語法： border-style:solid(實線)|dashed(虛線)|dotted(點線)|double(雙線);
b)邊框顏色語法： border-color:顏色值;
c)邊框寬度語法：border-width:數值+單位;
d）border簡寫方式語法：border:寬度 線型 顏色; eg: border:10px solid red;
e)單獨設定某乙個方向的邊框語法：border-top:10px solid red;(top可更改為bottom，right,left)
注：
i.設定邊框為0或none時邊框隱藏或消失 eg: border-left:none;或border-left:0;
ii.背景可以延伸到border區域，當線型為實線時，將會遮擋住背景
iii.當給元素設定邊框後，要在原來的寬高上減去設定的邊框寬度，保證總寬高不變
4.外邊距(margin)(設定邊框以外的部分)
語法：margin的設定方法同padding
注：
i.margin允許設定負值
ii.背景不能延伸到margin區域
iii.調整子元素在父元素中的位置關係，可以給子元素新增margin或者調整元素之間的位置關係時，給本元素新增margin
ⅳ.瀏覽器預設margin有值，一般公共樣式表設定樣式重置，將margin值設為0
margin和padding值說明：
從零開始學習web前端開發
之前半個月一直在學習深度學習，但是感覺自己的能力還沒到那個程度所以就想擱置一下，從程式設計師基礎的前端開發來學。廢話不多說直接開記 我所使用的前端開發軟體就是業內很流行的vscode，作為小白的我當然也是用的這個 具體的安裝教程，外掛程式教程網上都有詳細的介紹，在此處不多講 在vscode中輸入 就...
從零開始學習前端開發 14 CSS3變形基礎
一 css3變形 transform rotate 旋轉 scale 縮放 skew 傾斜 translate 位移 注 當多種變形方式綜合在一起時，用空格隔開 1.旋轉 a rotatex 180deg 沿x軸翻轉 等價於 rotate3d 1,0,0,180deg b rotatey 180de...
從零開始學習前端開發 17 CSS3背景與漸變
一 css3背景切割 background clip border box padding box content box 作用 用來設定背景的可見區域 a border box 預設值，背景在邊框及邊框以內的區域可見 b padding box 背景在padding及padding以內的區域可見 ...