資訊專欄INFORMATION COLUMN
摘要：今天談?wù)勎覍?duì)盒子模型的理解。首先里面的就是圖片中紅色區(qū)域到之間的區(qū)域稱為，也就是內(nèi)邊距，就是一個(gè)盒子的邊框，邊框外面還有個(gè)外邊距。上右下左第一個(gè)參數(shù)邊框?qū)挾龋诙€(gè)邊框類型，第三個(gè)邊框顏色上，右，下，左依次控制單邊邊框
今天談?wù)勎覍?duì)盒子模型的理解。剛接觸到盒子模型的時(shí)候那是一年前了，那時(shí)候在網(wǎng)上看視頻學(xué)習(xí)，視頻中的老師一講到盒子模型的時(shí)候聲音顯得特別大，說(shuō)明了盒子模型的重要性，今天就簡(jiǎn)單的談?wù)労凶幽Ｐ桶桑?/strong>
如果把上圖看作是HTML里的一個(gè)標(biāo)簽div,content.我們就從這一句簡(jiǎn)單的代碼來(lái)分析盒子模型。首先div里面的content就是圖片中紅色區(qū)域,content到border之間的區(qū)域稱為padding，也就是內(nèi)邊距，border就是一個(gè)盒子的邊框，邊框外面還有個(gè)外邊距margin。
圖1-1
.div1{
width:80px;
height:80px;
border:5px solid red;
padding:20px;
}
.div2{
width:80px;
height:80px;
border:7px solid yellow;
padding:0px;
}
圖1-1:第一個(gè)紅色div標(biāo)簽我給了它padding:20px;第二個(gè)黃色div標(biāo)簽給了它padding:0px;從圖中明顯可以看出2個(gè)div邊框離文本的距離大小不同，也發(fā)現(xiàn)了2個(gè)div大小也不一樣（padding撐開(kāi)了容器），這就是padding，簡(jiǎn)稱內(nèi)邊距。
圖1-2
.div1{
width:80px;
height:80px;
border:5px solid red;
margin:20px;
}
.div2{
width:80px;
height:80px;
border:7px solid yellow;
margin:0px;
}
圖1-2:圖上面那條綠色作為基點(diǎn)，第一個(gè)紅色div給了margin:20px;大家可以看到紅色div到綠色的線有了一定的距離，紅色div離黃色div也有一定的距離，這個(gè)距離就是margin:20px，簡(jiǎn)稱外邊距。
圖1-3
.div1{
width:80px;
height:80px;
border:3px solid red;
}
.div2{
width:80px;
height:80px;
border:10px solid yellow;
}
圖1-3:第一個(gè)紅色div邊框的寬度為3px，第二個(gè)黃色div邊框?yàn)?0px，邊框?qū)挾韧瑯右矔?huì)撐開(kāi)容器大小。
最后來(lái)講下margin,padding,border參數(shù)。
margin:
margin: 10px;（上、下、左、右各10px。）
margin: 10px 20px;（上、下10px；左、右20px。）
margin: 10px 20px 30px;（上10px；左、右20px；下30px。）
margin: 10px 20px 30px 40px;（上10px；右20px；下30px；左40px。）
margin-top:10px;(上:10px;)
margin-right:10px;(右:10px;)
margin-bottom:10px;(下:10px;)
margin-left:10px;(左:10px;)
padding:
padding: 10px;（上、下、左、右各10px。）
padding: 10px 20px;（上、下10px；左、右20px。）
padding: 10px 20px 30px;（上10px；左、右20px；下30px。）
padding: 10px 20px 30px 40px;（上10px；右20px；下30px；左40px。）
padding-top:10px;(上:10px;)
padding-right:10px;(右:10px;)
padding-bottom:10px;(下:10px;)
padding-left:10px;(左:10px;)
border:
border:1px solid red;(第一個(gè)參數(shù)邊框?qū)挾龋诙€(gè)邊框類型，第三個(gè)邊框顏色)
border-top
border-right
border-bottom
border-left
(上，右，下，左依次控制單邊邊框)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/116484.html
摘要：視覺(jué)格式化模型是用來(lái)處理和在視覺(jué)媒體上顯示文檔時(shí)使用的計(jì)算規(guī)則。匿名塊盒子在某些情況下進(jìn)行視覺(jué)格式化時(shí)，需要添加一些增補(bǔ)性的盒子，這些盒子不能用選擇符選中，因此稱為匿名盒子。因此最好不要將其用于正式項(xiàng)目。 今日勵(lì)志 不論你在什么時(shí)候開(kāi)始，重要的是開(kāi)始之后不要停止。 前言 對(duì)于部分前端工程師來(lái)講，有時(shí)候CSS令他們很頭疼，明明設(shè)置了某個(gè)樣式，但是布局就是不起作用。 showImg(htt...
摘要：盒子模型及更早的版本使用的是盒模型。盒子模型組成為。盒子模型盒子模型的盒子模型的意味著盒子的和的大小是上述屬性相加的最大總和。標(biāo)準(zhǔn)盒子模型盒子模型的盒子模型的盒子模型大小計(jì)算就簡(jiǎn)單多，設(shè)置的和就是內(nèi)容大小。 盒子模型 IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在標(biāo)準(zhǔn)兼容模式下使用的是W3C的盒模型標(biāo)準(zhǔn)。 盒子模型組成為：margin、border、padding、...
摘要：本篇?jiǎng)t會(huì)分享的邏輯屬性以及盒子模型。的邏輯屬性年月日，的工作組發(fā)布了邏輯屬性和值的首份工作草案。那么按著這個(gè)規(guī)則去修改文本屬性時(shí)，就會(huì)出現(xiàn)上述這種不符合語(yǔ)法規(guī)則的狀態(tài)。大概也是基于這個(gè)原因，所以發(fā)布了新的邏輯屬性與值。因此稱為匿名盒子。 作者：陳大魚頭 github： KRISACHAN 在上一篇【Hello CSS】的第一章CSS的語(yǔ)法與工作流中介紹了CSS的語(yǔ)法規(guī)則以及基本的...
摘要：前言總括對(duì)于盒子模型，，和外邊距合并等概念和問(wèn)題的總結(jié)原文地址從盒子模型說(shuō)起知乎專欄前端進(jìn)擊者博主博客地址的個(gè)人博客為學(xué)之道，莫先于窮理窮理之要，必先于讀書。 前言 總括： 對(duì)于盒子模型，BFC，IFC和外邊距合并等概念和問(wèn)題的總結(jié) 原文地址：從CSS盒子模型說(shuō)起 知乎專欄：前端進(jìn)擊者 博主博客地址：Damonare的個(gè)人博客 為學(xué)之道，莫先于窮理；窮理之要，必先于讀書。 正文 ?...
閱讀 2570·2021-09-23 11:21
閱讀 1881·2021-09-22 15:15
閱讀 969·2021-09-10 11:27
閱讀 3440·2019-08-30 15:54
閱讀 651·2019-08-30 15:52
閱讀 1334·2019-08-30 15:44
閱讀 2348·2019-08-29 15:06
閱讀 2971·2019-08-28 18:21
