day05

A：今天学到的内容

一、margin的小问题

1、给子元素margin-top：父元素移动，子元素不移动。

解决方案：
1.给父级加：overflow：hidden；
2.给父级加伪元素：

.box:before{
            content: "";
            display: table;
        }

2、上面元素的margin-bottom和下面元素的margin-top会重合，距离一样取中间值，不一样取最大值。

二、HTML表单

<form action="">
    <p><label for="name">用户名</label><input type="text" id="name"></p>
    <p><label for="passworld">密码</label><input type="password" id="passworld"></p>
    <p><input type="submit" value="确定"/></p>
    <!-- 登录页面-->
    <p>
        <label>爱好</label>
        <input type="checkbox" name="爱好" value="游泳"/>游泳
        <input type="checkbox" name="爱好" value="开车"/>开车
        <input type="checkbox" name="爱好" value="篮球"/>篮球
        <input type="checkbox" name="爱好" value="足球"/>足球
    </p>
    <!--复合选框 -->
    <p>
        <input type="radio" name="sex" value="男"/>男
        <input type="radio" name="sex" value="女"/>女
        <input type="radio" name="sex" value="妖"/>妖
    </p>
    <!--单选选框-->
    <p>
        <select>
            <option value="洪山区">洪山区</option>
            <option value="武昌区">武昌区</option>
            <option value="汉阳区" selected>汉阳区</option>
            <option value="江夏区">江夏区</option>
            <option value="青山区">青山区</option>
        </select>
    </p>
    <!--下拉选框-->
</form>

三、文本域

<textarea id="text" placeholder="请留下你的脚印">
    </textarea>

四、display和visibility的区别

（display：none）完全清除。

（visibility：hidden）清除显示，但是高度还在。

（overflow：hidden）溢出部分隐藏。

<style>
        div{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            /*visibility: hidden;*/
            /*隐藏，但是站位还在*/
            display: none;
            /*完全清除*/
        }
  </style>

B：学会了什么

一、上面元素设置margin-bottom和下面元素设置margin-top的重合

二、html表单相关元素

三、文本域

四、display和visibility的区别