博客列表 >css hover影响后面的盒子的解决方法

css hover影响后面的盒子的解决方法

kiimi的博客
kiimi的博客原创
2017年11月21日 17:04:102235浏览

CSS鼠标移上去给元素加边框。后面元素移动的原因,是处于hover状态的div添加的边框导致div大小发生变化。这里涉及到div的盒子模型,即一个div的大小是等于content+padding+border+margin。详细可百度div盒子模型。

知道原因就知道了解决办法,两种方法:

第一种方法:让鼠标hover时改变div的width和height只需减去边框大小,这样div的大小就没有发生改变。

第二种方法:使用box-sizing属性改变div盒子模型的规则。    详情查看:http://www.w3school.com.cn/cssref/pr_box-sizing.asp


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议