圣杯双飞翼布局

最新推荐文章于 2024-04-16 10:42:49 发布

陈小梓forever

最新推荐文章于 2024-04-16 10:42:49 发布

阅读量110

点赞数

本文链接：https://blog.csdn.net/weixin_43916694/article/details/103257123

版权

圣杯双飞翼布局是什么？？？
他们都是典型的三栏式布局，并且实现的效果都是一致的：

两侧宽度固定，中间宽度自适应
中间栏放在文档流前面
三栏全部浮动

但是他们在解决中间栏 div 的内容不被遮挡问题上是有所差异。
在看布局之前我们还要了解一个内容就是盒子模型
盒子模型有两种：

W3C盒子模型
padding和border不被包含在定义的width和height之内，Element width = width + border + padding
IE盒子模型
padding和border被包含在定义的width和height之内，Element width = width

默认使用W3C盒子模型，如果想使用IE盒子模型可以设置元素的box-sizing属性进行修改。

圣杯布局

给中间栏设置相对定位，再结合运用left和right属性

DOM:
<body>
    <div id="header">header</div>
    <div id="container">  
      <div id="center" class="column">middle</div>
      <div id="left" class="column">left</div>
      <div id="right" class="column">right</div>
    </div>
    <div id="footer">footer</div>
    </body>
</html>

<style>
body{
    margin: 0;
}
#header{
    width: 100%;
    background-color: #ccc;
}
#container{
    width: 100%;
    height: 200px;
    background: yellow;
    padding-left: 200px;  /* 左边栏的宽度*/
    padding-right: 300px; /* 右边栏的宽度*/
    /* 设置左右边距会产生滚动条是因为元素默认是W3C的盒子模型 
     * 即元素的宽度只是元素内容的宽度*/
    box-sizing: border-box;    /* 使元素的宽度包括内容内边距和边框 */
}
.column{
    float: left;
    height: 200px;
    position: relative;
}
#center{
    width: 100%;
    background-color: red;
}
#left{
    width: 200px;
    background-color: aqua;
    margin-left: -100%;  /* 根据父级元素定义，即container */
    right: 200px;
}
#right{
    width: 300px;
    background-color: blueviolet;
    margin-right: -300px;
}
#footer{
    clear: both; /* 清除浮动*/
    width: 100%;
    background-color: #ccc;
}
</style>

双飞翼布局

在中间栏的div中嵌套一个div，内容写在嵌套的div里，对嵌套的div使用margin-right和margin-left属性。

DOM:
<body>
    <div id="header">herder</div>
    <div id="container" class="column">
        <div id="center">center</div>
    </div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
    <div id="footer">footer</div>
</body>

<style>
body{
    margin: 0;
}
#header{
    width: 100%;
    background-color: #ccc;
}
.column{
    float: left;
    height: 200px;
}
#container{
    width: 100%;
    height: 200px;
    background-color: red;
}
#center{
    margin:0 300px 0 200px;
}
#left{
    width: 200px;
    background-color: aqua;
    margin-left:-100%;
}
#right{
    width: 300px;
    background-color: blueviolet;
    margin-left:-300px;
}
#footer{
    clear: both; /* 清除浮动*/
    width: 100%;
    background-color: #ccc;
}
</style>

最终的效果

圣杯双飞翼布局

陈小梓forever

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圣杯双飞翼布局

圣杯双飞翼布局是什么？？？他们都是典型的三栏式布局，并且实现的效果都是一致的：两侧宽度固定，中间宽度自适应中间栏放在文档流前面三栏全部浮动但是他们在解决中间栏 div 的内容不被遮挡问题上是有所差异。在看布局之前我们还要了解一个内容就是盒子模型盒子模型有两种：W3C盒子模型padding和border不被包含在定义的width和height之内，Element width...
复制链接

扫一扫