盒子模型

URLOS 發(fā)布于2019-08-29 18:39 / 2713人閱讀

摘要：盒子模型可以設(shè)置四個(gè)值，如圖表示內(nèi)邊距，內(nèi)容與盒子上右下左的距離。如圖，只規(guī)定了兩個(gè)，但是在下面的盒子模型中默認(rèn)使得對面的屬性一致。三個(gè)參數(shù)值，表示邊框的粗細(xì)，線條樣式，顏色也可以分開設(shè)置。上面將盒子四周的樣式設(shè)置不同。

盒子模型

padding

可以設(shè)置四個(gè)值，如圖

padding: 1px 2px 3px 4px;

表示內(nèi)邊距，內(nèi)容與盒子上右下左的距離。

記住順時(shí)針轉(zhuǎn)就行。

如果padding不全，那么就和對面的padding一樣。

如圖，只規(guī)定了兩個(gè)，但是在下面的盒子模型中默認(rèn)使得對面的padding屬性一致。

只規(guī)定一個(gè)，那么上下左右內(nèi)邊距均為一致。

還可以多帶帶設(shè)置內(nèi)邊距

 padding-left: 1px;
 padding-right: 2px;
 padding-top: 3px;
 padding-bottom: 4px;

同時(shí)設(shè)置會(huì)怎么覆蓋呢

這是css代碼的順序

padding-left: 5px;
padding-right: 6px;
padding: 1px 2px 3px 4px;
padding-top: 7px;
padding-bottom: 8px;

可以清晰地看出，后面的覆蓋了前面的屬性

margin

和padding一樣，也可以設(shè)置四個(gè)值。不過表示的是外邊距。如圖

 margin: 1px 2px 3px 4px;

同樣，四個(gè)值表示上右下左外邊距，順時(shí)針

其他的都和padding一樣，也可以多帶帶設(shè)置各個(gè)方向的margin,如margin-top等，不贅述。

border

border:10px solid black;

三個(gè)參數(shù)值，表示邊框的粗細(xì)，線條樣式，顏色

也可以分開設(shè)置。

border-style: solid dashed dotted double;

上面將盒子四周的border樣式設(shè)置不同。

content

圖中的100*100的空間就是content。也即是我們在css中設(shè)置的width和height大小

由下圖可以看出：div大小

水平空間大小 = border(左右) + padding(左右) + width

垂直空間大小 = border(上下) + padding(上下) + height

GPU云服務(wù)器云服務(wù)器盒子模型比價(jià)盒子盒子比價(jià) 電視盒子

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114477.html

相關(guān)文章

盒子模型的理解

摘要：盒子模型就是在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的技術(shù)所使用的一種思維模型。盒子模型是中一個(gè)重要的概念，理解了盒子模型才能更好的排版。標(biāo)準(zhǔn)盒子模型從上圖可以看到標(biāo)準(zhǔn)盒子模型的范圍包括，并且部分不包含其他部分。概述網(wǎng)頁設(shè)計(jì)中常聽的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模型都具備這些屬性，也主要是這些屬性。這些屬性我們可以把它...

xiangzhihong 2019-08-30 12:49 評論0 收藏0
盒子模型的理解

摘要：盒子模型就是在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的技術(shù)所使用的一種思維模型。盒子模型是中一個(gè)重要的概念，理解了盒子模型才能更好的排版。標(biāo)準(zhǔn)盒子模型從上圖可以看到標(biāo)準(zhǔn)盒子模型的范圍包括，并且部分不包含其他部分。概述網(wǎng)頁設(shè)計(jì)中常聽的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模型都具備這些屬性，也主要是這些屬性。這些屬性我們可以把它...

myshell 2019-08-01 15:05 評論0 收藏0
小白都能讀懂的 Cell 模型：一個(gè)被施展了魔法的盒子

摘要：為了讓大家更好的理解公鏈的模型，我們?yōu)榇蠹規(guī)韮善谛“锥寄茏x懂的模型文章。該篇是小白都能讀懂的模型系列文章之一秘猿科技區(qū)塊鏈小課堂第期只能存放數(shù)字的盒子我們先從區(qū)塊鏈鼻祖說起。設(shè)計(jì)一條好的底層公鏈，必須從技術(shù)角度、經(jīng)濟(jì)角度、以及共識角度進(jìn)行全方位的考量。我們花了 4 期（第 16/17/18/19 期）向大家解釋了底層公鏈 CKB 技術(shù)實(shí)現(xiàn)中的關(guān)鍵點(diǎn)之一：Cell 模型。為了讓大家更...

syoya 2019-06-27 19:20 評論0 收藏0
【前端】CSS盒子模型

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

Keagan 2019-08-30 15:55 評論0 收藏0
「前端早讀君」css進(jìn)階之徹底理解視覺格式化模型

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

Eidesen 2019-08-23 14:25 評論0 收藏0