這篇文章主要講解了“Css的模型構(gòu)建是什么”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Css的模型構(gòu)建是什么”吧！

站在用戶的角度思考問題，與客戶深入溝通，找到岱岳網(wǎng)站設(shè)計(jì)與岱岳網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋岱岳地區(qū)。

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

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

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

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

計(jì)算一個(gè)“盒子”的總空度

假設(shè)：總寬度為100px，邊框?yàn)?px，內(nèi)填充為10px，求內(nèi)容的寬度

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

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

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

CSS內(nèi)填充padding

Padding-left：左邊線到內(nèi)容間的距離

Padding-right：右邊線到內(nèi)容間的距離

Padding-top：頂邊線到內(nèi)容間的距離

Padding-bottom：底邊線到內(nèi)容間的距離

Padding：同時(shí)設(shè)置四個(gè)邊的內(nèi)填充距離

padding:10px; //表示：上下左右四個(gè)內(nèi)填充都是10px

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

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

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

CSS外邊距margin

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

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

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

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

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

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

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

Margin:5px 10px 15px 20px; //分別設(shè)置四外外邊距，順序?yàn)椤吧嫌蚁伦蟆?/p>

感謝各位的閱讀，以上就是“Css的模型構(gòu)建是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Css的模型構(gòu)建是什么這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！