CSS伪类选择器与盒子模型

1. 伪类选择器

伪类选择器通过冒号来定义，改变元素点击、点击后的样式，实现页面的动态化，使页面更加美观。

1.1->:link

未点击网址时，元素的状态。

1.2->:visited

访问网址后，元素的样式。

1.3->: hover

鼠标移动到网址上的样式。

1.4->：active

点击网址时的样式，鼠标放在网址上长按，可看见效果。

注意：

如果link visited hover active的顺序乱了，元素的样式效果可能不会显示出来。

2. 盒子模型

盒子模型：

• 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

• CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：

• 外边距（margin）、

• 边框（border）、

• 内边距（padding）、

• 实际内容（content）四个属性。

2.1->border（边框）

border包括颜色（border-color）、粗细（border-width)、样式(border-style)，又可细分为上、右、下、左四个部分。如下图所示，边框的粗细和样式可同样使用。

边框样式（border-style），常用属性值如下：

none	没有边框即忽略所有边框的宽度
solid	边框为单实线
dashed	边框为虚线
dotted	边框为点线
double	边框为双实线

2.1.2->边框综合属性设置

border : border-width border-style border-color ；

2.1.3->三角边框的设置

第一步：设置宽为0，因为宽会自动撑满一整行；

第二步：设置边框宽度，边框设为单实线

第三步：设置四个边框颜色皆为transparent(透明色)

第四步：设置上下左右任一边框颜色（透明色除外）

2.2->padding(内边距)

padding属性用于设置内边距，是指边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

1个值	padding：上下左右边距
2个值	padding: 上下边距 左右边距
3个值	padding：上边距 左右边距 下边距
4个值	padding:上内边距 右内边距 下内边距 左内边距

2.3->margin(外边距)

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。

margin-top	上外边距
margin-right	右外边距
margin-bottom	下外边距
margin-left	上外边距
margin	上外边距 右外边距 下外边距 左外边距

2.3.1外边距实现盒子居中

让一个盒子实现水平居中，需要满足一下两个条件：

1. 必须是块级元素。

2. 盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：