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 设置框体长宽*/