1. CSS是什么

CSS 指层叠样式表 (Cascading Style Sheets)，通俗地说，它的作用是为我们HTML中的组件设计颜色、尺寸等类型样式信息。

CSS 语法有由选择器与属性声明两部分组成。选择器负责指明声明的属性对那些对象生效，属性声明部分规定生效的样式类型是怎样的。

选择器
{
属性1: 属性样式;
属性2: 属性样式;
}

2. CSS选择器

id选择器 id选择器的格式是#id,表示对具有该id属性的元素指定格式。下面的例子是对id为57的元素指定格式

#57
{
属性1: 属性样式;
属性2: 属性样式;
}

class选择器 class选择器的格式是.class,表示对具有该id属性的元素指定格式。下面的例子是对class为suta的元素指定格式

.suta
{
属性1: 属性样式;
属性2: 属性样式;
}

另外，我们还可以对某一具体标签下class为suta的元素指定格式

p.suta
{
属性1: 属性样式;
属性2: 属性样式;
}

元素选择器元素选择器表示对某一元素指定格式。下面的例子是对p元素指定格式

p
{
属性1: 属性样式;
属性2: 属性样式;
}

属性选择器属性选择器表示对具有某一属性的元素指定格式，这种属性的限制方法比较多样，他家可以参照下面的例子。

/* 存在title属性的<a> 元素 */
a[title] {
  color: purple;
}

/* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}

/* 存在href属性并且属性值包含"example"的<a> 元素 */
a[href*="example"] {
  font-size: 2em;
}

/* 存在href属性并且属性值结尾是".org"的<a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

总的来说，我们可以通过选择器，定向的选择我们需要配置样式的组件，进行设计，具体可以设计什么内容，就可以在属性中规定了，这些可以在我们使用的过程中不断探索积累，这里就不展开具体说明了。

3. 盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

当我们指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。这些数值也可以在我们CSS属性中进行设计。

一文理解CSS——前端探秘(2)

1. CSS是什么

2. CSS选择器

3. 盒子模型