HTML样式

1.margin 是指元素周围的一块透明区域，它用于控制元素与其他元素之间的间距。

常见用法：

margin: 10px;：上下左右均为 10px 的外边距。
margin: 5px 10px;：上下为 5px，左右为 10px。
margin: 2px 4px 6px 8px;：分别为上、右、下、左的外边距。

2.padding 表示元素的内边距，即元素内容与边框之间的空间。它用于控制元素内部内容与其边框之间的距离。

常见用法：

padding: 10px;    --------上下左右均为 10px 的内边距。
padding: 5px 10px;   -------上下为 5px，左右为 10px。
padding: 2px 4px 6px 8px;    --------分别为上、右、下、左的内边距。

3.box-sizing指浏览器如何解析一个元素的宽度和高度。 

常见取值：

（1）content-box（默认值）
元素的宽度和高度仅包括内容区域（不包括 padding、border 和 margin）。
实际占用空间 = width + padding + border。
（2）border-box
元素的宽度和高度包括内容、padding 和 border。
即设置的 width 和 height 就是整个盒子的最终尺寸。

4.font-family 是 CSS 中用于指定网页中文本字体的属性。

基本语法：

       font-family: "字体1", "字体2", ..., fallback-字体;
注：

      "字体1"：首选字体（如 "Microsoft YaHei"）。
      "字体2"：次选字体，当前面字体不可用时使用。
      fallback-字体：通用字体族，如 serif、sans-serif、monospace 等，作为最后兜底选项。

5.justify-content 是 CSS Flexbox 布局中的一个属性，用于控制容器内项目（子元素）在主轴（main axis）上的对齐方式。（它适用于设置了 display: flex 的容器。）

6.overflow 是 CSS 中的一个属性，用于控制元素内容溢出其边界时的显示方式。

常见取值及效果：

visible	默认值。内容溢出时不裁剪，会显示在元素外面
hidden	溢出内容被裁剪，且不显示滚动条
scroll	溢出内容被裁剪，并始终显示滚动条（无论是否溢出）
auto	类似于 scroll，但滚动条只在内容溢出时才出现

7.border-radius用于设置元素边框的圆角效果。它可以让矩形的盒子或边框变成带有圆角的形状。

通过 border-radius 可以将一个直角的 <div>、按钮、图片等元素变为圆角样式。值可以是像素（px）、百分比（%）或其他单位。

常见用法：

border-radius: 5px;    ----------四个角都有 5px 半径的圆角

border-radius: 50%;     -----------元素变成圆形（常用于头像）

border-radius: 12px 8px 6px 4px;     ----------分别设置左上、右上、右下、左下四个角的圆角半径

8.gap 是 Flexbox 或 Grid 布局中用于控制子元素之间间距的属性。gap 不会影响容器边缘与子元素之间的距离，只作用于子元素之间。

例如：

           gap: 10px;     ------表示其所有子元素之间的水平和垂直间距均为 10px。

9.outline 可以控制这个轮廓的样式、颜色和是否显示。

常见用法：

outline: none;	移除轮廓线（常用于去除输入框或按钮的默认聚焦边框）
outline: 2px solid red;	设置红色实线轮廓线
outline: dashed 1px #000;	设置黑色虚线轮廓线