ife2015spring-task0001笔记总结

6. 盒模型及定位

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