html,css基础(2)~元素盒模型，浮动布局，弹性布局-前端开发

目录1.图片精灵（雪碧图）2.元素盒模型3.外边距重叠的条件4.浮动布局5.样式的优先级6.元素的隐藏7.弹性布局8.2d变形9.3d变形10.css动画1.图片精灵（雪碧图）(1)Link标签：引入外部文件link rel=stylesheet href...

1.图片精灵（雪碧图）

(1)Link标签：引入外部文件

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

(2)用到图片精灵的时候如何设置背景大图的尺寸？
不用看大图的原有尺寸，先看纵向和横向有多少小图，然后分别用个数*元素对应轴的尺寸。
(3)图片精灵的定义：将很多张小图整合成一张大图片，然后通过css样式在页面中显示出来某个小图片，这种技术叫图片精灵。
(4)图片精灵的好处：1.减少页面的请求次数，2.提高页面的加载速度。

2.元素盒模型

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

	box-sizing: content-box；

(4)Border-box是边框盒。

	box-sizing: border-box;

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

3.外边距重叠的条件

(1)必须是块元素，
(2)必须是向下的外边距，
(3)没有边框

4.浮动布局

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

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

	clear：both

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

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

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

5.样式的优先级

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

6.元素的隐藏

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

7.弹性布局

(1)开启弹性布局：Display:flex;
(2)设置主轴的对其方式

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

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

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

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

 order: 3;值默认是0

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

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

(6)项目在交叉轴的对齐方式

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

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

flex-grow: 1;

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

flex-shrink: 2;

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

flex-wrap: wrap;

(10)Flex总结

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