1. 概述
CSS（Cascading Style Sheets，层叠样式表）可以为HTML（Hypertext Markup Language，超文本标记语言）中的元素添加样式，从而控制元素在浏览器中的显示效果。CSS样式由三个部分组成：选择器、属性和值。
1.1 选择器
选择器是用来选中需要添加样式的元素的标识符。CSS选择器可以根据元素本身、元素的属性、元素的父级关系等进行选择。
/* 根据元素名选择 */
p {
font-size: 16px;
}
/* 根据class选择 */
.title {
font-weight: bold;
}
/* 根据id选择 */
#header {
text-align: center;
}
上面的代码中，p、.title 和 #header 都是选择器。
1.2 属性
属性是用来控制元素样式的具体属性。CSS中有很多属性可以使用，比如字体大小、颜色、背景图片等等。
p {
font-size: 16px;
color: #333;
background-image: url("bg.jpg");
}
上面的代码中，font-size、color 和 background-image 都是属性。
1.3 值
值是属性中具体的取值。不同的属性可以有不同的取值，比如颜色可以是具体的颜色值，也可以是颜色名称。
p {
color: #333;
background-color: white;
font-family: Arial, sans-serif;
}
上面的代码中，#333、white 和 Arial, sans-serif 都是值。
2. CSS的继承和层叠
2.1 继承
CSS中的某些属性是可以继承的，也就是说如果一个元素没有指定该属性的值，那么它会从父元素中继承该属性的值。
比如：
/* 父元素 */
div {
font-size: 16px;
color: #333;
}
/* 子元素 */
p {
font-family: Arial, sans-serif;
}
在这个例子中，p 元素继承了div元素的color属性，而font-size则没有指定，所以它会使用p元素默认的font-size。
2.2 层叠
在CSS中，可能会存在多个选择器选中同一个元素，这种情况下就需要确定哪个样式会被应用。
层叠的规则如下：
权重越高的样式会覆盖权重越低的样式。
同一权重的样式，后声明的会覆盖先声明的。
!important声明的样式会覆盖其他的样式。
比如：
/* 样式1 */
p {
color: red;
}
/* 样式2 */
div p {
color: blue;
}
在这个例子中，当一个p元素同时被div和p选择器选中时，样式2的color属性会生效。
3. CSS的盒模型
3.1 概述
CSS的盒模型是用来描述元素占用空间的模型。一个元素的大小由它的内容、内边距、边框和外边距组成。
一个元素的盒模型可以使用以下属性进行控制：
width：元素的宽度。
height：元素的高度。
padding：元素内边距的宽度。
border：元素边框的宽度。
margin：元素外边距的宽度。
3.2 内外边距
内边距和外边距是盒模型中的重要概念。内边距是元素边框和内容之间的空间，而外边距是元素和其他元素之间的空间。
比如：
div {
padding: 20px;
margin: 10px;
border: 1px solid #333;
}
在这个例子中，这个div元素会生成一个带有20px的内边距和10px的外边距的矩形，边框有1px的厚度。
3.3 盒模型的计算
一个元素的实际大小是由它的content、padding、border和margin组成的，计算方法如下：
实际宽度 = width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right
实际高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top + margin-bottom
比如：
div {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid #333;
margin: 20px;
}
在这个例子中，这个div元素的实际宽度为：
实际宽度 = 200 + 10*2 + 1*2 + 20*2 = 282px实际高度的计算方法与实际宽度类似。
4. CSS的定位与布局
4.1 概述
CSS可以用来控制元素的位置。元素可以被定位在文档流中的任意位置，也可以被布局为和其他元素相对位置。
4.2 定位属性
CSS中常用的定位属性有以下三种：
static：默认的定位方式，元素按照文档流顺序进行布局。
relative：元素相对于它在文档流中的位置进行定位。
absolute：元素从文档流中完全脱离，相对于最近的定位祖先元素进行定位。
fixed：元素相对于浏览器窗口固定的位置进行定位。
绝对定位和相对定位都需要配合top、left、bottom和right属性来控制元素的位置。
4.3 布局属性
CSS中常用的布局属性有以下两种：
float：元素浮动到其容器的左侧或右侧。
display：控制元素的盒模型类型，比如block、inline、inline-block等。
使用float属性可以实现元素的文本环绕效果，而使用display属性可以控制元素的盒模型类型，从而影响元素的位置以及与其他元素的交互。
5. 总结
CSS样式由选择器、属性和值三部分组成，可以用来控制元素的显示效果、位置和布局。盒模型、继承和层叠是CSS中的重要概念，掌握它们对于实现复杂的页面布局非常重要。