圣杯布局：圣杯布局是三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染，也就是在html文档中，中间的部分
要写在左右布局之前。
圣杯布局需要用到的东西
1.圣杯布局，需要用到浮动，负边距，相对定位（相对自身定位relative），这种方法不需要添加额外的标签
2.关于margin或者padding单位是百分比的时候，它是基于父级元素或者包含的宽度来进行计算。
<style>.main{width:100%;float:left;background:#D6D6D6;}.left{width:150px;background:#E79F6D;float:left;margin-left:-100%; /*相对于包含快的宽度*/position:relative;left:-150px;}.right{float:left;width:190px;background:#77BBDD;margin-left:-190px;position:relative;right:-190px;}.bd{padding-left:150px;padding-right:190px;}</style>
</head>
<body><div class="bd"><div class="main">Main</div><div class="left">Left</div><div class="right">Right</div></div>
</body>
本文发布于:2024-02-04 22:45:05，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170718078760390.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
