day07

1.布局

1.默认布局
2.float布局
3.层级布局(定位布局)

2.css样式的引入

 <!-- 内部样式表 -->
    <style>
        .two{
            width:100px;
            height:100px;
            background:green;
        }

    <!-- 内联样式
    不要写 不要写 不要写
    -->
    <div style="width:100px;height:100px;background: red"></div>
    <div  class="two"></div>

3.外部样式

外部样式表
<link rel="stylesheet" href="css/index.css">

4.路径

 <!-- 
        路径:
        相对路径
        绝对路径 不要使用
     -->
     <!-- 同级目录 -->
     <img src="down.jpg" alt="">
     <!-- 下一级目录 -->
     <img src="images/location.png" alt="">

5.width，height的继承

 .parent{
            width:100px;
            height:100px;
            background: red;
            position: relative;
        }
        .child{
            height:50px;
            background: green;
            position:absolute;
        }

子元素绝对定位,不会继承父元素的width

6.继承

.parent{
            width:200px;
            /* height:200px; */
            background: red;
        }
        .child{
            position:absolute;
            width:100px;
            height:100px;
            background: green;
        }

7.margin

.parent{
            width:200px;
            height:200px;
            background:red;
        }
        .child{
            margin-top: 50px;
            width:100px;
            height:100px;
            background:green;
        }
        /*如何解决*/
        .row:before{
            content:"";
            display: table;
        }

子元素作为父元素的第一个元素,给它margin-top,没用它的元素向下移动

8.margin的重合问题

.one{
            width:100px;
            height:100px;
            background:red;
            margin-bottom: 150px;
        }
        .two{
            margin-top: 100px;
            width:100px;
            height:100px;
            background-color: yellow;
        }

9.表单

 <h4>一个简单的登录表单</h4>
    <form >
        <!-- label和input结合使用  要点:label的for的值要和input的id一样 -->
        <div>
            <label for="user">用户名</label><input type="text" id="user">
        </div>
        <div>
            <label for="pwd">密码</label><input type="password" id="pwd">
        </div>
        <div>
            <input type="submit" value="提交">
        </div>
        <div>
            <!-- 技术要点:name值相同 -->
            <h4>性别</h4>
            <label for="male">男</label><input type="radio" id="male" name="sex">
            <label for="female">女</label><input type="radio" id="female" name="sex">
        </div>
        <div>
            <!-- type=checkbox  复合选框 -->
            <input type="checkbox">足球
            <input type="checkbox">篮球
            <input type="checkbox">羽毛球
        </div>
        <div>
            <!-- 下拉选框 -->
            <select >
                <option value="武昌区">武昌区</option>
                <option value="洪山区" selected>洪山区</option>
                <option value="青山区">青山区</option>
            </select>
        </div>
    </form>
    <textarea placeholder="请吐槽" cols="30" rows="10"></textarea>
    <!-- 大于,空格,大于 的字符 -->
    <div>&lt;&nbsp;&gt;</div>

10.text，btn的区别

input{
            border:1px solid #333;
            width:100px;
            height:40px;
        }
        .btn{
            width:102px;
            height:42px;
        }

input是按钮的形态下,给border,padding不会改变它的width,height