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