CSS各类小知识点归纳
最近在复习之前学过的css,接触的越多越发现自己知道的太少,这里整理一下,我觉得我自己会忘记的小知识点,后面会一点一点的补上去的。
hover后进行放大和缩小的三种写法以及区别
第一种:
单纯的直接对width和height进行修改
第二种:
使用transfrom:scale(倍数)
第三种:
使用zoom:倍数(浮点数/百分比)
区别
第一种在修改宽高的同时,由于在标准文档流内,会对其他的元素产生影响
第二种进行缩放时,可以通过transfrom-origin调整缩放的中心点只是在
Composite Layers层上的变化,所以会单独上一层绘画层进行渲染,不会
影响 到其他的元素,不过由于渲染的过程中对周围的文字会进行处理,文字
的高度为奇数时会有半个像素的处理量,为了优化这半个像素会进行优化处理
导致边缘模糊,如果要避免这种问题,将文字高度改为偶数即可。
第三种进行缩放时,会进行重排,所以为了性能建议少用
防止padding和margin撑开盒子模型
border-sizing:border-box;
这样的话元素中设置的长和宽就是盒子的长宽,不会因为设置了内外边距导致盒子的实际长宽与设置不符合。
display:table 解决的问题
- 大小不固定的元素垂直居中:
//父元素
display:table;
//子元素
display:table-cell;
vertical-align:middle;
- 两列自适应布局
- 等高布局
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;