CSS寬高背景介紹
阿新 • • 發佈：2018-01-21
我們 若有 ont lan script blog ack 以及 earch
本萌新還未畢業，在一家外包公司幹了一個月，因煩惱日常瑣事任務，深感外包之坑，以及上班路途艱辛，特轉戰erp實施，繼寫日常隨筆，望來日屌絲逆襲，走上人生巔峰。
若有錯誤，請前輩指點迷津，在下謝過。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>寬，高，背景</title> <style> /*html{ font-size: 30px; }*/body{ font-size: 20px; } div{ width: 200px; height: 900px; /*對於這個div元素，你想設置多少寬高，比如寬是100px，高是10px 這些東西你隨便設置（根據實際需要）*/ /*對於一個元素（比如div，span,a什麽的，html 5還出現了一些新的標簽，例如canvas。所謂的樣式就是對 元素，或者元素裏面的字體或圖片進行設置（文本樣式））*/ /*background-color:#000;*/ /*background-color: red;*/ /*background-color: rgb(0,0,0);*/ /*background-color: rgba(0,0,0,0.5);*/ /*這是背景的表示方式*/ /*background-image: url(search.png);*/ /*background-position: left top;*/ /*background-position: center center;*/ /*background-position: 20px 10px;*/ /*background-position: 20px 20px;*/ /*背景圖片的位置，第一個值為水平方向，第二個為垂直方向。可以是數值也可以是top,center類*/ /*background-repeat: no-repeat;*/ /*background-repeat: repeat-x;*/ /*background-repeat: repeat-y;*/ /*這是設定背景圖片是否平鋪，以及平鋪方向。*/ /*接下來是復合型寫法，給元素一張背景圖片，位置，是否平鋪。*/ background:red url(search.png) 50px 0px no-repeat; /*了解背景的其他屬性*/ background-attachment:fixed; /*背景圖是否滾動scroll是滾動；fixed相對於屏幕某個位置固定，不隨滾動條移動； */ /*background-size: 50% 50%;*/ background-size: 10px 500px; /*設置背景圖片大小，此屬性有兼容性問題*/ /*更多的比如多背景等，以後講解，這些常用屬性要熟悉。*/ } /*span{ display: block; font-size: 4em; } span a{ display: block; font-size: 1em; }*/ /*span{ display: block; font-size: 2rem; } span a{ display: block; font-size: 2rem; }*/ </style> </head> <body> <div>這是一個容器，接下來我們對容器的寬，高，背景進行一些設置。 </div> <!-- <span> 這是em <a href="javascript;">這是span標簽下的em</a> </span> --> <!-- 在body下加入一個span元素，對span元素設置字體大小em，其會繼承父級元素body的字體大小，span下的a為1em,意思是a中字體大小和父級span字體大小一直。可見如果嵌套越復雜，em越復雜。 --> <!-- <span> 這是rem <a href="javascript;">這是span標簽下的rem</a> </span> --> <!-- rem是相對根元素html大小進行設定的，（px相對body,em相對父級），如果當瀏覽器縮放影響到字體效果的時候，會用rem來設置字體樣式，當然css3會有兼容性問題，對於ie6-8，我們可以一起和px一起寫。 --> <!-- 一般會在html或者body中加入font-size:62.5%, 就是16px=1.6em=1.6rem;可以更方便書寫。 關於單位的問題就談到這裏，了解有限，等到實際業務再做分析。 --> </body> </html>
CSS寬高背景介紹