伪类和盒子模型

一，伪类

1，伪类用于定义元素的特殊状态。

可以用于：

设置鼠标悬停在元素上时的样式

为已访问和未访问链接设置不同的样式

设置元素获得焦点时的样式

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

 2，伪元素

 : :before ::after 伪元素用于设置元素指定部分的样式。

它可用于：

设置元素的首字母、首行的样式

在元素的内容之前或之后插入内容

h1::before {
    content: url(' ');
}

 二，盒子模型

1,盒模型

内容 - 盒的内容，其中显示文本和图像。

margin内边距 - 清除内容周围的区域。内边距是透明的，可以呈现元素的背景。

border边框 - 围绕内边距和内容的边框。

padding外边距 - 清除边界外的区域。外边距是透明的，不会遮挡其后的任何元素。外边距可以是负值，

2， 宽度和高度

height和width属性用于设置元素的高度和宽度。

height 和 width 属性可设置如下值：

auto- 浏览器计算高度和宽度（默认）

length- 以 px、cm 等定义高度/宽度

%- 以包含块的百分比定义高度/宽度

2,内边距

padding 内容与边框之间的距离。

CSS 拥有用于为元素的每一侧指定内边距的属性：

padding设四个值：上右下左

padding设两个值：上下——左右

3,外边距

margin 边框与边框之间的距离

margin 设四个值：上右下左

margin 设两个值：上下——左右

3，边框

border-style属性指定要显示的边框类型

border-style:dotted 点状边框

border-style:dashed 虚线边框

border-style: solid 实线边框

border-style: double 双线边框

border-style: none 无边框

边框宽度: border-width

边框颜色：border-color