css盒子模型

muzhuyu 發布于2019-08-30 15:52 / 660人閱讀

摘要：今天談談我對盒子模型的理解。首先里面的就是圖片中紅色區域到之間的區域稱為，也就是內邊距，就是一個盒子的邊框，邊框外面還有個外邊距。上右下左第一個參數邊框寬度，第二個邊框類型，第三個邊框顏色上，右，下，左依次控制單邊邊框

今天談談我對盒子模型的理解。剛接觸到盒子模型的時候那是一年前了，那時候在網上看視頻學習，視頻中的老師一講到盒子模型的時候聲音顯得特別大，說明了盒子模型的重要性，今天就簡單的談談盒子模型吧！

如果把上圖看作是HTML里的一個標簽div,

content

.我們就從這一句簡單的代碼來分析盒子模型。首先div里面的content就是圖片中紅色區域,content到border之間的區域稱為padding，也就是內邊距，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標簽我給了它padding:20px;第二個黃色div標簽給了它padding:0px;從圖中明顯可以看出2個div邊框離文本的距離大小不同，也發現了2個div大小也不一樣（padding撐開了容器），這就是padding，簡稱內邊距。

圖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:圖上面那條綠色作為基點，第一個紅色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，邊框寬度同樣也會撐開容器大小。

最后來講下margin,padding,border參數。

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;(第一個參數邊框寬度，第二個邊框類型，第三個邊框顏色)
border-top
border-right
border-bottom
border-left
(上，右，下，左依次控制單邊邊框)

云服務器 GPU云服務器盒子模型比價盒子盒子比價電視盒子

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116484.html

「前端早讀君」css進階之徹底理解視覺格式化模型

摘要：視覺格式化模型是用來處理和在視覺媒體上顯示文檔時使用的計算規則。匿名塊盒子在某些情況下進行視覺格式化時，需要添加一些增補性的盒子，這些盒子不能用選擇符選中，因此稱為匿名盒子。因此最好不要將其用于正式項目。今日勵志不論你在什么時候開始，重要的是開始之后不要停止。前言對于部分前端工程師來講，有時候CSS令他們很頭疼，明明設置了某個樣式，但是布局就是不起作用。 showImg(htt...

Eidesen 2019-08-23 14:25 評論0 收藏0
【前端】CSS盒子模型

摘要：盒子模型及更早的版本使用的是盒模型。盒子模型組成為。盒子模型盒子模型的盒子模型的意味著盒子的和的大小是上述屬性相加的最大總和。標準盒子模型盒子模型的盒子模型的盒子模型大小計算就簡單多，設置的和就是內容大小。盒子模型 IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在標準兼容模式下使用的是W3C的盒模型標準。盒子模型組成為：margin、border、padding、...

Keagan 2019-08-30 15:55 評論0 收藏0
【Hello CSS】第二章-CSS的邏輯屬性與盒子模型

摘要：本篇則會分享的邏輯屬性以及盒子模型。的邏輯屬性年月日，的工作組發布了邏輯屬性和值的首份工作草案。那么按著這個規則去修改文本屬性時，就會出現上述這種不符合語法規則的狀態。大概也是基于這個原因，所以發布了新的邏輯屬性與值。因此稱為匿名盒子。作者：陳大魚頭 github： KRISACHAN 在上一篇【Hello CSS】的第一章CSS的語法與工作流中介紹了CSS的語法規則以及基本的...

SegmentFault 2019-08-30 10:49 評論0 收藏0
從CSS盒子模型說起

摘要：前言總括對于盒子模型，，和外邊距合并等概念和問題的總結原文地址從盒子模型說起知乎專欄前端進擊者博主博客地址的個人博客為學之道，莫先于窮理窮理之要，必先于讀書。前言總括：對于盒子模型，BFC，IFC和外邊距合并等概念和問題的總結原文地址：從CSS盒子模型說起知乎專欄：前端進擊者博主博客地址：Damonare的個人博客為學之道，莫先于窮理；窮理之要，必先于讀書。正文 ?...

happyhuangjinjin 2019-08-29 12:54 評論0 收藏0