震震惊！！！css居然可以这么用！！！！！

海在诉说离别

于 2024-03-14 18:41:10 发布

阅读量369

点赞数 5

文章标签： css 前端 html

本文链接：https://blog.csdn.net/nemey/article/details/136718114

版权

本文介绍了CSS中鼠标悬停效果（`hover`）的应用，以及外边距（`margin`）和内边距（`padding`）的设置方法，包括单边和简写方式。详细讲解了如何通过CSS控制元素在鼠标悬停时的视觉变化和布局调整。

摘要由CSDN通过智能技术生成

一、css样式

当鼠标放在盒子（div）上之后的变化样式

1.标签：hover

示例：
    li:hover{样式}
添加想要添加的样式，当放在盒子上时，才会展示出样式，比如我们逛某个购物软件时，鼠标放上之后会变色或者出现边框或者其他样式。

二、css的边距

1.外边距

（1）单边框设置外边距
margin-top:50px;上
      -left:50px;左
      -bottoom:50px;下
      -right:50px;右
        
（2）简写
margin:50px;（上下左右）
margin:50px 50px;（上下）（左右）
margin:50px 50px 50px;（上）（左右）（下）
margin:10px 20px 30px 40px;（上）（右）（下）（左）
2.内边距

（1）单边设置内边距
padding-top:50px;上
padding-left:50px;左
padding-right:50px;右
padding-bottom:50px;下
（2）简写
padding:50px;
padding:50px 50px;
padding:50px 50px 50px;
padding:50px 50px 50px 50px;
值月越大外边距越大