关于我的第十次web作业
三列布局：
方式1：（利用浮动)
css样式部分：
<style> *{ margin:0; padding:0; } html,body{ height:100%; } div{ float:left; height:100%; } .main{ background:blue; width:100%; box-sizing:border-box; padding-left:200px; padding-right:200px; } .left{ background:purple; width:200px; margin-left:-100%;/*其实就是左边框距离右边的距离为100%*/ } .right{ background:green; width:200px; margin-right:-100%; } </style>html部分：
<body> <div class="main">中间的内容</div> <div class="left">左边</div> <div class="right">右边</div> </body>这里需要注意一点，就是中间自适应的那一块放在最前面。
第二个需要知道的知识点是box-sizing的用法。
方式2：（利用flex布局）
html部分： <body> <div class="wrapper"> <div class="left">左边</div> <div class="center">中间</div> <div class="right">右边</div> </div> </body>css部分： <style> html,body{ padding:0; margin:0; } .wrapper{ width:800px; height:300px; border:1px solid black; display:flex; margin:0 auto; } .left,.right,.center{ height:300px; } .left,.right{ flex:0 0 200px; width:200px; background:cornflowerblue; } .center{ margin:0 10px; flex:1; background:pink; } </style>运行结果：
方式3：(利用position的绝对定位)
css部分： <style> html,body{ margin:0; padding:0; } .wrapper{ position:relative; width:800px; height:400px; border:1px solid black; } .main{ width:100%; height:400px; box-sizing:border-box; padding:0 200px; background:pink; } .left,.right{ position:absolute; width:200px; height:400px; background:dodgerblue; } .left{ left:0; top:0; } .right{ top:0; right:0; } </style>html部分： <body> <div class="wrapper"> <div class="main">中间内容区</div> <div class="left">左边区域</div> <div class="right">右边区域</div> </div> </body>运行结果：