HTML---3

1.为什么清除浮动？

浮动的框可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。

2.清除浮动的方法

1）额外标签法

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

 

2）overflow清除浮动

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

 

3）after伪元素清除浮动

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

 

4）双伪元素清除浮动

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

    .clearfix {
        *zoom: 1;
    }

 

3.相对定位

.top {

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

 

4.绝对定位

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

    }

 

5.定位问题

1）父亲未定位

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

 

2）父亲已定位

.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文档)。*/
    }

 

6.定位盒子居中对齐

<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>

 

7.固定定位

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

 

8.显示和隐藏

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

 9.溢出隐藏

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

 

 10.鼠标样式

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

 

11.轮廓线

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;  /*取消蓝色边框*/
    }

 

12.溢出文字省略号

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;
    }

 

13. 精灵图

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;
    }

 

 14.字体图标的引入

@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;  /*倾斜字体正常*/
}

 

 

 15.HTML5新标签

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

 

 16.after和before伪元素

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