CSS学习之旅第三期（上期标题应该是第二期）

今天是我学习CSS的第三天，通过今天的学习我了解到了盒子可以设置内外边距以及focus属性和hover属性的作用，话不多说开始今天的分享。

一、focus的应用

focus准确来说是个伪类标签，适用于当一个元素进入即将进行交互的状态，准确来说focus 是用来获得聚焦对象的元素，并设置聚焦时的显示效果。当元素获得光标焦点时使用的样式，主要用在文本框输入文字时使用，focus 代表的是获取焦点时的样式，有人说啥是获取焦点时的样式，可以通过tab键来查看，一旦链接获取了焦点，则它的样式就是你设置的focus样式。

二、hover的应用

hover鼠标悬停和划过时的显示效果，光标经过某一元素时的样式，如果将此样式放在:focus之后，则当链接获取焦点时，显示:focus样式，当光标经过此链接时，会显示hover的样式，而将其放在focus前，则当鼠标滑过时显示的时focus的属性，因为其特性被覆盖了。

三、外边距和内边距

关于内外边距举个例子，桌面上放了两个杯子，杯子里有两个鸡蛋，鸡蛋和杯子之间的间距就是内边距，两个杯子之间的距离就是外边距，在vscode中鸡蛋就是指一个盒子中的文字等内容，文字和边框的距离就是内边距，盒子的边框和页面之间的距离称为外边距，内外边距的值有top（上边距）、bottom（下边距）、left（左边距）、right（右边距），外边距的属性magin，内边距的属性为padding，如果我们不添加方位的话，可以对其进行简写，一个值为四个方向的距离，多添加一个像素就意味着一个方向，其属性值从上开始，为上右下左一定要记住哦。

今天的分享到此结束。