CSS布局练习——完成效果图

最新推荐文章于 2022-11-23 20:38:07 发布

iuukai

最新推荐文章于 2022-11-23 20:38:07 发布

阅读量807

点赞数

分类专栏： html+css入门学习过程 CSS

本文链接：https://blog.csdn.net/weixin_45389633/article/details/103892590

版权

CSS 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

html+css入门学习过程

18 篇文章 1 订阅

订阅专栏

原图链接：https://jingyan.baidu.com/article/e8cdb32b1db1d037042bad61.html

在这里插入图片描述

第一次练习：使用table+margin

敲码测试过程中发现的问题：HTML 去掉table表单里面td之间的间距
1.table表单自带的间距，容易影响精度。
在这里插入图片描述
2.td{ padding:0; nargin: 0;}这个只能消除td的边距，但是整个table表单还存在单元格边框带来的缝隙。

3.再给table样式设置border-collapse:collapse;完美解决问题。

最终效果：

附码：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>练习（一）</title>
<style type="text/css">
    body,td{
        padding: 0;
        margin: 0;
    }
    .box{
        background-color: #000000;
        width: 900px;
        height: 800px;
        overflow: hidden;
        margin: 0px auto;
    }
    /*838×638*/
    .project{
        border: 10px solid #cccccc;
        width: 818px;
        height: 618px;
        margin: 50px auto;
    }
    .photo1,.photo2,.photo3{
        background-color: #ffffea;
        width: 370px;
        height: 180px;
        margin: 14px auto 0 auto;
    }
    table{
        border-collapse:collapse;
        margin: 11px auto 0 auto;
    }
</style>
</head> 
<body>
<div class="box">
    <div class="project">
        <table>
            <tr><td><div class="photo1"></div></td></tr>
            <tr><td><div class="photo2"></div></td></tr>
            <tr><td><div class="photo3"></div></td></tr>
        </table>
    </div>
</div>
</body>
</html>

第二次练习：完成第一次后发现，wc，索性干脆直接margin搞起

【这里会触发BFC，margin-top和margin-bottom相遇，只取最大值（最下面第八次练习会有说）。当然使用 overflow: hidden;解决塌陷也是可以的。】

在这里插入图片描述

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>练习（一）</title>
<style type="text/css">
    body,td{
        padding: 0;
        margin: 0;
    }
    .box{
        background-color: #000000;
        width: 900px;
        height: 800px;
        overflow: hidden;
        margin: 0px auto;
    }
    /*838×638*/
    .project{
        border: 10px solid #cccccc;
        width: 818px;
        height: 618px;
        margin: 50px auto;
    }
    .photo1,.photo2,.photo3{
        background-color: #ffffea;
        width: 370px;
        height: 180px;
        margin: 14px auto 0 auto;
    }
    .wrap{
        margin-top: 11px;
        overflow: hidden;
    }
</style>
</head> 
<body>
<div class="box">
    <div class="project">
        <div class="wrap">
            <div class="photo1"></div>
            <div class="photo2"></div>
            <div class="photo3"></div>
        </div>
    </div>
</div>
</body>
</html>

第三次练习：使用内填充padding（最烦的，因为不能改变内容整体面积，所以得算加多少padding，减多少面积）

在这里插入图片描述

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>练习（一）</title>
<style type="text/css">
    body,td{
        padding: 0;
        margin: 0;
    }
    .box{
        background-color: #000000;
        width: 900px;
        height: 800px;
        overflow: hidden;
        margin: 0px auto;
    }
    /*838×638*/
    .project{
        border: 10px solid #cccccc;
        width: 370px;
        height: 582px;
        margin: 50px auto;
        padding: 11px 224px 25px;		/*边粗+内容面积+填充面积= 838×638*/
    }
    .photo1,.photo2,.photo3{
        background-color: #ffffea;
        width: 370px;
        height: 180px;
        margin-top: 14px;
    }
</style>
</head> 
<body>
<div class="box">
    <div class="project">
        <div class="photo1"></div>
        <div class="photo2"></div>
        <div class="photo3"></div>
    </div>
</div>
</body>
</html>

第四次练习：利用行内块级元素的`vertical-align: middle;`，这个就好玩了，发现了些有趣的现象

在这里插入图片描述

👉当两个互为上下的元素相遇，margin-top与margin-bottom只取最大值，不会相加（BFC）

①margin-top与margin-bottom上下合并问题及合并条件

②margin-top，和margin-bottom 重叠了，那么满足什么条件会重叠呢

③为什么两个块级元素分别加上margin-top和margin-bottom只取最大值？

④3-1 正确看待CSS的margin重叠（慕课视频）

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>练习（一）</title>
<style type="text/css">
    body,td{
        padding: 0;
        margin: 0;
    }
    .box{
        background-color: #000000;
        width: 900px;
        height: 800px;
        overflow: hidden;
        margin: 0px auto;
    }
    /*838×638*/
    .project{
        border: 10px solid #cccccc;
        width: 818px;
        height: 618px;
        margin: 50px auto;
        text-align: center;
    }
    .photo1,.photo2,.photo3{
        background-color: #ffffea;
        width: 370px;
        height: 180px;
        margin-top: 14px;
        margin-bottom: 14px;
    }
    .wrap{
        display: inline-block;
        vertical-align: middle;
    }
    .help{
        width: 0;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }
</style>
</head> 
<body>
<div class="box">
    <div class="project">
        <div class="wrap">
            <div class="photo1"></div>
            <div class="photo2"></div>
            <div class="photo3"></div>
        </div>
        <div class="help"></div>
    </div>
</div>
</body>
</html>

第五次练习：float浮动父子元素相对错位水平居中+`vertical-align: middle;`

在这里插入图片描述

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>练习（一）</title>
<style type="text/css">
    body,td{
        padding: 0;
        margin: 0;
    }
    .box{
        background-color: #000000;
        width: 900px;
        height: 800px;
        overflow: hidden;
        margin: 0px auto;
    }
    /*838×638*/
    .project{
        border: 10px solid #cccccc;
        width: 818px;
        height: 618px;
        margin: 50px auto;
    }
    .photo1,.photo2,.photo3{
        background-color: #ffffea;
        width: 370px;
        height: 180px;
        position: relative;
        left: -50%;
        margin-top: 14px;
        margin-bottom: 14px;
    }
    .wrap{
        float: left;
        position: relative;
        left: 50%;
    }
    .help{
        width: 0;
        height: 618px;
        display: inline-block;
        vertical-align: middle;
    }
    .photo{
        display: inline-block;
        vertical-align: middle;
    }
</style>
</head> 
<body>
<div class="box">
    <div class="project">
        <div class="wrap">
            <div class="photo">
                <div class="photo1"></div>
                <div class="photo2"></div>
                <div class="photo3"></div>
            </div>
            <div class="help"></div>
        </div>
    </div>
</div>
</body>
</html>

第六次练习：最近才发现的，另一种错位水平居中，position+margin

在这里插入图片描述

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>练习（一）</title>
<style type="text/css">
    body,td{
        padding: 0;
        margin: 0;
    }
    .box{
        background-color: #000000;
        width: 900px;
        height: 800px;
        overflow: hidden;
        margin: 0px auto;
    }
    /*838×638*/
    .project{
        border: 10px solid #cccccc;
        width: 818px;
        height: 618px;
        margin: 50px auto;
        position: relative;		/*如果包装wrap使用position: relative;错位，这里就不必加定位属性了*/
    }
    .photo1,.photo2,.photo3{
        background-color: #ffffea;
        width: 370px;
        height: 180px;
        margin-top: 14px;
        margin-bottom: 14px;
    }
    .wrap{
        position: absolute;		/*可以换成position: relative;父元素就不必加定位属性了*/
        left: 50%;
        margin-left: -185px;    /*已知图片部分宽 370，一半就是 185，注意是负树*/
    }
    .help{
        width: 0;
        height: 618px;
        display: inline-block;
        vertical-align: middle;
    }
    .photo{
        display: inline-block;
        vertical-align: middle;
    }
</style>
</head> 
<body>
<div class="box">
    <div class="project">
        <div class="wrap">
            <div class="photo">
                <div class="photo1"></div>
                <div class="photo2"></div>
                <div class="photo3"></div>
            </div>
            <div class="help"></div>
        </div>
    </div>
</div>
</body>
</html>

第七次练习：display:inline-block布局

👉👉👉CSS之使用display:inline-block来布局

①起因：我突然想，为何不划分三个并排区域？旁边两个相等，中间图片区域。

②然后，因为div是块级元素，无法共享一行，所以将三个都转化为行内块级元素，就可以共行了。

③但是，发现，使用display:inline-block，会发现，每个块间都存在4px的间隙。

④解决方法是：代码中不作换行（换行符引起的间隙）；或给父元素设置 font-size:0;即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙。

在这里插入图片描述

第八次练习：利用BFC的特性（高度塌陷、margin上下重叠），纯margin写

①BFC块格式化上下文

②BFC是什么

③什么是BFC？

④3-1 正确看待CSS的margin重叠（慕课视频）【此条链接上面有分享，看过的可不必理会】

在这里插入图片描述

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>练习（一）</title>
<style type="text/css">
    body,td{
        padding: 0;
        margin: 0;
    }
    .box{
        background-color: #000000;
        width: 900px;
        height: 800px;
        overflow: hidden;
        margin: 0px auto;
    }
    /*838×638*/
    .project{
        border: 10px solid #cccccc;
        width: 818px;
        height: 618px;
        margin: 50px auto;
    }
    .photo1,.photo2,.photo3{
        background-color: #ffffea;
        width: 370px;
        height: 180px;
        margin: 14px auto;
    }
    .photo{
        margin: 25px 185px;
    }
</style>
</head> 
<body>
<div class="box">
    <div class="project">
        <div class="photo">
            <div class="photo1"></div>
            <div class="photo2"></div>
            <div class="photo3"></div>
        </div>
    </div>
</div>
</body>
</html>

iuukai

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS布局练习——完成效果图

原图链接：https://jingyan.baidu.com/article/e8cdb32b1db1d037042bad61.html第一次练习：使用table+margin敲码测试过程中发现的问题：HTML 去掉table表单里面td之间的间距1.table表单自带的间距，容易影响精度。2.td{ padding:0; nargin: 0;}这个只能消除td的边距，但是整个tab...
复制链接

扫一扫