css盒模型的組成部分,css margin,css padding,css盒子的實(shí)際大小
目錄：
一、盒模型的組成部分
二项贺、margin
三贷屎、padding
四、盒子的實(shí)際大小
一暑竟、盒模型的組成部分
盒模型是Css布局的基石，它規(guī)定了網(wǎng)頁元素如何顯示以及元素間相互關(guān)系。css定 義所有的元素都可以擁有像盒子一樣的外形和平面空間但荤，即都包含邊框罗岖、邊界、補(bǔ)白腹躁、內(nèi)容區(qū)桑包，這就是盒模型。
下圖是標(biāo)準(zhǔn)盒模型
基本上我們的所有的常規(guī)網(wǎng)站纺非，頁面上的各種特效哑了、文本、標(biāo)題烧颖、內(nèi)容弱左、圖片、視頻炕淮、按鈕拆火、鏈接....所有的東西，都可以看做是有一個盒子裝起來涂圆，然后由網(wǎng)站的開發(fā)者來進(jìn)行按序的排列们镜，排列到想要的位置，然后再進(jìn)行好看的樣式編輯润歉，最后在做出炫酷的特效模狭。
但是這一切的一切，都是建立在盒模型的基礎(chǔ)上的踩衩。
盒模型從外到內(nèi)分別是? margin嚼鹉、border、padding九妈、content組成 反砌，分別是? 外邊距、邊框萌朱、內(nèi)邊距和內(nèi)容。
簡單的講策菜，
外邊距就是兩個盒子之間的距離
邊框就是盒子的邊緣晶疼，就是圍著盒子的線
內(nèi)邊距就是盒子和內(nèi)容之間的距離，因?yàn)楹凶永锟赡苓€有盒子或者盒子里內(nèi)容需要跟盒子邊框有些間距又憨，所以會出現(xiàn)內(nèi)邊距
內(nèi)容就是每個元素中的東西
二翠霍、margin
margin的使用方法
外邊距: margin,在元素外邊的空白區(qū)域，被稱為外邊距蠢莺。
margin-left:左外邊距
margin-right:右外邊距
margin-top:上外邊距
margin-bottom:下外邊距
屬性值的4種方式:
四個值:上 右 下 左
margin:10px 20px 30px 40px;??/*? 元素上右下左的外邊距分別是10px,20px ,30px,40px */
三個值:上 左 右 下
margin:10px 20px 30px;? /*?元素上邊距是10px寒匙，左右邊距是20px ,下邊距是30ox??*/
二個值:.上下 左右
margin:10px 20px;??/*??元素上下邊距是10px，左右邊距是20px? */
一個值:四個方向
margin:20px;/ *定義元素四邊邊距為20px*/
讓一個有寬度并且寬度生效的元素在父元素中水平居中
margin:0 auto;? /* 上下外邊距為0，左右外邊距自適應(yīng) */
注意：
可單獨(dú)設(shè)置一個方向
margin-top:10px? ?/* 上方向? */
margin-right:30px???/* 右方向? */
margin-bottom:20px??/* 下方向? */
margin-left:40px??/* 左方向? */
三锄弱、padding
?padding的使用方法
內(nèi)邊距（內(nèi)填充考蕾、補(bǔ)白）: padding,在設(shè)定頁面中一個元素內(nèi)容到元素的邊緣(邊框)之間的距離。也稱補(bǔ)白会宪。
用法及注意:
1)用來調(diào)整內(nèi)容在容器中的位置關(guān)系
2) padding值是額外加在元素原有太小之上的肖卧，如想保證元素大小不變,需從元素寬或高上減掉后添加的padding屬性值
屬性值的4種方式:
四個值:上右下左
padding:0px 0px 0px 40px;
三個值:上 左右下
padding:10px 20px 30px;
二個值:上下左右
padding:10px 20px;
一個值: 四個方向
padding:20px;? ? /*定義元素四周填充為20px*/
注意：
可單獨(dú)設(shè)置一方向填充
padding-top:10px;? /* 上方向? */
padding right:10px;? /*? 右方向? */
padding-bottom:10px; /*? 下方向? */
padding-left:10px;?/*? 左方向? */
四、盒子的實(shí)際大小
盒子的實(shí)際寬 = 左右margin+左右border +左右padding+ width,
盒子的實(shí)際高=上下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,
