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;
  1. 两列自适应布局
  2. 等高布局

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;

你可能感兴趣的:(前端,css)