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

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

CSS布局练习——完成效果图_第1张图片


第一次练习:使用table+margin

敲码测试过程中发现的问题:HTML 去掉table表单里面td之间的间距
1.table表单自带的间距,容易影响精度。
CSS布局练习——完成效果图_第2张图片
2.td{ padding:0; nargin: 0;}这个只能消除td的边距,但是整个table表单还存在单元格边框带来的缝隙。
CSS布局练习——完成效果图_第3张图片
3.再给table样式设置border-collapse:collapse;完美解决问题。
CSS布局练习——完成效果图_第4张图片
CSS布局练习——完成效果图_第5张图片
最终效果:
CSS布局练习——完成效果图_第6张图片
附码:


<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;解决塌陷也是可以的。】

CSS布局练习——完成效果图_第7张图片


<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,减多少面积)

CSS布局练习——完成效果图_第8张图片


<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;,这个就好玩了,发现了些有趣的现象

CSS布局练习——完成效果图_第9张图片
CSS布局练习——完成效果图_第10张图片
CSS布局练习——完成效果图_第11张图片
CSS布局练习——完成效果图_第12张图片

当两个互为上下的元素相遇,margin-top与margin-bottom只取最大值,不会相加(BFC)
①margin-top与margin-bottom上下合并问题及合并条件
②margin-top,和margin-bottom 重叠了,那么满足什么条件会重叠呢
③为什么两个块级元素分别加上margin-top和margin-bottom只取最大值?
④3-1 正确看待CSS的margin重叠(慕课视频)

<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;

CSS布局练习——完成效果图_第13张图片
CSS布局练习——完成效果图_第14张图片
CSS布局练习——完成效果图_第15张图片


<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

CSS布局练习——完成效果图_第16张图片
CSS布局练习——完成效果图_第17张图片
CSS布局练习——完成效果图_第18张图片
CSS布局练习——完成效果图_第19张图片


<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,从而消除空隙。

CSS布局练习——完成效果图_第20张图片
CSS布局练习——完成效果图_第21张图片
CSS布局练习——完成效果图_第22张图片
CSS布局练习——完成效果图_第23张图片
CSS布局练习——完成效果图_第24张图片
CSS布局练习——完成效果图_第25张图片


第八次练习:利用BFC的特性(高度塌陷、margin上下重叠),纯margin写

①BFC块格式化上下文
②BFC是什么
③什么是BFC?
④3-1 正确看待CSS的margin重叠(慕课视频)【此条链接上面有分享,看过的可不必理会】

CSS布局练习——完成效果图_第26张图片
CSS布局练习——完成效果图_第27张图片
CSS布局练习——完成效果图_第28张图片
CSS布局练习——完成效果图_第29张图片


<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>

你可能感兴趣的:(html+css入门学习过程,CSS)