h5-8

盒子居中

对于span可以设置margin-left或者right，不能设置top和bottom

关键语句　　margin：0 auto；

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 400px;
            padding: 20px;
            border: 1px solid red;
            margin: 100px auto; /*让块级元素水平居中 块级元素div、p、li、h1~h6*/
        }
        .box2{
            width: 100px;
            height: 100px;
            /*margin-left: 100px;*/
            margin: 0 auto;
            background: yellowgreen;
        }

        span {
            width: 400px;
            border: 2px solid blue;
            /* margin: 0 auto; 对行内元素无效 span */
            /* margin-left: auto; */
            /* margin-top: 20px; 无效 */
        }
    </style>

<div class="box1">
        <div class="box2"></div>
    </div>
    <span>1111</span>

 父子盒模型　　儿子宽度不设置，默认是父亲宽度的100%

父无高，子无宽，儿子宽度继承父亲，父亲高度靠儿子撑开

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 500px;
            border: 1px solid red;
            margin: 100px auto;
        }
        .box2{
            /* 350px;*/
            height: 380px;
            padding: 0 10px;
            border: 10px dashed green;
            background: yellowgreen;
            /*margin-left: 10px;*/
        }
    </style>

<div class="box1">
        <div class="box2">123</div>
    </div>

 标准文档流

 p和div等有空白折叠

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box2{
            font-size: 30px;
        }
        span{
            font-size: 26px;
            font-weight: bold;
        }

        .box {
            width: 300px;
            height: 300px;
            border: 2px solid yellow;
        }

        

    </style>

<!-- <div>1111111111111111111111111111111</div>
    <div class="box2">22222222222222222222222222</div>
    <div>333333333333333333333333366666666666663333333333</div>
    <div>44444444444444444444444444444444</div>
    <div>55555555555555555555555555555555</div> -->
    <div>
        这是一段文字
        <img src="images/img1.png" alt="" />
        <input type="text" />
        <span>这是span里的文字</span>
    </div>
    
    <p>
        文字文字文           
        
        
        
        
        
        字文字文字文字文字文字
    </p> 
    <div class="box">
        文字文字文  <span>A</span>         字文字文字文字文字文字
        文字文字文  <span>A</span>         字文字文字文字文字文字
        文字文字文  <span>A</span>         字文字文字文字文字文字
        文字文字文  <span>A</span>         字文字文字文字文字文字
        文字文字文  <span>A</span>         字文字文字文字文字文字

    </div> 

 块级元素和行内元素

div，p（dl、dt）块级元素，span（strong、em、a）超链接也是行内元素，行内元素

块级元素　　可以设置宽度　　独自占一行　　假如不设置宽度默认是父亲的100%

行内元素　　设置宽高无用　　能与其他行内元素并排　　宽和高由内容撑开

行内块　　（图片img、表单input）　　可以和行内元素并排　　可以设置宽度和高度

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: skyblue;
            margin-bottom: 10px;

        }
        p{
            /* 100px;*/
            height: 100px;
            background: yellowgreen;
            margin-bottom: 10px;
        }
        span{
            width: 100px;
            height: 100px;
            background: pink;
            margin-right: 10px;
            border: 1px solid red;
        }

        a {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        img {
            width: 300px;
        }

        input {
            w300px
        }
    </style>

<div>1</div>
    <div>2</div>
    <p></p>
    <span>1111111 11111111 111111111 1111111 1111111 11111111 11111111</span>
    <span>222222 22222 22222 22222222 22222222 22222222222 2222222222</span>
    <span>3333 33333333333 3333333333333 3333333333 333333333 3333333</span>
    <span>4444444444444444444444444</span>
    <a href="http://www.baidu.com">百度一下</a>
    <img src="images/img1.png" alt="" />
    <input type="text" />

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            /*  100px;
            height: 100px;*/
            background: skyblue;
            /*margin-bottom: 10px; */
            display: inline; /*转成行内元素*/
            /*display: block;*/
            /* display: inline-block;  */
        }
        p{
            /* 100px;*/
            height: 100px;
            background: yellowgreen;
            margin-bottom: 10px;
        }
        
    </style>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: skyblue;
            margin-bottom: 10px;
            display: inline-block; /*行内块元素*/
        }
        p{
            /* 100px;*/
            height: 100px;
            background: yellowgreen;
            margin-bottom: 10px;
        }
        span{
            width: 100px;
            height: 100px;
            background: pink;
            margin-right: 10px;
            border: 1px solid red;
            display: block; /*把元素转成块级元素*/
        }

        
    </style>