第八天

一、

1、position: static; 静态定位。

2、position: relative;     相对定位，元素相对于自己原本在文档中的位置进行定位。

3、position: absolute;    绝对定位，使元素脱离文档流，使内联元素可以设置宽高，

                        元素相对于父元素为 相对定位的元素进行定位，如果父元素不是相对定位，

                        或没有设置为相对定位，则一级一级向上找，如果都没有相对定位的元素，

                        则相对 body 定位。

4、position: fiexd; 固定定位，固定在可视窗口的某个位置。

二、浮动

1、float:left;    float:right;

2、同级清除浮动    clear: left ;    clear : right ;    clear : both ;

3、父级元素清浮    

        1)    自身添加浮动

          2） 添加 overflow : hedden;

        3)  为父元素设置不小于子元素的高

4、 添加一个清除浮动的元素。

5、用伪类清浮： 

.box:after{
    content: '';
    display: block;
    clear: both;
    
    /*这一句有什么用呢*/
    z-index:1;
}

三、图文混排

.wrap{
    width: 500px;
    border: 1px solid red;
}
.content img{
    width: 200px;
}
<div class="wrap">
    <div class="content">
        <img src="a.png">
    </div>
</div>

1、清除 img 多于的 4px 

    1）父元素 中添加：  line-height: 1px;  只要添加一个行高就可以

    2)  设置 img 样式：  vertical-align: middle; 或  vertical-align: top;

        由于 img 是行内块元素，所以有： vertical-align 属性。

2、实现图片与文字混排，为 img 添加 float: left; 即可。