Css的模型構建是什么

這篇文章主要講解了“Css的模型構建是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Css的模型構建是什么”吧！

“盒子”模型，每一個HTML元素可以看成一個“盒子”。一個“盒子”具有：寬度、邊框、內填充、外邊距

1.寬度(width)和高度(height)：是指內容的寬度和高度，不含邊框、外邊距、內填充。

2.內填充(padding)：是指內容到邊框線間的距離，含四個方向：上、右、下、左

3.外邊距(margin)：是指邊框線以外的距離。

計算一個“盒子”的總空度

假設：總寬度為100px，邊框為1px，內填充為10px，求內容的寬度

Width = 100px – 1px*2 -10px*2 = 78px

假設：總寬度為100px，內容的寬50px，求左右內填充分別是多少？

Padding-left = (100px – 50px )/2 = 25px

CSS內填充padding

Padding-left：左邊線到內容間的距離

Padding-right：右邊線到內容間的距離

Padding-top：頂邊線到內容間的距離

Padding-bottom：底邊線到內容間的距離

Padding：同時設置四個邊的內填充距離

padding:10px; //表示：上下左右四個內填充都是10px

padding:5px 10px; //表示：上下為5px，左右為10px

padding:5px 10px 15px; //表示：上為5px，左右為10px，下為15px

padding:5px 10px 15px 20px; //表示：上右下左分別設置不同的內填充，順序不可亂

CSS外邊距margin

Margin-left：左邊線以外的距離

Margin-right：右邊線以外的距離

Margin-top：頂邊線以外的距離

Margin-bottom：底邊線以外的距離

Margin:10px; //表示：四個外邊距都是10px

Margin:10px 15px; //表示：上下外邊為10px，左右外邊距為15px

Margin:5px 10px 15px //表示：上外邊距為5px，左右外邊距為10px，下外邊距為15px

Margin:5px 10px 15px 20px; //分別設置四外外邊距，順序為“上右下左”

感謝各位的閱讀，以上就是“Css的模型構建是什么”的內容了，經過本文的學習后，相信大家對Css的模型構建是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！