1.visibility:hidden;---隱藏並佔位 visible--默認值,可見
html
display:none;--隱藏,不佔位ui
2.用百分比的方式作屏幕適配code
如下代碼在不一樣屏幕表現不同,多是一行顯示3個div,也多是三行,每行各顯示一個divhtm
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ border: 1px solid black; float: left; } .box1{ width: 200px } .box2{ width: 300px } .box3{ width: 500px } </style> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> </body> </html>
改用百分比方式:blog
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ border: 1px solid black; float: left; } .box1{ width: 20%; } .box2{ width: 30%; } .box3{ width: 50%; } </style> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> </body> </html>
不管多大屏幕都是兩行(box1和box2有邊框,因此加起來超過50%,因此box3會另起一行)文檔
3.hr可能會致使屏幕能夠左右滑動,出現橫向滾動條,給hr定義一個寬度能夠解決此問題it
4.margin:auto並不能使inline或inline-block居中,只對block有效class
5.float會脫離文檔流,後面的元素會佔據它的位置,可是它不能佔據前面的元素的位置meta