1. 程式人生 > >前端基礎第六天

前端基礎第六天

2019年.依舊是變得更優秀的一年,繼續好好學習

一,背景相關屬性
1.background-color:背景顏色
取值:關鍵字,red:rgb;rgba;#;
2.background-image:背景圖片
取值url(路徑)
預設是平鋪的
3.background-repeat:背景平鋪
取值:repeat平鋪,預設的
no-repeat;不平鋪
repeat-x;水平平鋪
repeat-y,垂直平鋪
4.background-position:背景位置
取值:關鍵字:水平方向:left,center,right
垂直方向:top,center,bottom
數字+px;x軸和y軸座標,對應的是圖片左上角的座標
背景連寫:background:顏色 圖片 平鋪 位置
如:background:red url(01.gpg) no-repeat center center:
二.元素的三種顯示方法
1.行內元素display:inline;
顯示特點:一行多個,不能設定寬高
代表:span,a
2.塊元素,display:block;
顯示特點:獨佔一行,可以設定寬高
代表:div,h,p
3.行內塊元素display:inline-block
顯示特點:一行多個,可以設定寬高
代表:input,img
三種方式的轉換
display:inline-block:轉化成行內塊元素
display:inline;轉化成行內元素
display:block:轉換成塊級元素
bug;p標籤不能巢狀div標籤
三.行高設定line-height
概念:基線到基線的距離
作用:讓文字垂直居中,
line-height標籤的高度
四.標籤偽類選擇器
選擇是標籤的某種狀態
a:link,點選前的樣式
a:visited:連結連結點選後的樣式
a:hover;滑鼠懸浮上去的樣式;可以設定其他標籤,經常使用
a:active;點選時刻的樣式
注意書寫順序:lvha
五,居中方法的總結
水平居中
text-align:center;
文字,行內元素,行內塊元素
margin:0 auto;
塊級元素
垂直居中
line-height,標籤的高度
文字,行內塊元素,行內元素