css晋级

<style>
    .box{
        width: 900px;
        height: 1500px;
        /*背景颜色*/
        /**/
        /*背景图片*/
        /*background-image: url("./girl.png");*/

        /*设置图片平铺模式  no-repeat(不铺满) repeat(铺满)*/
        /*background-repeat: no-repeat;*/
        /*background-repeat: repeat-x;*/
        /*background-repeat: repeat-y;*/

        /*设置背景图片的大小 contain 等比例缩放x轴,不一定铺满,但是可以看到整个图片*/
        /*cover 等比例缩放x轴或者y轴,可以铺满,但是不一定看到整个图片*/
        /*background-size: cover;*/

        /*背景定位 左边 上边*/
        /*background-position: 50px 150px;*/

        /*背景固定 fixed(固定) scroll(不固定)*/
        /*background-attachment: fixed;*/

        /*复合样式 结合起来用*/
        background: lightgray url("./girl.png") no-repeat fixed 50px 100px;
    }

</style>
====================

<style>
    div{
        width: 300px;
        height: 300px;
        background: yellowgreen;
        /*复合样式 边框大小 边框样式  边框颜色*/
        /*border: 2px solid black;*/

        /*边框大小*/
        /*一个值  上下左右*/
        /*两个值 上下 左右*/
        /*三个值 上  左右  下*/
        /*四个值 上 右 下 左*/
        /*border-width: 10px 20px 30px 40px;*/

        /*边框样式*/
        /*border-style: solid;*/

        /*边框颜色*/
        /*border-color: red;*/
        /*上*/
        /*border-top: 10px solid red;*/
        /*右*/
        /*border-right: 10px solid red;*/
        /*下*/
        /*border-bottom: 10px solid red;*/
        /*左*/
        /*border-left: 10px solid red;*/
    }
</style>
===================

/*调整盒子内边距*/
padding: 10px;
/*左边距*/
padding-left: 20px;

/*margin-left: 50px;*/
/*margin-right: 200px;*/

/*水平居中*/
margin: auto;

/*边框*/
/*border: 1px solid pink;*/
/*超出隐藏*/
overflow: hidden;

<!--文档流: 元素排列从上往下,同一行中从左往右-->

<!--脱流:脱离文档流-->
<!--脱流方式: 浮动,绝对定位,固定定位-->

/*浮动  left左 none(默认位置)  right(右)*/
float: left;
=====================

<!--在布局的时候,主要内容的高度往往都不是写死的,而是由里面的内容所决定-->
<div class="top">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>

<!--    清除浮动  clear: both;-->

    <div class="clearfix"></div>
</div>

========================
双伪选择器

/*!*before(之前)  after(之后)*!*/
/*.clearfix:before,.clearfix:after{*/
/*    content: '';*/
/*    display: table;*/
/*}*/
/*.clearfix:after{*/
/*    clear: both;*/
/*}*/

====================
定位
引入resrt.css:<link rel="stylesheet" href="resrt.css">

/*清除浏览器的内外边距 如果引入了重置css则可以忽略*/

*{
    padding: 0;
    margin: 0;
}

/*绝对定位 针对父盒子 脱离文档流*/
position: absolute;

/*相对定位 针对自己原来的位置*/
position: relative;

*固定定位 也会脱离文档流*/
position: fixed;