HTML---3

.clear {
        clear: both;
        /*如果清除了浮动， 父亲去自动检测孩子的高度  以最高的为准*/
    }

.father {
        border: 1px solid red;
        width: 300px;
        overflow: hidden;   /*别加错位置了，给 父亲加*/
        /*不是所有的浮动我们都需要清除 ，谁影响布局，我们清除谁*/
    }

.clearfix:after {  /*正常浏览器 清除浮动*/
        content:"";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {
        *zoom: 1;  /*zoom 1 就是ie6 清除浮动方式  *  ie7一下的版本所识别*/
    }

.clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1;
    }

.top {

        position: relative; 
        top: 100px;
        left: 100px;
    }

.top {
        position: absolute;  /*不占位置 跟浮动一样*/
        right: 0;
        bottom: 0;

    }

.son {
        width: 200px;
        height: 200px;
        background-color: purple;
        position: absolute;
        top: 50px;
        left: 50px;
        /*若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。*/
    }

.yeye {
        width: 800px;
        height: 800px;
        background-color: skyblue;
        position: absolute;
    }
    .father {
        width: 500px;
        height: 500px;
        background-color: pink;
        margin: 100px;
        /*position: absolute;*/
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: purple;
        position: absolute;
        top: 50px;
        left: 50px;
        /*若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。*/
    }

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*margin: 100px auto;*/
        /*float: left;*/
        position: absolute;
        /*position: relative;*/
        /*加了定位 浮动的的盒子  margin 0 auto 失效了*/
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
    }
    </style>

.ad {
        width: 200px;
        height: 200px;
        background-color: pink;
        position: fixed;  /*固定定位*/
        left: 0;
        top: 100px;
    }

div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*display: 显示*/
        /*display: none; 隐藏某个元素   ==  display: block 显示某个元素 不保留位置*/
        /*visibility: visible;  显示某个元素*/
        visibility: hidden;  /*隐藏某个元素  保留位置的  */
    }

div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /*overflow: hidden;  溢出隐藏*/
            overflow: scroll;  /*scroll 滚动条 */
            overflow: auto;  /*auto 自动  */
        }

li {
         /*cursor: pointer; 让我们的鼠标样式变成小手*/
        /*cursor: text;  让我们的鼠标样式变成选择*/
        cursor: default; /* 让我们的鼠标样式小白*/
    }

input {
        outline: none;  /*取消轮廓线的做法*/
        border: 1px solid #ccc;
        width: 200px;
        height: 25px;
        background: url(images/s.png) no-repeat 180px center;
    }
    textarea {
        resize: none;  /*防止拖拽*/
        outline: none;  /*取消蓝色边框*/
    }

li {
        list-style: none;
        width: 200px;
        height: 30px;
        border: 1px solid pink;
        white-space: nowrap;
        /*1.强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行*/
        overflow: hidden;  /* 2. 超出的部分 隐藏*/
        text-overflow: ellipsis;  /* 3. 溢出的部分用省略号替代*/
        line-height: 30px;
    }

h3 {
        background: url(images/index.png) no-repeat -2px -184px;
        width: 26px;
        height: 26px;
    }
    div {
        width: 236px;
        height: 106px;
        background: url(images/index.png) no-repeat 0 -350px;
    }

@font-face {  /*声明字体  引用字体*/
      font-family: "icomoon";  /*我们自己起名字可以*/
      src:  url(‘fonts/icomoon.eot?7kkyc2‘);
      src:  url(‘fonts/icomoon.eot?7kkyc2#iefix‘) format(‘embedded-opentype‘),
        url(‘fonts/icomoon.ttf?7kkyc2‘) format(‘truetype‘),
        url(‘fonts/icomoon.woff?7kkyc2‘) format(‘woff‘),
        url(‘fonts/icomoon.svg?7kkyc2#icomoon‘) format(‘svg‘);
      font-style: normal;  /*倾斜字体正常*/
}

<header></header>
<nav>上篮</nav>
<aside></aside>
<article></article>
<time> 12:09 </time>

div::before {  /*必须带一个属性  content 伪元素 其实这个 before 是个盒子*/
        /* 这个盒子是行内的盒子  可以转换*/
        content: "我";
        /*width: 200px;
        height: 200px;
        background-color: pink;
        display: block;*/
}
div::after {
    content: "18岁";
}