html前端學習四 div

2021-10-01 15:51:59 字數 2551 閱讀 1585

div盒子:

div主要用來裝其他元素,單獨對div進行css樣式或布局,預設佔據一行,沒有給寬度會撐開這一行,與p標籤相同

有預設的寬度,自動將盒子撐到最大的寬度

預設的高度為0,不給高沒有任何效果

和p元素相似,前後元素都會被換行 被稱為「塊級元素」

塊級元素特點:

html顯示時 前後元素會被換行 預設佔據一行

p標籤h標籤

br標籤

ul標籤

ol標籤

dl標籤

li標籤

form標籤

div標籤

table標籤

body標籤

html標籤

內聯元素

html時 併排一列 不能換行的標籤

margin樣式 外邊距

移動元素到合適位置

margin:允許負數

margin-left 左邊外邊距

margin-top 頂部外邊距

margin-bottom 底部外邊距

margin-right 右邊外邊距

注:塊級元素預設佔據一行,前後的元素會被換行,所以塊級元素右邊放不了東西

margin-right沒有意義

效果:

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-dw6xglwp-1577065702691)(

外邊距margin

margin簡寫解析

1個元素

margin:50px;
等同於

margin-top:50px;

margin-right:50px;

margin-bottom:50px;

marghin-left:50px;

2個元素

margin:50px 100px;
等同於:

margin-top:50px;

margin-right:100px;

margin-bottom:50px;

marghin-left:100px;

以順時針取元素畫素

3個元素

marghin:50px 150px 100px
等同於:

margin-top:50px;

margin-left: 150px;

margin-bottom: 100px;

marghin-right:150px;

左右相等取法

margin: 0 auto;

margin:atuo ;

等同於

margin-left:auto;

margin-right:auto;

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-cdzve04g-1577065702692)(

內邊距padding

padding:不允許負數

padding把div盒子會撐大

.box

.box:hover

border:邊框

border-color:設定邊框的顏色(必須有邊框)

border-style:邊框風格樣式(線)-dashed虛線、dotted點狀、solid實線、double雙線

border-top:上邊框

border-right:右邊框

border-bottom:下邊框

border-left:左邊框

hover 選擇器

選擇滑鼠指標浮動在其上的元素,並設定其樣式:

a:hover

span標籤:

一般用於文字上的樣式,不給樣式沒有任何效果

ps:應用樣式來新增效果。

只有在塊級元素,垂直方向的外邊距,會重合(摺疊)在一起

乙個塊級元素的下外邊距,和相鄰塊級元素的上外邊距,只會應用乙個外邊距。(誰的外邊距大,就用誰的)

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-fdttueyn-1577065702693)(

border:1px solid transparent;
transparent:透明顏色

防止邊距重合的方法

摺疊示意圖:

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-4zffxygf-1577065702694)(

#div巢狀		

#style形式

.box1

.parent

overflow: hidden; 內容會被修剪,並且其餘內容是不可見的。

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-fyczi7o3-1577065702694)(

前端HTML學習

html 標題 heading 是通過 標籤來定義的 是英文header 頁首 標題的縮寫 html 段落是通過標籤來定義的 是英文paragraph 段落 的縮寫 html 鏈結是通過標籤來定義的 是英文anchor 錨點 的縮寫 html 影象是通過標籤來定義的 注意 元素是自關閉元素,不需要結...

前端學習 HTML學習

開始學習前端知識,從html開始。html 為由一對尖括號 所括起來的內容以特定含義.這樣的標識稱為乙個 標籤 tag w3c上html標籤總結 html 參考手冊 charset utf 8 name keywords content name description content name v...

前端學習筆記(四)html文字屬性

文字大小 font size 文字字型 font family 文字粗細 font weight 文字傾斜 font style 文字顏色 color 文字行高 line height 文字屬性font簡寫 按順序寫出所有屬性 1 text align 水平對齊方式。屬性值 2 vertical a...