常见的css布局

CastlePeaK 发布于2019-08-02 14:33 / 1772人阅读

实现两边定宽，中间自适应

1.圣杯布局

首先html结构如下




    
    
    
    圣杯布局


    
        2111111111111
        left
        right

css部分

效果如下图，现在我们要让left,和right悬浮在middle两侧

我们给middle、left、right都设置float：left,left让它悬浮在左侧设置margin-left:-100%(负的中间元素的宽度),right让它悬浮在右侧设置margin-right:-200px(负的自身的宽度)现在效果如下：

.left{
    margin-left:-100%;
    }
.right{
    margin-left:-200px;
    }
.left,right,.middle{
    float:left;
    }

现在要解决的是中间部分被left遮挡住了

给.content设置padding左右两边的.left、.right宽度, .left、.right设置相对定位

.content{
    padding:0 200px;
    }
.left,.right{
    position:relative;
    }
 .left{
    left:-200px;
    }
 .right{
    right:-200px;
    }

这样可以实现两边定宽，中间自适应完整代码




    
    
    
    圣杯布局
    


    
        2111111111111
        left
        right

效果图如下:

2.双飞翼布局

html结构如下


        211111111
        left
        right

css

.middle{
     width: 100%;
    background: paleturquoise;
    height: 200px;
    float: left;
    
}
.middle div{/*就是在middle里面添加div设置margin值实现中间自适应*/
    margin-left: 200px;
    margin-right: 200px;
}
.left{
    background: palevioletred;
    width: 200px;
    height: 200px;
    float: left;
    font-size: 40px;
    color: #fff;
    margin-left:-100%;
}
.right{
    width: 200px;
    height: 200px;
    background: purple;
    font-size: 40px;
    float: left;
    color: #fff;
    margin-left:-200px;
}

完整代码

圣杯布局，双飞翼布局的区别

都是两边定宽，中间自适应中间部分放在文档流前面，全部都是设置float:left，区别在于中间部分不被遮挡。双飞翼布局middle里面添加div设置左右的margin值

弹性盒布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53882.html

前端面试之CSS总结(上)

摘要：重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述...

琛ｈ。 2019-08-29 11:18 评论0 收藏0
几种常见的CSS布局

摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。本文概要本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 评论0 收藏0
几种常见的CSS布局

摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。本文概要本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

andot 2019-08-02 11:58 评论0 收藏0
几种常见的CSS布局

摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。本文概要本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

荆兆峰 2019-08-29 17:13 评论0 收藏0
CSS常见布局与居中

摘要：常用于控制页面布局的定位机制普通流相对定位绝对定位和固定定位。左右布局最常用的就是通过浮动左浮或右浮来实现浮动。可以通过设置左右的外边距为值来居中包括图片。这里，就CSS左右布局，左中右布局，水平与垂直居中，进行讨论。 CSS常用于控制页面布局的定位机制：普通流、相对定位、绝对定位和固定定位。还可以使用float属性来让元素浮动。 1.左右布局最常用的就是通过浮动（左浮或右浮）来实...

April 2019-08-30 15:54 评论0 收藏0