day04

A.今天学到了什么

1.外部样式表

在<title>后面加

<link rel="stylesheet" href="css/index.css">

2.定位宽高的继承问题

如果给子元素[绝对定位]，他不会继承父元素的宽度 和高度

3.margin的问题

3.1margin-top

 /* 如果给父元素的第一个子元素设置margin-top 子元素不移动 
           解决方法
           1. 给父元素加 overflow hidden;
           2. 在父元素加before;*/
        .parent{
            /* overflow: hidden; */
            width: 300px;
            height: 300px;
            background: red;
        }
        .child{
            width: 100px;
            height: 100px;
            background: yellow;
            margin-top: 50px;
            
           
        }
        .parent:before{
            content: "";
            display: table;
        }
        .two{
            width: 100px;
            height: 100px;
            background: blue;
            margin-top: 50px;
        }

3.2margin的重合问题

     /* 兄弟级元素margin重复的问题 */
        .parent{
            width: 400px;
            height: 400px;
            background: red;
            
        }
        .first{
            width: 100px;
            height: 100px;
            background: yellow;
            margin-bottom: 100px;
        }
   /*第二个元素不受影响*/
        .second{
            width: 100px;
            height: 100px;
            background:blue;
            margin-top: 150px;
        }

4.表单

 <form><div></div>
        <label for="user">用户名</label>
        <input type="text" id="user">
    </div>
    <div>
        <label></label for="password">密码 </label>
        <input type="text" id="password">
    </div>
    <!-- 单选框 type= "raio"name的值要一样 -->
    <div>性别
        <label for="male">男</label>
        <input type="radio" id="male" name="sex">
        <label for="female">女</label>
        <input type="radio" id="female" name="sex">
    </div>
    <!-- 复合选框  type+checkbox -->
    <div>
        <label>爱好</label>
        <input type="checkbox">篮球
        <input type="checkbox">足球
        <input type="checkbox">乒乓球

    </div>
    <div>
        <input type="submit" value="登录">
    </div>
        
    </form>

5.下拉框

   textarea{
              width: 300px;
              height: 100px;

          }

 <select>
//value是传给系统的值  后面的是显示在页面的值
        <option value="武汉市">武汉市</option>
        <option value="青山区" selected>青山区</option>
        <option value="青山沟">青山沟</option>
        <option value="青山镇">青山镇</option>
    </select>
    <!-- 文本域 -->
    <textarea placeholder="请输入"></textarea>

5.input

    /* input type="sumit" 时 给边框不会改变他的宽高*/
        input{
            width: 100px;
            height: 30px;
            border: 1px solid #3333;
        }
        .button{
            width: 102px;
            height: 32px;
        }

 <div>
        <input type="text">
    </div>
    <div>
        <input  class="button"   type="submit" value="确定">
        <!-- <button>提交</button> -->
    </div>

6.元素隐藏

   div{
            /* 将元素隐藏 透明度=0 */
            /* visibility: hidden; */ 
            /*元素直接从页面上消失  */
            display: none;
        }

7.iframe

  iframe{
            width: 300px;
            height: 100px;
            border: 1px solid #eeee;
           
        }

   <!-- iframe 的name值要和a标签的target值一样 -->
    <iframe src="" frameborder="0" name="frame"></iframe>
    <a href="first.html" target="frame">first</a>
    <a href="second.html" target="frame">second</a>

8.iconfont

  <link rel="stylesheet" href="http://at.alicdn.com/t/font_720212_sipk7tmoffg.css">
    <script src="http://at.alicdn.com/t/font_720212_sipk7tmoffg.js"></script>

    <style>
        .sousuo{
            font-size: 30px;
            color: red;

        }
    </style>

 <i class="iconfont icon-sousuo  sousuo"></i>
    <i class="iconfont">&#xe613;</i>
    <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xuexiao-"></use>
        </svg>