页面布局圣杯，双飞翼，等高

最新推荐文章于 2023-05-08 10:10:46 发布

@西楚霸王

最新推荐文章于 2023-05-08 10:10:46 发布

阅读量178

点赞数

分类专栏：页面布局圣杯，双飞翼，等高文章标签： html5 css3

本文链接：https://blog.csdn.net/qq_41027812/article/details/108192583

版权

本文介绍了页面布局中的圣杯布局和双飞翼布局，这两种布局方式旨在实现左侧、右侧固定，中间内容自适应的效果。圣杯布局通过设置盒子的浮动和负边距实现，但当中间部分宽度小于左侧时布局可能混乱。双飞翼布局则在圣杯基础上增加了内部子标签的嵌套，避免了这个问题。此外，还探讨了假等高和真等高的实现方法，包括内外边距相消法和通过相对定位移动盒子来达到等高的效果。

摘要由CSDN通过智能技术生成

页面布局

圣杯布局

1.设置三个盒子，左侧固定，右侧固定，中间自适应，都设置浮动，中间先解析
2.左侧盒子，margin-left:-100%,右侧盒子设置，margin-left: -本身宽度
3.给父标签设置内边距，然后给左右两侧设置定位移动

圣杯布局缺点：当中间部分宽度小于左侧部分宽度时，布局会混乱

       <style>
           * {
    
               padding: 0;
               margin: 0;
           }
           .center {
    
               width: 100%;
               height: 400px;
               background-color: red;
               float: left;
           }
           .left {
    
               width: 200px;
               height: 400px;
               background-color: blue;
               float: left;
               margin-left: -100%;
               position: relative;
               left: -200px;
           }
           .right {
    
               width: 300px;
               height: 400px;
               background-color: gold;
               float: left;
               margin-left: -300px;
               position: relative;
               left: 300px;
           }
           .clearfix::after{
    
               content: "";
               display: block;
               clear: both;
           }
           .wrap {
    
               padding: 0 300px 0 200px;
           }
       </style>
   </head>
   <body>
       <div class="wrap clearfix">
           <div class="center">center</div>
           <div