ife2015spring-task0001笔记总结

  1. 盒模型及定位

6.1 任务描述
Q1. 用两种方法来实现一个背景色为红色、宽度为960px的DIV在浏览器中居中

效果图:
在这里插入图片描述

方法一:巧用margin

<div id="method1"></div> <!--方法一:巧用margin-->
div#method1 {
    background-color: red;
    width:960px;
    height: 50px;
    margin: 0 auto;
}


方法二:弹性盒

<div id="method2"><div id="c1"></div></div>
div#method2 {
    display: flex;   
    justify-content: center;}

#c1 {
    background-color: red;
    width:960px;
    height: 50px;
}


Q2.请在不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形
效果图:

效果图

<div id="box">
    <div class="radius">
        <div class="r1"></div>
        <div class="r2"></div>
        <div class="r3"></div>
        <div class="r4"></div>
    </div>
    <p>这是css文本框</p>

    <div class="radius">
        <div class="r5"></div>
        <div class="r6"></div>
        <div class="r7"></div>
        <div class="r8"></div>
    </div>
</div>
#box {  /*step1 设置框体长宽*/
    width:960px;
    height: 50px;
    margin:50px auto; 
} 
.r1,.r2,.r3,.r4,.r5,.r6,.r7,.r8 {  /*step2 设置圆角像素高 用来组合*/
    display: block;
    height: 1px;
    overflow: hidden;
}
.r1,.r8 {
    margin: 0 5px;
    background-color: #000;
}
.r2,.r7 {
    margin: 0 3px;
    border-left: 2px solid;
    border-right:2px solid;
}
.r3,.r6 {
    margin: 0 2px;
    border-left: 1px solid;
    border-right:1px solid;
}
.r4,.r5 {
    margin: 0 1px;
    border-left: 1px solid;
    border-right:1px solid;
}
#box p {
    border-right:1px solid #000; border-left:1px solid #000; 
    overflow:hidden; margin: 0 auto;  text-align: center;
}

具体的绘制逻辑可以看这里
注意,border-left: 2px solid; border-right:2px solid;不等于border:0 2px solid;后者的solid属性会让上下border为0的指令失效。

Q3. 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化


效果图:

在这里插入图片描述

方法一: 栅格布局

<div class="table">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>
.table {  /*方法一: 栅格布局*/
    display: grid;
    width: 80%;
    grid-template-columns: 100px auto;
    grid-template-rows: 50px 50px;
}
.a {
    grid-row: 1;
    grid-column: 1;
    background: rgb(221, 160, 160);
}
.b {
    grid-row: 1;
    grid-column: 2;
    background: rgb(218, 125, 125);
}
.c {
    grid-row: 2;
    grid-column: 1/3;
    background: rgb(218, 65, 65);
}


方法二:表格布局table (适用于表格)《css权威指南》p735
<table>
    <tr>
        <td class="d"></td>
        <td class="e"></td>
    </tr>
    <tr>
        <td class="f" colspan="2"></td>
    </tr>
</table>
table { 
    width: 80%;
    border-collapse: collapse;
}
tr { 
    height: 50px;
}
.d {
    width: 100px;
    background: rgb(221, 160, 160);
}
.e {
    width:auto;
    background: rgb(218, 125, 125);
}
.f {
    background: rgb(218, 65, 65);
}



ps.单元格之间的边框不是用border控制,而是用border-collapse控制。


方法三: float布局

<div class="table2">
        <div class="g"></div>
        <div class="h"></div>
        <div class="i"></div>
</div>
.table2 {
    width:80%;
}
.g {background-color:  rgb(221, 160, 160); width:100px; float: left; height: 50px;} 
.h{background-color: rgb(218, 125, 125); height: 50px;}
.i{background-color: rgb(218, 65, 65); width: 100%; height: 50px; }

Q4.用两种不同的方式来实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化

效果图:
在这里插入图片描述

方法一: 弹性盒布局 flex box

<div class="table4">
        <div class="a1"></div>
        <div class="b1"></div>
        <div class="c1"></div>
</div>
.table4 { /*弹性盒*/
    display: flex;
    height: 50px;
    width: 80%;
}
.a1 {
    width:300px;
    flex: none;
    background-color:  rgb(221, 160, 160);
}
.b1 {
    flex: 1 1 auto;
    background-color: rgb(218, 125, 125);
}
.c1 {
    width:300px;
    flex: none;
    background-color: rgb(218, 65, 65);
}

方法二: 栅格布局grid
<div class="table5">
        <div class="a2"></div>
        <div class="b2"></div>
        <div class="c2"></div>
    </div>
.table5 { /*栅格布局*/
    display: grid;
    height: 50px;
    width: 80%;
    grid-template-columns: 300px auto 300px;
}
.a2 {
    background-color:  rgb(221, 160, 160);
}
.b2 {
    background-color: rgb(218, 125, 125);
}
.c2 {
    background-color: rgb(218, 65, 65);
}

方法三: 定位position

<div class="table6">
        <div class="a3"></div>
        <div class="b3"> </div>
        <div class="c3"></div>
</div>

.table6 {
    position: relative;
    height: 50px;
    width: 80%;
    margin-left: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
}
.a3 {
    width: 300px;
    position: absolute; top:0; left:0; 
    background-color:  rgb(221, 160, 160);
}
.b3 {
    margin:0 300px;
    background-color: rgb(218, 125, 125);
}
.c3 {
    width: 300px;
    position: absolute; top:0; right:0; 
    background-color: rgb(218, 65, 65);
}

Q5.实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化

效果图:在这里插入图片描述

在这里插入图片描述

方法:弹性盒布局

<div class="table7">
    <div class="a4">1</div>
    <div class="b4">2</div>
    <div class="c4">3</div>
    <div class="d4">4</div>
    <div class="e4">5</div>
    <div class="f4">6</div>
    <div class="g4">7</div>
    <div class="h4">8</div>
    <div class="i4">9</div>
</div>

.table7 {
    display: flex;
    flex-flow: row wrap;
    width:50%;
    background-color: rgb(218, 65, 65);
}
.a4,.b4,.c4,.d4,.e4,.f4,.g4,.h4,.i4 {
    width: 300px;
    height: 50px;
    background-color: rgb(56, 45, 206);
    margin: 5px;
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值