CSS學習筆記之盒模型

2021-08-19 08:15:22 字數 1176 閱讀 2157

1.邊框

div 來設定邊框粗細為 2px、樣式為實心的、顏色為紅色的邊框:

div1)border-style(邊框樣式)常見樣式有:

dashed(虛線)| dotted(點線)| solid(實線)。

2)border-color(邊框顏色)中的顏色可設定為十六進製制顏色,如:

border-color:#888;//前面的井號不要忘掉。

3)border-width(邊框寬度)中的寬度也可以設定為:

thin | medium | thick(但不是很常用),最常還是用象素(px)。

實現其它三邊(上、右、左)邊框的設定:

border-top:1px solid red;

border-right:1px solid red; 

border-left:1px solid red;

2.-寬度和高度

css內定義的寬(width)和高(height),指的是填充以里的內容範圍。

因此乙個元素實際寬度(盒子的寬度)=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。

例:css**:

divhtml**:

文字內容

元素的實際長度為:10px+1px+20px+200px+20px+1px+10px=262px

3.填充(為內容和邊框之間的關係)

元素內容與邊框之間是可以設定距離的,稱之為「填充」。填充也可分為上、右、下、左(順時針)。

例:div

div/*如果上、右、下、左的填充都為10px;*/

div/*如果上下填充一樣為10px,左右一樣為20px*/

4.邊界(邊框和邊框之間的關係)

/*元素與其它元素之間的距離可以使用邊界(margin)來設定。邊界也是可分為上、右、下、左。*/

divdiv

/*如果上右下左的邊界都為10px;*/

div/*如果上下邊界一樣為10px,左右一樣為20px*/

padding和margin的區別,padding在邊框裡,margin在邊框外。

css學習筆記 盒模型,布局

1 外邊距疊加 當乙個元素出現在另乙個元素上面時第乙個元素的底邊距與第二個元素的上邊距發生疊加,元素被包含時也有可能會發生疊加 如果沒有內邊距和邊框 如果乙個空元素沒有內邊距和邊框本身也會發生上下邊距的疊加。只有普通文件流中塊框的垂直外邊距才會發生疊加,行內框 浮動框或絕對定位框之間的外邊距不會發生...

css盒模型筆記

一 總述 網頁是由乙個多個矩形框組成的,每乙個框都可以看成是乙個盒子,而乙個盒子 乙個元素 又是由4個矩形巢狀而成。分別是content box 內容 padding box 填充或內邊距 border box 邊框 margin box 外邊距 和布局的區別 布局是指多個盒子 元素 在頁面上的定位...

CSS之盒模型

怎麼理解盒子模型?盒子模型是樣式表 css 控制頁面的很重要的概念。如果理解了盒子模型和其中每個元素的用法,才能熟練使用css的定位方法和技巧。所有的頁面的元素都可以看成是乙個盒子,佔據一定的頁面空間。佔據的空間要比實際使用的空間要大得多。我們可以調整盒子的邊框和距離,來調整盒子 頁面和頁面中的元素...