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...