CSS宽高背景介绍
本萌新還未畢業(yè),在一家外包公司干了一個月,因煩惱日常瑣事任務,深感外包之坑,以及上班路途艱辛,特轉戰(zhàn)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什么的,html5還出現了一些新的標簽,例如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;可以更方便書寫。關于單位的問題就談到這里,了解有限,等到實際業(yè)務再做分析。 --></body> </html>?
轉載于:https://www.cnblogs.com/LoveMarvin/p/8325467.html
總結
- 上一篇: ssm框架的整合搭建(一)
- 下一篇: SDN期末作业验收