day04

今天学了什么

1.定位的宽高继承问题

父元素给position:relative
子元素position:absolute

2.margin的小问题

给子元素margin-top:父元素移动,子元素不移动

margin小问题.png

2.1解决方案overflow

//css
   <style>
        /* 如果给父元素第一个元素设置margin-top */
        .parent{
            width: 300px;
            height: 300px;
            background: red;
            overflow: hidden;
        }
        .child{
            margin-top: 100px;
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>
//html
  <div class="parent">
        <div class="child"></div>
    </div>

2.1给父元素设置伪元素

//css
 <style>
        /* 如果给父元素第一个元素设置margin-top */
        .parent{
            width: 300px;
            height: 300px;
            background: red;
        }
        .parent:before{
            content: "";
            display: table;
        }
        .child{
            margin-top: 100px;
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>
//html
  <div class="parent">
        <div class="child"></div>
    </div>

实现效果

margin.png

3.margin重合的问题

//css
<style>
        .parent {
            width: 400px;
            height: 400px;
            background: red;
        }

        .first {
            width: 100px;
            height: 100px;
            background: green;
            margin-bottom: 100px;
        }

        .second {
            margin-top: 100px;
            width: 100px;
            height: 100px;
            background: yellow;
        }
</style>
//html
   <div class="parent">
        <div class="first"></div>
        <div class="second"></div>
    </div>

影响结果.

margin重合.png

4.HTML表单相关元素

4.1一个登陆页面

 <form action="">
        <div><label for="user">用户名</label><input type="text" id="user"></div>
        <div><label for="pwd">密&nbsp;码</label><input type="password" id="pwd"></div>
        <div><input type="submit" value="登陆"></div>
    </form>

//定义和用法
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。

4.2.单选框

单选框需给一样的name名

<p>
   <label for="male">男</label><input id="male" type="radio" name="sex" value="男">
   <label for="female">女</label><input id="female" type="radio" name="sex" value="女">
</p>

4.3复选框

<p>
 <label>爱好</label>
 <input type="checkbox" name="爱好" value="游泳">游泳
 <input type="checkbox" name="爱好" value="开车">开车
</p>

4.4下拉框

  <select >
            <option value="武汉市">武汉市</option>
            <option value="荆州市" selected>荆州市</option>
            <option value="天门市">天门市</option>
        </select>

4.5多行输入框

  <textarea placeholder="请吐槽"></textarea>

4.6提交按钮

<input type="submit" value="登陆">

4.6.1submit的小问题

input type="submit" 时给border,padding不会改变它的width.height

   <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        input{
            width: 100px;
            height: 30px;
            border: 1px solid #333;
            padding:5px;
            outline: none;
        }
        .btn{
            width: 102px;
            height: 32px;
            box-sizing:content-box;
        /**给submit加默认属性，只能解决padding的影响**/
        }
   </style>
//html
 <div>
        <input type="text">
    </div>
    <div>
        <input type="submit" value="提交" class="btn">
    </div>

5.隐藏的小知识

1.visibility: hidden; 将元素隐藏 相当于透明度给0
可以看到宽高
2.display: none;直接消失了
连宽高都没有了

6.iframe

 <style>
        iframe{
            width: 300px;
            height: 200px;
            border: 1px solid #333;
        }
    </style>
//html
    <iframe src="" frameborder="0" name="frame"></iframe>
    <a href="first.html" target="frame">first</a>
    <a href="second.html" target="frame">second</a>

iframe.png

7.iconfont外部网站引用小图片

 <link rel="stylesheet" href="http://at.alicdn.com/t/font_720214_ohctpib2w0l.css">
    <script src="http://at.alicdn.com/t/font_720214_khgv4qfragn.js"></script>
    <style>
        .gouwu {
            font-size: 50px;
        }
        .icon{
            width: 50px;
            height: 50px;
        }
    </style>
//html
  <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xuexiao"></use>
    </svg>
    <i class="iconfont icon-sousuo gouwu"></i>
    <i class="iconfont">&#xe600;</i>

icon.png

8.隐藏下拉框

//css
<style>
        *{
            margin: 0px;
            padding: 0px;
        }
        a{
            text-decoration: none;
            color: #fff;
        }
        ul{
            width: 1000px;
            margin-left: auto;
            margin-right: auto;
            background: pink;
            list-style: none;
            line-height: 50px;
        }
        li{
            text-align: center;
            width: 100px;
            float: left;
        }
        .row::after{
            content: "";
            display: table;
            clear: both;
        }
        a{
            display: block;
        }
        .menu{
            position: relative;
        }
        .menuDrop{
            position: absolute;
            width: 100px;
            background: deeppink;
            display: none;
        }
        .menu:hover .menuDrop{
            display: block;
        }
        a:hover{
            background-color: #ff4777;
        }
    </style>
//html
    <ul class="row">
        <li class="menu">
            <a href="#">收藏夹</a>
            <div class="menuDrop">
            <a href="#">收藏宝贝</a>
            <a href="#">收藏店铺</a>
            </div>
        </li>
        <li><a href="#">卖家中心</a></li>
        <li><a href="#">联系客服</a></li>
    </ul>

被隐藏的下拉框.png
下拉框.png