一、伪元素

  1. *{margin:0;padding:0}
  2.         /*伪元素：使我们自己用css生成的元素
  3.         不是像h1~h6，p,img这样已经预定已好的元素*/
  4.         .parent::before{
  5.             content: "前面";
  6.             display:block;
  7.         }
  8.         .parent::after{
  9.             content:"后面";
  10.             display:block;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div class="parent">
  16.         中间
  17.     </div>
  18. </body>
  19. </html>

二、float

.parent{
            width: 200px;
            background: red;
            /*overflow:hidden;*/
        }
        .child{
            width:100px;
            height: 100px;
            background: blue;
            float: left;
        }
        /*.clear{
            clear:both;
        }*/
        .parent::after{
            content: "";
            /*display:table; 必须这样写*/
            display: table;
            clear: both;
        }

    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        <!--<div class="clear"></div>-->
    </div>
</body>
</html>

三、下拉导航

 .nav{
            width:1000px;
            margin-left: auto;
            margin-right: auto;
            /*overflow: hidden;*/
            background: pink;
        }
        ul{
            list-style: none;
            line-height: 50px;
        }
        .drop-menu a{
            display: block;
        }
        a{
            text-decoration: none;
            color: #fff;
        }
        li{
            width: 100px;
            text-align: center;
            float: left;
        }
        .drop-down{
            position: relative;
        }
        .drop-menu{
            /*core*/
            background: deeppink;
            display: none;
            position: absolute;
            width: 100px;
        }
        .row::after{
            content: "";
            display: table;
            clear: both;
        }
        .drop-down:hover .drop-menu{
            display: block;
        }
    </style>
</head>
<body>
    <ul class="nav row">
        <li class="drop-down">
            <a href="#">收藏夹</a>
        <div class="drop-menu">
            <a href="#">收藏宝贝</a>
            <a href="#">收藏店铺</a>
        </div>
        </li>
        <li><a href="#">买家中心</a></li>
        <li><a href="#">联系客服</a></li>
    </ul>
</body>
</html>

四、目的定位

body{
            height: 3000px;
            background: blue;
        }
        .fix{
            width: 100px;
            height: 100px;
            background: red;
            position: fixed;
            right: 0;
            bottom: 0;
            /*固定定位*/
        }
    </style>
</head>
<body>
    <div class="fix">
    </div>
    <script>
        $('.fix').click(function(){
            $("html,body").animate({scrolltop:"0px"})
        })
    </script>
</body>
</html>

五、margin

.parent{
            width: 300px;
            height: 300px;
            background: red;
        }
        .one{
            margin-top:50px;
            width: 100px;
            height: 100px;
            background: blue;
            margin-bottom: 50px;
        }
        .two{
            width: 100px;
            height: 100px;
            background: pink;
            margin-top: 50px;
        }
        .row::before{
            content:"";
            display:table;
        }
    </style>
</head>
<body>
    <!-- bug:子元素作用父元素的第一个元素，给它margin-top没用
    他的父级移动-->
    <div class="parent row">
        <div class="one">

        </div>
        <div class="two">

        </div>
    </div>
    <!-- 两个兄弟元素之间margin重合的问题，如果两个值相等那么取中间值，如果一个值大，取最大的值-->
</body>
</html>

六、nav

div{
            line-height: 50px;
            background: pink;

            font-size:0;
        }
        /* inline-block导航间隙的问题
            解决方案：给父元素font-sizew:0;*/
        a{
            width: 120px;
            text-align:center;
            display: inline-block;
            color: #fff;
            text-decoration: none;
        }
        a:nth-child(1){
            background: blue;
        }
        a:nth-child(2){
            background: red;
        }
        a:nth-child(3){
            background: green;
        }
        div a{
            font-size: 16px;
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">联系客服</a>
        <a href="#">商城</a>
        <a href="#">商品</a>
    </div>
</body>
</html>