盒子模型

URLOS 發布于2019-08-29 18:39 / 2685人閱讀

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

盒子模型

padding

可以設置四個值，如圖

padding: 1px 2px 3px 4px;

表示內邊距，內容與盒子上右下左的距離。

記住順時針轉就行。

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

如圖，只規定了兩個，但是在下面的盒子模型中默認使得對面的padding屬性一致。

只規定一個，那么上下左右內邊距均為一致。

還可以多帶帶設置內邊距

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

同時設置會怎么覆蓋呢

這是css代碼的順序

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

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

margin

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

 margin: 1px 2px 3px 4px;

同樣，四個值表示上右下左外邊距，順時針

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

border

border:10px solid black;

三個參數值，表示邊框的粗細，線條樣式，顏色

也可以分開設置。

border-style: solid dashed dotted double;

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

content

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

由下圖可以看出：div大小

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

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

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

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

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

盒子模型的理解

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

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

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

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

摘要：為了讓大家更好的理解公鏈的模型，我們為大家帶來兩期小白都能讀懂的模型文章。該篇是小白都能讀懂的模型系列文章之一秘猿科技區塊鏈小課堂第期只能存放數字的盒子我們先從區塊鏈鼻祖說起。設計一條好的底層公鏈，必須從技術角度、經濟角度、以及共識角度進行全方位的考量。我們花了 4 期（第 16/17/18/19 期）向大家解釋了底層公鏈 CKB 技術實現中的關鍵點之一：Cell 模型。為了讓大家更...

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

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

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

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

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