CSS3 用户界面学习笔记

一、CSS盒模型

CSS盒模型由四个部分组成：内容(content)、填充(padding)、边框(border)和外边距(margin)。其中，填充、边框和外边距可以使用CSS进行设置。

1. 内容(content)

元素的内容区域大小由width和height属性控制，可以分别设置具体的数值，也可以使用百分比或auto关键字。

cssCopy Code
.box {
  width: 200px;
  height: 100px;
}

2. 填充(padding)

填充指的是元素边框和内容之间的空间。可使用padding属性设置，支持上右下左四个方向的值设定，也可以使用缩写属性padding: 上 右 下 左;

cssCopy Code
.box {
  padding: 10px 20px;
}

3. 边框(border)

边框指的是元素的边框线条。可使用border属性设置，支持上右下左四个方向的值设定，也可以使用缩写属性border: 线宽 线型 颜色;

cssCopy Code
.box {
  border: 1px solid #000;
}

4. 外边距(margin)

外边距指的是元素边框和其它元素之间的距离。可使用margin属性设置，支持上右下左四个方向的值设定，也可以使用缩写属性margin: 上 右 下 左;

cssCopy Code
.box {
  margin: 10px 20px;
}

二、文本格式化

CSS提供了多种方式对文本进行格式化。

1. 字体

字体可以通过font-family属性设置，可以指定多个备选字体。同时还可以设置字体大小（font-size）、字体粗细（font-weight）、字体风格（font-style）等属性。

cssCopy Code
/* 设置字体 */
.box {
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}
/* 设置字体大小 */
.box {
  font-size: 16px;
}
/* 设置字体粗细 */
.box {
  font-weight: bold;
}
/* 设置字体风格 */
.box {
  font-style: italic;
}

2. 文本颜色

文本颜色可以使用color属性进行设置。

cssCopy Code
.box {
  color: #333;
}

3. 文本对齐

文本可以水平居中、左对齐、右对齐或两端对齐，分别使用text-align属性设置。

cssCopy Code
/* 水平居中 */
.box {
  text-align: center;
}
/* 左对齐 */
.box {
  text-align: left;
}
/* 右对齐 */
.box {
  text-align: right;
}
/* 两端对齐 */
.box {
  text-align: justify;
}

4. 文本装饰

文本可以设置加粗、下划线、删除线等装饰效果，分别使用font-weight、text-decoration属性设置。

cssCopy Code
/* 加粗 */
.box {
  font-weight: bold;
}
/* 下划线 */
.box {
  text-decoration: underline;
}
/* 删除线 */
.box {
  text-decoration: line-through;
}

三、实例

下面是一个样式化后的按钮实例：

htmlCopy Code
<button class="btn">点击我</button>

cssCopy Code
.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  border: none;
  box-shadow: 0px 3px 10px rgba(0, 123, 255, .4);
  cursor: pointer;
}
.btn:hover {
  background-color: #0069d9;
}
.btn:active {
  box-shadow: none;
  transform: translateY(2px);
}

效果如下：