圣杯布局
圣杯特点：左右两个元素设置了定位，并设置位置值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <style> * {padding: 0; margin: 0;} .box { height: 300px; padding-left: 200px; padding-right: 200px; } .left { float: left; width: 200px; height: 300px; /* 浮动元素的 margin-left 值是相对于其父元素设置的。 对于 .box 元素里面的 .center/.left/.right元素来说， 父元素 .box 够放置时，三个元素是水平排的，排不下的要换行， 对于 .left，水平位置放不下了，会被挤到第二行，此时设置的 margin-left: -100%， 可以看成 .center，.left 在水平一行，但 .left 看不见，设置 margin-left:-100% 时， .left 的最左边会往左走，走的距离是 .box 宽度，故也是为什么 margin-left能使得元素上移原因 */ margin-left: -100%; background: pink; position: relative; left: -200px; /*因为父元素的padding-left:200px，不设置box-sizing时，浮动元素只在父元素conent能*/ } .center { float: left; width: 100%; height: 300px; background: aquamarine; } .right { float: right; width: 200px; height: 300px; /* 不设置这个会换行，因为水平位置已经没有.right元素位置了（.box已占满水平位置） float元素的位置只会在父元素的width范围下排布，在.box元素没有设置box-sizing时， .right元素会在.box下方，且在.box的padding-right前显示。 也就是.right的活动范围是在父元素的width内. */ /*margin-left: -200px; 相当于往右走200px*/ background: skyblue; position: relative; right: -200px; /*因为父元素padding-right:200px*/ } </style> </head> <body> <div class="box"> <div class="center">center</div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
