day07、day08、day09笔记

块属性标签 水平方向居中

margin: 0 auto;

float 浮动

设置浮动的元素超出文档流

浮动的特点：
1.浮动元素超出文档流
2.块属性标签设置浮动之后，不再独占一行，如果不设置宽高，他的宽高由内容撑开
3.块属性标签设置浮动之后，他的margin属性的auto值失效
4.行属性标签设置浮动之后，可以设置宽和高，支持上下padding和上下margin

清浮动

浮动元素脱离文档流，父元素没有子元素撑开，导致父元素没有高度

清浮动方法：
1.给浮动元素的父级，添加 overflow:hidden
2.给父元素设置指定高度
3.给父元素添加 display:inline-block，该方法兼容性差
4.给父元素添加浮动
5.设置一个空标签，在空标签中设置属性

.clear{
clear:both;
height:0;
overflow:hidden;
}

6.通过after伪元素清浮动

.clearficx::after{
clear:both;
height:0;
content:'';
overflow:hidden;
display:block;
}

精灵图

精灵图，又叫 sprite (雪碧图)
他是把在项目中开发中所有用到的小图标拼合到一个图片上，这样在项目加载的时候，一次性的把小图标请求到客户端。
减少http请求，减轻服务器压力，提高了服务效率

鼠标变手型
cursor:pointer;

圆角
border-radius:10px;

精灵图
i{
display:inline-block;
background:url() no-repeat;
}

.类名{
width:
height:
background-position: 
}

定位

原理，定位的元素超出文档流

position 属性的值
static relative absolute fixed

static：静态定位，无参照物，不定位

relative：相对定位，以元素本身没有移动之前的位置为参照物

absolute：绝对定位，以当前元素的 第一个具有定位属性的祖先级元素为 参照物
作为参照物的祖先级元素，必须具有 relative 或 absolute
如果没有定位的祖先级属性，则参照物是 body

fixed：固定定位，相对于浏览器窗口定位

相对定位的特点：

1.相对定位基于元素原来的位置进行定位
2.元素设置了相对定位以后，对元素本身没有影响
3.元素设置了相对定位以后，虽然脱离了文档流，但是元素自身的位置依然占据文档流的空间
4.相对定位的元素层级比没有定位的元素层级高
5.可以通过 left top bottom right 改变元素的位置

绝对定位的特点：

1.设置了绝对定位的元素，脱离了文档流，不占据文档流空间，并且提升等级
2.行元素设置了绝对定位以后，可以设置宽高，可以设置上下 padding 和上下 margin，如果不设置宽高，宽高由内容撑开
3.块元素设置绝对定位以后，自动的margin消失，如果不设置宽高，宽高由内容撑开
4.绝对定位是相当于他的第一个具有定位属性的祖先级元素进行定位，如果不存在祖先级元素，则相对于body 定位。
5.一般地，如果设置了绝对定位，那么他的父元素需要有一个固定的高

固定定位

1.固定定位相当于浏览器窗口定位
2.固定定位脱离文档流