HTML---2

1.盒子水平居中

div {
        text-align: center; /*可以让盒子内容（文字 行内元素 行内块元素）居中对齐*/
        width: 300px;
        height: 100px;
        background-color: pink;
         /* margin: 0 auto; 通俗写法 0 auto  上下是 0  左右是auto  自动  水平居中对齐 */
         /* margin-left: auto;
         margin-right: auto; 自动充满*/
         /* margin: auto; 上下左右都是auto*/
         margin: 100px auto;

    }

2.外边距合并

<style>
    div {
        width: 300px;
        height: 200px;
        background-color: purple;
    }
    .xiongda {
        margin-bottom: 100px;
    }
    .xionger {
        background-color: pink;
        margin-top: 150px;  /*最终两个盒子的距离是  最大的那个为准  150*/
    }
    </style>

3.外边距塌陷

 

<style>
    .father {
        width: 500px;
        height: 500px;
        background-color: pink;
        /*padding-top: 50px;*/
        /*border-top: 1px solid pink; 1. 用border*/ 
        /*padding-top: 1px;           2 用padding */
        overflow: hidden;  
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: purple;
        margin-top: 50px;
        margin-left: 50px;
    }
    </style>

 

4.盒子默认宽度

<style>
    .father {
        height: 200px;
        background-color: pink;
        width: 300px;
        /* padding-left: 30px; 因为 父盒子 有宽度 给定值了，则padding会撑开*/

    }
    .son {
        padding-left: 30px;
        /*儿子 没有给定宽度 用的是默认的， 所以 padding 不会撑开盒子*/
    }
    </style>

 

 

5.圆角边框

<style>
div {
width: 312px;
height: 312px;
/*background-color: pink;*/
margin: 100px auto; 
/*border-radius: 50%; 让一个正方形 变成圆圈*/
border: 1px solid red;
border-radius: 150px 0; 
}
</style>

 

6.盒子阴影

<style>

    div {
        width: 200px;
        height: 200px;
        /*box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4);*/
        /*transition: all 1s;*/
        
    }
    div:hover {  /*鼠标经过div时候的样子。。。*/
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }
    </style>

 

7.浮动

<style>
    div {
        /*display: inline-block;*/
        /*float: left;*/
    }
    .up {
        width: 300px;
        height: 200px;
        background-color: pink;
        float: left;
    }
    .down {
        width: 320px;
        height: 220px;
        background-color: purple;
        
    }
    </style>

 

 

8.隐藏模式转换

<style>
    div {
        height: 100px;
        background-color: pink;
        float: left;  /*可以让元素默认转换为行内块元素 特性*/
    }
    span {
        width: 100px;
        height: 100px;
        background-color: purple;
        float: left;  
        /*妙用  如果已经给 行内元素添加了浮动 此时不需要转换了这个元素也可以有宽高*/
    }
    </style>