浮动 清除浮动带来的影响 背景 background属性 盒子模型 小风车/三角形 精灵图 背景固定

浮动

1.浮动

float:left[让元素左浮动] / right[右浮动] / none[默认]

1.会让元素版脱离标准文档流[只能覆盖背景,不能覆盖文字 文本环绕效果]
2.使不能设置宽度高度的元素能够设置宽度高度
3.宽度不写不再默认为父级元素的百分之百
4.加完浮动之后,如果后面的兄弟元素也有浮动,如果剩余控件足够那么下面紧挨着的兄弟元素也会来到元素的后面

清除浮动带来的影响
clear: left / right / both / none

2.背景

background-color ：rgb / rgba / #16进制数 / 颜色英文 ----背景颜色
background-image ：背景图片
background-repeat: 平铺
no-repet / repeat / repeat-x / repeat-y 设置背景
background-position: 调整背景图片位移

/* background-position: -200px 0px; */ 200px; */ 30%; */ top center; */ left; */right…

3.background属性

background-position 设置背景的位置
background-size 设置背景的大小
background-attachment 背景固定
background 复合属性

4.盒子模型

内容区
内边距 padding
边框 border
外边距 margin
margin:像素值 auto 像素值

5.制作小练习

1.小风车制作

2.代码

6.浮动延申

  用制作小风车的方法，可以制作各个方向的三角形

7.精灵图

background-image: url(images/图片2.png);
background-position: -200px 0px;
背景位置 background-position:2/1[px/百分比/方向]
[只给一个方向另外一个方向默认居中]

8.背景固定
background-image: url(images/图片2.png);
background-repeat: no-repeat;
/* background-image:url(images/1.jpg); /
background-attachment: fixed;
/ background-position: 200px 100px; /
/ background-size: 100% 100%; */ 1000px; */ cover; */ contain; */

背景固定
background-attachment:fixed 【固定背景 参照物为浏览器窗口】
background-size 设置背景的大小 值{水平方向} 值{垂直方向} /值{水平方向} /
cover{图片占满【以最大比例放大】整个div}/contain{最大比例放大【图片能完整的在整个背景中】}
复合属性【简写】background:没有顺序 没有必填项