CSS和CSS3（背景，圖片，浮動等）
阿新 • • 發佈：2021-10-19
CSS背景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background</title> <style> div{ width: 100%; height: 1500px; border: 10px solid red; background: skyblue url(img/bg-little.png) no-repeat top right fixed; } </style> </head> <body> <div></div> </body> </html>
css3背景
background-size指定了背景圖片是否擴大縮小。contain一邊緊貼邊緣拉伸，最終高或者寬有留白。 cover按照一遍拉伸，很可能內容區域超出。而設定100% 100%是高，寬都能將內容顯示出來。具體還是跟圖片有關。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Size</title> <style type="text/css"> * { margin: 0; padding: 0; border: none; } div { width: 800px; height: 400px; padding: 50px; border: 50px solid transparent; /*background: color position size repeat origin clip attachment image;*/ /*background: #abcdef center 50% no-repeat content-box content-box fixed url('bg1.jpg');*/ background: #abcdef url('bg1.jpg') no-repeat center center; background-size: 50%; background-origin: content-box; background-clip: content-box; background-attachment: fixed; } span.div_border { position: absolute; top: 0; left: 0; width: 800px; height: 400px; padding: 50px; border: 50px solid rgba(255, 0, 0, .25); } span.div_padding { position: absolute; top: 50px; left: 50px; width: 800px; height: 400px; border: 50px solid rgba(255, 255, 0, .25); } </style> </head> <body> <div></div> <span class="div_border"></span> <span class="div_padding"></span> </body> </html>
浮動
就是高度丟失了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> * { margin:0; padding:0; } .container { border:1px solid blue; margin:100px; /*overflow: hidden;*/ /*zoom: 1;*/ } .block1 { width:50px; height:50px; background-color: red; float: left; } .block2 { width:50px; height:50px; background-color: black; float: left; } .block3 { width:50px; height:50px; background-color: blue; float: left; } </style> </head> <body> <div class="container"> <div class="block1"><span>1</span></div> <div class="block2"><span>22</span></div> <div class="block3"><span>333</span></div> </div> </body> </html
還有一個現象，叫文字環繞，將圖片左浮動，後面的文字就會環繞圖片周圍，這是因為浮動元素脫離文件流，但還是在文字流當中。