css布局总结

最新推荐文章于 2023-04-14 15:08:47 发布

meishanxu

最新推荐文章于 2023-04-14 15:08:47 发布

阅读量438

点赞数

分类专栏： H5&CSS3实践总结

本文链接：https://blog.csdn.net/xumeishan0527/article/details/78491686

版权

H5&CSS3实践总结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

三栏式布局任务要求是完成如下图所示布局：
这里写图片描述

有两种方案可实现任务要求的效果：

1、利用float实现浮动布局

首先需要定义父元素的宽高，不定义也可以，不过这样会影响同级兄弟元素的布局，建议定义父元素宽高。

.container{
    margin: 2%;
    height: 500px;
    border: 1.5px solid rgba(37, 74, 86, 0.68);
}

对每个子元素加上float: left;保证所有子元素浮动布局，并脱离文档流。

.container__left{
    float: left;
    width: 200px;
    height: 200px;
    margin:20px;
}
.container__content{
    float: left;
    height: 450px;
    width: calc(100% - 440px) ;
    margin-top: 20px;
}
.container__right{
    float: right;
    width: 160px;
    height: 450px;
    margin: 20px;
}

值得注意的是，如何让中间内容区域实现自适应宽度，这里运用了width: calc(100% - 440px) 语句，440px是左右两边局域宽度和与中间局域间距的总和，这样就可以实现定宽自适应布局。

2、利用position定位实现布局

首先对父元素设置position: relative，作为绝对定位的参考物，然后在子元素中设置position: absolute。

.container{
    position: relative;
    margin: 2%;
    height: 500px;
    border: 1.5px solid rgba(37, 74, 86, 0.68);
}
.container__left{
    position: absolute;
    left: 20px;
    top:20px;
    width: 200px;
    height: 200px;
}

.container__content{
    position: absolute;
    left: 240px;
    top:20px;
    height: 400px;
    width: calc(100% - 440px) ;
}

.container__right{
    position: absolute;
    right: 20px;
    top:20px;
    width: 160px;
    height: 400px;
}

这种设计方法如同PS中画布和图层之间的关系，每个图层就像玻璃板一样一层一层叠加在画布上，这种利用position定位实现布局的方法经常用在轮播图和文字叠在图片上方的场景中。
优劣比较：
方法1只需在子元素上设置float即可，但有时需要清除浮动，且兼容性较差；
方法2需在父元素和子元素中设置position: relative和position: absolute，但层级结构单一，兼容性较好，适合整体布局。

完整代码如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Team</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/test1-3.css">
</head>
<body>
    <div class="container">
        <div class="container__left">
            <img src="./images/findlab.PNG" class="container__left__logo">
            <div class="container__left__title">FIND--findlab</div>
        </div>
        <div class="container__content">
            <h2 class="container__content__title"><abbr title="future information network&Data">FIND</abbr> --findlab 实验室</h2>
            <p class="container__content__text">finlab实验室成立于2009年，坐落在广东工业大学工学2号馆404，是一所环境优美，文化浓厚，面向世界和未来的智能科技实验室。</p>
            <p class="container__content__text">实验室设立4个独立小组，分别为公交组、大数据组、机器人组以及区块链组。公交组业务范围涉及公交wifi平台搭建、软件技术攻关以及运营维护等，目前已与多家客运公司合作，在花都至龙岗等线路的客运车上安置客运云盒，让用户在旅途中享受娱乐资讯、免费wifi等服务，上市以后受到广泛好评。大数据组主要负责学习和专研各种可行算法，在实际问题中寻找可行的方案，组内成员多次参加各类平台比赛，并取得优异成绩。机器人组面向人工智能，目前做过的实验有机械手动作模拟，语音交互，视觉捕获等工作，先与企业合作，提供语音交互技术攻关。区块链组是2017年成立的小组，属于雏形期，由于最近网络安全，区块链技术的兴起，使得我们有展开深入探讨的必要性。虽然4个小组相互独立，但有可相互交叉合作，共同进步。</p>
            <p class="container__content__text">未来是不可预知的，是瞬息万变的，我们面向未来，追赶未来，但不畏惧未来。findlab实验室总是与时俱进，在科技不断发展的前沿中学习挖掘可用价值，比如新成立的区块链小组。我们坚信未来一定是属于我们的。 </p>
        </div>
        <div class="container__right">
            <img src="./images/公交wifi.jpg" class="container__right__img">
            <img src="./images/大数据.jpg" class="container__right__img">
            <img src="./images/人工智能.jpg" class="container__right__img">
            <img src="./images/区块链.jpg" class="container__right__img">
        </div>
    </div>
</body>
</html>

.container__left,
.container__content,
.container__right{
    border: 1px solid rgba(147, 147, 81, 0.68);
}
.container{
    position: relative;
    margin: 2%;
    height: 500px;
    border: 1.5px solid rgba(37, 74, 86, 0.68);
}
.container__left{
    position: absolute;
    left: 20px;
    top:20px;
    width: 200px;
    height: 200px;
}
.container__left__logo{
    display: block;
    margin: 10% auto ;
    width: 50%;
    height: 50%;
}
.container__left__title{
    text-align: center;
    font-size: 24px;
}
.container__content{
    position: absolute;
    left: 240px;
    top:20px;
    height: 460px;
    width: calc(100% - 440px) ;
}
.container__content__title{
    margin-left: 20px;
    font-size: 24px;
    color: #333333;
}
.container__content__text{
    margin:0 20px 14px;
    line-height: 24px;
}
.container__right{
    position: absolute;
    right: 20px;
    top:20px;
    width: 160px;
    height: 460px;
}
.container__right__img{
    display: block;
    width: 100px;
    height: 100px;
    margin: 10px 30px;
}