一、fiex布局
flex布局也称为弹性布局
其属性为:
- flex-direction:主轴的方向。
- flex-wrap:超出父容器子容器的排列样式。
- flex-flow:flex-direction 属性和 flex-wrap 属性的简写形式。
- justify-content:子容器在主轴的排列方向。
- align-items:子容器在交叉轴的排列方向。
- align-content:多根轴线的对齐方式。
<!DOCTYPE html> <html lang="ne"> <head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0; padding: 0; } div { height: 500px; } .one { display: table; width: 100%; } .one > div { display: table-cell; } .two { width: 300px; background-color: red; } .four { width: 300px; background-color: yellow; } .three { flex: 1; background-color: blue; } </style> </head> <body> <div class="one"> <div class="two"></div> <div class="three"></div> <div class="four"></div> </div> </body> </html>
运行如下:
二、定位布局 定位布局是利用position来实现,可以使用absolute绝对定位移动元素的位置。
<!DOCTYPE html> <html lang="ne"> <head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0; padding: 0; } div { height: 500px; } .two { position: absolute; width: 300px; left: 0; top: 0; background-color: red; } .three { background-color: yellow; margin: 0 300px; } .four { position: absolute; width: 300px; right: 0; top: 0; background-color: blue; } </style> </head> <body> <div class="two"></div> <div class="three"></div> <div class="four"></div> </body> </html>
运行如下:
三、浮动布局 浮动布局用float属性来实现,然后可根据需要使用left和right实现布局方式。
<!DOCTYPE html> <html lang="ne"> <head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0; padding: 0; } div { height: 500px; } .left { width: 300px; float: left; background-color: red; } .right { width: 300px; float: right; background-color: black; } .middle { background-color: pink; margin: 0 300px; } </style> </head> <body> <div class="left"></div> <div class="right"></div> <div class="middle"></div> </body> </html>
运行如下: