【前端】自适应布局方法总结
一栏固定一栏自适应
实现代码:
<!DOCTYPE html> <html> <head> <title>自适应布局-一栏固定一栏自适应</title> <meta charset="utf-8"> <style type="text/css"> *{ padding: 0; margin: 0; } #left{ height: 600px; width: 200px; float: left; background-color: #fffc00; } #main{ height: 600px; width: auto; background-color: #03c03c; } </style> </head> <body> <div id="left">left 固定宽度</div> <div id="main">main 自适应宽度</div> </body> </html>
左右两栏固定,中间自适应
- 方法一 :使用float浮动
自身浮动法的原理就是使用对左右使用分别使用float:left和float:right,float使左右两个元素脱离文档流,中间元素正常在正常文档流中,使用margin指定左右外边距对其进行一个定位。
<!DOCTYPE html> <html> <head> <title>自适应布局</title> <meta charset="utf-8"> <style type="text/css"> *{ padding: 0; margin: 0; } #container{ width: 100%; margin: 0 auto; } #left{ width: 200px; height: 600px; float: left; background-color: #fffc00; } #right{ width: 100px; height: 600px; float: right; background-color: orange; } #main{ height: 600px; margin-left: 0 100px 0 200px; background-color: #03c03c; } </style> </head> <body> <div id="container"> <div id="left">left 200px</div> <div id="right">right 100px</div> <div id="main">main 自适应</div> </div> </body> </html>
- 方法二:使用绝对定位
绝对定位法原理是将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们上面,然后使用margin属性,留出左右元素的宽度,既可以使中间元素自适应屏幕宽度。
<!DOCTYPE html> <html> <head> <title>自适应布局</title> <meta charset="utf-8"> <style type="text/css"> *{ padding: 0; margin: 0; } #left{ width: 200px; height: 600px; position: absolute; top: 0; left: 0; background-color: #fffc00; } #right{ width: 100px; height: 600px; position: absolute; top: 0; right: 0; background-color: orange; } #main{ height: 600px; position: absolute; left: 200px; right: 100px; top: 0; background-color: #03c03c; } </style> </head> <body> <div id="left">left 200px</div> <div id="right">right 100px</div> <div id="main">main 自适应</div> </body> </html>
- 方法三:使用负margin(圣杯布局)
圣杯布局的原理是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div,包含div需要设置float属性使其形成一个BFC,并设置宽度,并且这个宽度要和left块的margin负值进行配合,具体原理参考这里。这里对圣杯布局解释特别详细。
<!DOCTYPE html> <html> <head> <title>自适应布局</title> <meta charset="utf-8"> <style type="text/css"> *{ padding: 0; margin: 0; } #wrap{ width: 100%; float: left; } #main{ height: 600px; margin: 0 100px 0 200px; background-color: #03c03c; } #left{ width: 200px; height: 600px; float: left; margin-left: -100%; background-color: #fffc00; } #right{ width: 100px; height: 600px; float: left; margin-left: -100px; background-color: orange; } </style> </head> <body> <div id="wrap"> <div id="main">main 自适应</div> </div> <div id="left">left 200px</div> <div id="right">right 100px</div> </body> </html>
- 方法四:使用flex(css3新特性)
<!DOCTYPE html> <html> <head> <title>自适应布局</title> <meta charset="utf-8"> <style type="text/css"> *{ padding: 0; margin: 0; } #container{ width: 100%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } #left{ width: 200px; height: 600px; background-color: #fffc00; } #main{ width: auto; height: 600px; background-color: #03c03c; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; -o-flex: 1; flex: 1; } #right{ width: 100px; height: 600px; background-color: orange; } </style> </head> <body> <div id="container"> <div id="left">left 200px</div> <div id="main">main 自适应</div> <div id="right">right 100px</div> </div> </body> </html>