前端網頁學習9(css盒子)

2021-10-18 15:00:21 字數 1939 閱讀 1938

border:邊框

padding:內邊距

margin:外邊距

content:內容

盒子的長寬實際與內容的長寬相同。

三大屬性:邊框顏色,邊框線型,邊框粗細

四個邊可分開設定。

邊框定義可以簡寫,且三大屬性無順序要求。

四個邊可分開設定。

可共同設定意義如下

padding: 10px;

四個內邊距都是10px

padding: 10px 15px;

四個內邊距 代表上下,左右

padding: 10px 15px 20px ;

四個內邊距 代表上,左右,下

padding: 10px 15px 20px 25px;

四個內邊距 代表上,右,下,左

3.應用: 可設定導航欄均勻

padding: 0px 20px;

內邊距為20,可以使格仔均勻

四個邊可分開設定。

可共同設定意義如下

padding: 10px;

四個外邊距都是10px

padding: 10px 15px;

四個外邊距 代表上下,左右

padding: 10px 15px 20px ;

四個外邊距 代表上,左右,下

padding: 10px 15px 20px 25px;

四個外邊距 代表上,右,下,左

3.應用: 可設定元素居中

margin: auto;或

margin: 0 auto;

只要左右外邊框為自動,塊級元素便可以居中

text-align: center;

另沒有寬度的行內元素,可以居中

**例項:

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

盒子屬性title

>

>

.div0

.div1

.div2

.div3

.span1

.span2

*style

>

head

>

>

class

="div0"

>

div>

class

="div1"

>

四大屬性div

>

class

="div0"

>

div>

class

="div2"

>

居中div

>

class

="div0"

>

div>

class

="div3"

>

class

="span1"

>

長的內容----span

>

class

="span2"

>

短的span

>

class

="span1"

>

較長的span

>

div>

body

>

html

>

網頁樣式:

(9)CSS背景控制

前面已經提到,css將每個元素視為在單獨的框中進行處理,那麼我們可以通過一些屬性改變元素對應的框的背景,以改善網頁樣式。1 background color 為任何元素指定單一背景顏色 該屬性的值可以為顏色名 16進製制編碼或者rgb值。2 background image 將任一元素的背景設定為一...

9 CSS樣式引入

標籤上使用style屬性直接引入css樣式,即內聯樣式。style color red font size 24px 這是乙個段落p body 在頭部標籤內通過設定css樣式,即內部樣式。charset utf 8 網頁標題title pstyle head 這是一段文字p body html 新建...

html css js入門 9 CSS樣式

css 樣式 css 單位 尺寸 百分比 in 英吋 cm 厘公尺 mm 公釐 pt 磅 1pt等於1 72英吋 px 畫素 計算機螢幕上的乙個點 em 1em等於當前的字型尺寸,2em等於當前字型尺寸的兩倍 css 單位 顏色 rgb x,x,x rgb值,如 rgb 255,0,0 rgb x ...