HTML基础(2)～图片精灵，盒模型，浮动布局，弹性布局，css动画，变形

1，图片精灵（雪碧图）

图片精灵：将很多张小图整合成一张大图片，然后通过css样式在页面中显示出来某个小图片。
图片精灵的好处：1.减少页面的请求次数，2.提高页面的加载速度。
link标签：引入外部文件

	<link rel="stylesheet" href="sprite.css">

用到图片精灵的时候如何设置背景大图的尺寸？
不用看大图的原有尺寸，先看纵向和横向有多少小图，然后分别用个数*元素对应轴的尺寸。

2，元素盒模型

一个html元素，从里到外分为4个部分，内容盒(content)，内间距(padding)，边框(border)，外间距(margin)。
默认情况下，给元素设置的宽高，是内容盒的宽高，不包含边框与内间距。
设置盒模型，默认是内容盒content-box。

	box-sizing: content-box；

Border-box是边框盒。

	box-sizing: border-box;

计算宽高时：
按照内容去结算的是内容盒；
内容+内边距+边框=是边框盒。

3，外边距重叠的条件

必须是块元素，
必须是向下的外边距，
没有边框

4，float(浮动布局)

float：设置元素使用浮动布局，浮动有左浮动和右浮动。元素在使用浮动后，会脱离原有的文档流，在浮动文档流中，块元素是横向排列。
$注意：在最后一个浮动元素结束的地方必须清除浮动$
方法：

• 在最后一个浮动元素后面添加一个元素，

	clear：both

• 浮动的元素，都会有一个共同的父元素，可以为这个父元素添加一个后缀伪元素 ，在后缀中清除浮动。

	.clear-fix:after{
		content: "";
		display: block;
		clear: both;
	}

• 使用after和bifore双类伪元素清除浮动

5，样式的优先级

id选择器>class选择器>标签选择器。
id选择器==100，class选择器==10；标签选择器==1；当不同的选择器连用时，优先级会增加。
当两个选择器优先级一样时，会选择靠后的选择器样式（！Important 样式等级==10000）。

6，元素的隐藏

Rgba：颜色三基色(red,green,blue)，a代表透明度，默认是1,0是透明。值的范围是0.0—1.0。
display:none，隐藏元素，在文档流中没有位置，
visibility:hidden，隐藏元素，在文档流中有位置。

7，flex布局(弹性布局)

开启弹性布局：display:flex;
设置主轴的对其方式

flex-direction: row;
row默认的：主轴为水平方向，起点在左端 
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿

设置项目(子元素)在容器(父元素)中主轴方向的占比。

 flex-basis: 15%;值是百分比

更改项目在容器中的排列顺序，数字越大越靠后。

 order: 3;值默认是0

项目在主轴的对齐方式(项目的排列方向)

justify-content:space-around;
flex-start（默认值）：左对齐。
flex-end：右对齐。
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

项目在交叉轴的对齐方式

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。   
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。   
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

当容器变大的时候，项目也会随之变大。默认值是0不参与分配。

flex-grow: 1;

当空间不够的情况压缩每个项目的比例

flex-shrink: 2;

Flew-wrap：折行属性，规定项目如何换行。默认是不换。

flex-wrap: wrap;

Flex总结

flex-direction:属性决定主轴的方向
   flex-wrap：换行的方式
   flex-flow:上述两种的简写
   justify-content:项目在主轴上的对齐方式
   align-items：交叉轴的对齐方式
   align-content:属性定义了多根轴线的对齐方式。
   如果项目只有一根轴线，该属性不起作用。

8，2d变形

transform变形样式:

• translate移动
• rotate旋转
• scale缩放deg°

transform: rotate(30deg);

设置变形的原点，默认是中心点50%，50%。

transform-origin: 100% 100%;

平移变形：两个参数分别代表横向偏移量和纵向偏移量

transform: translate(50px,30px);

缩放变形:两个参数分别代表横向缩放比和纵向缩放比

transform: scale(0.5,3.5);

9，3d变形

属性定义了3d元素距离视图的间距，单位是像素。

perspective: 1000px;

10，css动画

1. Css过渡动画：transition;
2. Css关键帧动画：animation:ani1 3s linear infinite;

最后

1，如果文章有地方错误，请联系我，
2，如果你想学习，交流前端知识，
那么请扫码进群，欢迎你的加入。