盒模型 標籤屬性

2022-06-23 10:15:09 字數 780 閱讀 9081

1 盒模型

組成部分:margin + border + padding + content(width * height)

margin :用於移動盒子的位置

邊框和背景顏色以外的部分

margin:auto

margin-top傳遞問題

border

solid / dashed / dotted / double

三角形 (寬高為0,設定透明邊框,對邊顏色)

padding :移動內容的位置 -- 會把盒子撐大

邊框和背景顏色以內的部分

盒模型的實際寬度計算 = margin + border + padding + width

2 背景屬性

background-color

background-image

background-repeat

background-position

background-attachment

background-size ---- 必須單獨使用

background : red url() no-repeat 10px 20px fixed ;

3 背景圖和插入的區分使用

不會更換的小圖示使用背景圖

經常更換的使用img插入

4 列表樣式 -- 切圖用背景圖插入

5 偽類選擇器

:link

:visited

:hover

:active

6 網頁的版心

盒模型屬性

邊框 border 邊界 邊距 margin 補白 填充 padding 內容區 content 1 邊框 border 1 border 盒子的邊緣。2 用法 1 邊框的寫法 divborder width 邊框的寬度 border color 邊框的顏色 border style 邊框的樣式 邊...

display屬性 盒模型

確實應該對html中的每個元素標籤都要了解一遍,這樣才能恰到好處的使用它們 這裡做個初步的整理,細節實踐中糾正 一 display屬性的三個值 inline,inline block,block 它們改變元素的特性,將元素重新分類成 內聯元素,行內塊元素,塊元素。inline元素 設定width h...

盒模型 box sizing 屬性

css3增添了盒模型 box sizing 屬性,box sizing屬性值 可以有下面三個值 content box 預設值,讓元素維持w3c的標準盒模型。元素的寬度 高度 width height 所佔空間 等於元素邊框寬度 border 加上元素內邊距 padding 加上元素內容寬度 高度 ...