圣杯布局
圣杯特点:左右两个元素设置了定位,并设置位置值。
<!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>