div標籤的設定

2021-07-24 07:04:12 字數 2015 閱讀 1504

div基本設定:

width 

寬height

高background

背景background-color

背景色(

英文單詞

十六進製制

rgb)

背景圖background-image:url("

路徑")

背景圖平鋪

background-repeat

:no-repeat repeat-x repeat-y

背景圖定位

background-position

:第乙個值(

x軸的位置)第二個值(

y軸的位置);

第乙個值:

left center right 30px;

第二個值:

top center bottom 100px;

復合寫法

背景圖滾動

background-attachment: fixed;

border

邊框 :

復合寫法

border:border-with border-style  border-color;

border-style

邊框樣式

solid

實線dashed

虛線dotted

點線border-color

邊框顏色

透明:transparent

內邊距:

padding 內邊距  內填充

padding-left: 80px;左內邊距

padding-top: 20px;上內邊距

padding-right: 40px;右內邊距

padding-bottom: 60px;下內邊距

padding 的復合寫法

padding:10px;乙個值代表  上右下右都是10px;

padding: 10px 20px;兩個值 乙個值代表上下 第二個值代表左右

padding:10px 20px 40px;三個值 第乙個值代表上 第二個值代表左右 第三個值代表下

padding: 10px 20px 30px 30px;四個值 第一值代表上 第二個值代表右 第三個值代表下 第四個值代表左

外邊距:

margin 內邊距  內填充

margin-left: 80px;左內邊距

margin-top: 20px;上內邊距

margin-right: 40px;右內邊距

margin-bottom: 60px;下內邊距

margin 的復合寫法:

margin:10px;乙個值代表  上右下右都是10px;

margin: 10px 20px;兩個值 乙個值代表上下 第二個值代表左右

margin:10px 20px 40px;三個值 第乙個值代表上 第二個值代表左右 第三個值代表下

margin: 10px 20px 30px 30px;四個值 第一值代表上 第二個值代表右 第三個值代表下 第四個值代表左

標籤的巢狀:

確定父子級關係

1、第乙個子級的

margin-top

會在特定的情況下穿透父級

規避方法:

1、給父級加邊框

2、給父級加

overflow:hidden;

3、不要用

margin-top;

父級的padding-top

代替 4

、兄弟關係的

margin-top

和margin-bottom

會疊樣盒模型

空間大小:

盒子的總寬度:border-left+padding-left+width+padding-right+border-right

盒子的總高度:border-left+padding-top+height+padding-bottom+border-bottom

HTML標籤之div標籤

div標籤的重要作用 1 劃分區域,使 更具有邏輯性 2 可結合css針對該區域進行樣式控制 看乙個沒有使用div標籤的示例,如下 doctype html html head title 這是頁面標題 title meta name keywords content 自學h5 h3 靜夜思 h3 ...

讓div可編輯,設定標籤的可讀可寫屬性

1 新增contenteditable屬性讓文字處於可編輯狀態,這裡可以編輯 contenteditable inherit 預設 contenteditable plaintext only 輸入純文字 contenteditable true contenteditable false cont...

div標籤消除浮動

1 第乙個div 第二個div 1 的截圖為,可以看到,id2和id3並沒有在id1中。這就是沒有清除浮動的效果。清除浮動的方法 1 對父級設定合適的高度 對父級設定合適的高度進行清除浮動,父級內內容的高度為20px 2px 22px,在id1中增加樣式height 22px 即可。效果圖 缺點 對...