CSS各类小知识点归纳

CSS各类小知识点归纳

最近在复习之前学过的css，接触的越多越发现自己知道的太少，这里整理一下，我觉得我自己会忘记的小知识点，后面会一点一点的补上去的。

hover后进行放大和缩小的三种写法以及区别

第一种：

     单纯的直接对width和height进行修改

第二种：

      使用transfrom:scale(倍数)

第三种：

      使用zoom:倍数（浮点数/百分比）         

区别

	  第一种在修改宽高的同时，由于在标准文档流内，会对其他的元素产生影响
	  
	  第二种进行缩放时,可以通过transfrom-origin调整缩放的中心点只是在
	  Composite Layers层上的变化，所以会单独上一层绘画层进行渲染，不会
	  影响 到其他的元素，不过由于渲染的过程中对周围的文字会进行处理，文字
	  的高度为奇数时会有半个像素的处理量，为了优化这半个像素会进行优化处理
	  导致边缘模糊，如果要避免这种问题，将文字高度改为偶数即可。
	  
	  第三种进行缩放时，会进行重排，所以为了性能建议少用

防止padding和margin撑开盒子模型

border-sizing:border-box;
这样的话元素中设置的长和宽就是盒子的长宽，不会因为设置了内外边距导致盒子的实际长宽与设置不符合。

display:table 解决的问题

1. 大小不固定的元素垂直居中：

//父元素
display:table;
//子元素
display:table-cell;
vertical-align:middle;

2. 两列自适应布局
3. 等高布局

source标签实现各种兼容性

除了视频类型，其他类型（例如：图片）也是可以的

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

对于表单中的注意事项

取消表单轮廓
outline：none
防止文本域（textarea）拖拽
reasize：none

各类水平居中

块级元素居中：设置宽度，左右外边距设置auto
行内元素和行内块元素：父元素添加text-align:center;