1.媒体查询
@media语法规则
-1.概念：指定样式表规则用于指定的媒体类型和查询条件
-2.语法：@media screen and（width/min-width/max-width）{}
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0px; padding: 0px; } @media screen and (max- 640px){ .d1{ width: 100%; height: 800px; background-color: aquamarine; } } @media screen and (min- 640px) and (max- 800px){ .d1{ width: 100%; height: 800px; background-color: red; } } @media screen and (min- 800px){ .d1{ width: 100%; height: 800px; background-color: bisque; } } </style> </head> <body> <div class="d1"></div> </body> </html>
2.居中
-1.margin：0 auto；
-2.文字居中：line-height；text-align：center；
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> html,body,ul{ margin: 0; padding: 0; } .container{ width: 100%; height: 70px; min-width: 996px; background-color: aqua; } .header{ width: 80%; height: 70px; background-color: pink; min-width: 996px; margin: 0 auto; text-align: center; } ul { line-height: 70px; } ul li { display: inline-block; list-style-type: none; } </style> </head> <body> <div class="container"> <div class="header"> <ul> <li>列表项目</li> <li>列表项目</li> <li>列表项目</li> <li>列表项目</li> </ul> </div> </div> </body> </html>
-3.由table演变过来的一种居中
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .t{ display: table; width: 200px; height: 200px; background-color: aqua; } p{ display: table-cell; text-align: center; vertical-align: middle; } </style> </head> <body> <div class="t"> <p>haha</p> </div> </body> </html>
-4.利用伸缩盒居中
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .outer{ display: -webkit-box; width: 200px; height: 200px; background-color: aqua; -webkit-box-pack: center; -webkit-box-align: center; } .inner{ display: -webkit-box ; width: 100px; height: 100px; background-color: pink; -webkit-box-pack: center; -webkit-box-align: center; } </style> </head> <body> <div class="outer"> <div class="inner"> haha </div> </div> </body> </html>