目錄css
只有塊級標籤才能夠設置長寬html
行內標籤設置了沒有任何做用(僅僅只取決於內部文本值)瀏覽器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Yeah</title> <style> div { width: 200px; height: 100px; } span { width: 500px; height: 400px; } </style> </head> <body> <div> div </div> <span>span</span> </body> </html>
color
後面能夠跟多種顏色數據字體
red
rgb
(1,1,1):能夠利用截圖軟件獲取三基色數字,數字範圍只能是0~255rgba
(128,128,128,0.4):最後一個數字能夠調節顏色的透明度<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>YEAH</title> <style> p { font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif; font-size: 48px; font-weight: lighter; /*color: red;*/ /*color: rgb(156,59,24);*/ /*color: #c3ff69;*/ color: rgba(61,94,86,0.7); } </style> </head> <body> <p> 鵝鵝鵝,曲項向天歌。 </p> </body> </html>
a {
text-decoration: none;
}
取消a標籤默認的下劃線ui
默認是鋪滿整個區域url
一般一個頁面上的一個個小圖標,並非單獨的,而是經過一個很是大的圖片,該圖片上有網址所用到全部的小圖標。spa
經過控制背景圖片的位置,來顯示不一樣的圖標樣式code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>YEAH</title> <style> #d1 { height: 800px; background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573737709470&di=3763ef1067405bd66e3c372343454bc6&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201608%2F24%2F20160824232248_PdVQU.jpeg"); background-attachment: fixed; } </style> </head> <body> <div style="height: 600px;background-color: red"></div> <div style="height: 600px;background-color: blue"></div> <div id="d1"></div> <div style="height: 600px;background-color: greenyellow"></div> </body> </html>
後面跟三個參數htm
顏色,字體,樣式繼承
能夠單獨設置:樣式,顏色,粗細
border-top-style:dotted;
border-top-color:red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
能夠單獨設置某一邊的樣式
border-top: 3px solid red;
border-left: 1px dotted green;
border-right: 5px dashed blue;
border-bottom: 10px solid pink;
也能夠簡寫統一設置
inline
將塊級標籤變成行內標籤
block
可以將行內標籤設置成長寬和獨佔一行
inline-block
便可以設置長度,也能夠在一行展現
display:none
隱藏標籤,而且標籤原來佔的位置也消失了
visibility:hidden
隱藏標籤,可是標籤原來的位置還在
以快遞盒爲例
1.兩個快遞盒之間的距離(標籤與標籤之間的距離)
2.快遞盒盒子的厚度(邊框border
)
3.快遞盒中的物品距離內邊框的距離(內部文本與內邊框之間的距離)
4.物品的大小(文本大小)
margin: 10px;
只寫一個參數,上下左右全是
margin: 10px 20px;
第一個控制的是上下,第二個則是左右
margin: 10px 20px 30px;
第一個控制的是上,第二個是左右。第三個是下
margin: 10px 20px 30px 40px;
第一個控制的是上,第二個是右,第三個是下,第四個是左
margin:0 auto;
左右居中,不能上下居中
float
在CSS
中,任何元素均可以浮動。
浮動的元素,是脫離正常的文檔流(原來的位置會空出來)
瀏覽器會優先展現文本內容(**********)
會形成父標籤塌陷
可清除浮動帶來的影響
.clearfix:after { content: ''; clear: both; /*左右兩邊都不能有浮動的元素*/ display: block; } 哪個父標籤塌陷了,就給它加clearfix這個類屬性值
visible
默認值。內容不會被修改,會呈如今元素框以外
hidden
內容會被修剪,而且其他內容是不可見的
scroll
內容會被修剪,可是瀏覽器會顯示滾動條以便查看其他的內容。
auto
若是內容被修剪,則瀏覽器會顯示滾動條以便查看其他的內容
inherit
規定應該從父元素繼承 overflow
屬性的值
全部的標籤默認都是靜態的,沒法改變位置
position: static;
必須將靜態的狀態修改爲定位以後
相對定位(瞭解) relative
相對於標籤原來的位置,移動
絕對定位(購物車) absolute
相對於已經定位過(只要不是static
均可以 relative
)的父標籤,再作定位(**************)
固定定位(回到頂部) fixed
相對於瀏覽器窗口,固定在某個位置不動
1.不脫離文檔流
相對定位
2.脫離文檔流
浮動的元素
絕對定位
既能夠調顏色,也能夠調字體