1.流体布局
<!DOCTYPE html> <html lang="en"> <head> <style> /*左右浮动,中间margin或者overflow*/ /*缺点就是主要内容无法最先加载,当页面内容较多时会影响用户体验。*/ .left { float: left; height: 200px; width: 100px; background-color: red; } .right { width: 200px; height: 200px; background-color: blue; float: right; } .main { margin-left: 100px; margin-right: 200px; /*或者overflow: hidden;或者auto*/ height: 200px; background-color: green; } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="main"></div> </div> </body> </html>
2.圣杯布局
<!DOCTYPE html> <html lang="en"> <head> <style> /*要点:父元素设置margin左右,main宽度100%,然后left和right都设置margin-left左移到同一排*/ .container { margin-left: 100px; margin-right: 200px; } .main { float: left; width: 100%; height: 300px; background-color: red; } .left { float: left; width: 100px; height: 300px; margin-left: -100%;/*左移100%,使left和main在同一行*/ position: relative; left: -100px;/*左移100px,与container的margin-left相对应。使元素响应地靠左排列*/ background-color: blue; } .right { float: left; width: 200px; height: 300px; margin-left: -200px;/*左移自身宽度,使right和main在同一行*/ position: relative; right: -200px;/*右移200px,与container的margin-right相对应。使元素响应地靠右排列*/ background-color: green; } </style> </head> <body> <div class="container"> <div class="main"></div><!--先写主体内容,优先渲染--> <div class="left"></div> <div class="right"></div> </div> </body> </html>
3.双飞翼布局
<!DOCTYPE html> <html lang="en"> <head> <style> /*要点:全部都浮动,然后margin-left位移到同一排*/ .content { float: left; width: 100%; } .main { height: 200px; margin-left: 100px; margin-right: 200px; background-color: green; } .left { float: left; height: 200px; width: 100px; margin-left: -100%; background-color: red; } .right { width: 200px; height: 200px; float: right; margin-left: -200px; background-color: blue; } </style> </head> <body> <div class="content"> <div class="main"></div><!--先写主体内容,优先渲染--> </div> <div class="left"></div> <div class="right"></div> </body> </html>
4.flex布局
<!DOCTYPE html> <html lang="en"> <head> <style> /*缺点:新技术要考虑浏览器兼容*/ .container { display: flex; } .main { flex: 1; height: 300px; background-color: red; } .left { order: -1;/*排最左*/ flex-basis: 200px;/*分配空间*/ height: 300px; background-color: blue; } .right { flex-basis: 100px; height: 300px; background-color: green; } </style> </head> <body> <div class="container"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div> </body> </html>
5.绝对定位布局
<!DOCTYPE html> <html lang="en"> <head> <style> .container { position: relative; } .main { height: 300px; margin: 0 100px; background-color: green; } .left { position: absolute; width: 100px; height: 300px; left: 0; top: 0; background-color: red; } .right { position: absolute; width: 100px; height: 300px; background-color: blue; right: 0; top: 0; } </style> </head> <body> <div class="container"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div> </body> </html>
6.table布局
<!DOCTYPE html> <html lang="en"> <head> <style> /*缺点:无法设置栏间距,也无法优先加载内容*/ .container { display: table; width: 100%; } .left, .main, .right { display: table-cell; } .left { width: 200px; height: 300px; background-color: red; } .main { background-color: blue; } .right { width: 100px; height: 300px; background-color: green; } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="main"></div> <div class="right"></div> </div> </body> </html>
时间: 2024-11-01 19:32:10