1.基础语法：
1.1选择器：
标签选择器：标签名 { 属性名: 属性值; }
• 类选择器：.类名 { 属性名: 属性值; }
• id选择器：#id 选择器名 { 属性: 属性值; }
• 选择器优先级：id 选择器 > 类选择器 > 标签选择器
• ！important优先级最高，用法：p { color: rgb(123, 52, 133) !important; }
• 后代选择器：父标签名和后代标签名必须用空格隔开
• 群组选择器用于同时对几个选择器进行相同的样式设置，使用时，两个选择器之间必须要用英文逗号隔开
1.2背景样式
div的color是div里面文字的颜色，background-color是div盒子的颜色，其他的元素也一样
background-color 属性可以给指定标签元素设置背景色
background-image 属性可以把图像插入背景。background-size属性可以给背景图设置大小。
用法：body {
background-image: url("moon.jpg");
background-size: 300px 300px;
}
background-position 属性，可以改变图像在背景中的位置。
background-repeat 属性是用来设置背景图像是否平铺。
下表列出了 background-repeat 属性的一些可取值以及每个可取值的含义。
| 可 取 值 | 描 述 |
| --------- | -------------------------------------------- |
| repeat | 背景图像将在垂直方向和水平方向重复（默认值） |
| repeat-x | 背景图像将在水平方向重复 |
| repeat-y | 背景图像将在垂直方向重复 |
| no-repeat | 背景图像将仅显示一次 |
我们规定应该从父元素继承 background-repeat 属性的设置。
1.3文本属性
| 属 性 | 可 取 值 | 描 述 |
|---|---|---|
| line-height | normal、number、length、% | 设置行高（多行元素的空间量） |
| text-indent | length、% | 设置文本缩进 |
| text-align | left、right、center、justify、start、end | 设置对齐方式 |
| letter-spacing | normal、length | 设置字符间距 |
| text-decoration | line、color、style、thickness | 设置文本修饰 |
| white-space | normal、pre、nowrap、pre-wrap、pre-line、break-spaces | 规定如何处理空白 |
| line-break | auto、loose、normal、strict、anywhere、unset | 处理如何断开带有标点符号的文本的行 |
| 2.盒模型(margin+border+padding+content) |
盒模型结构：doc.shiyanlou.com/courses/105…
各部分的功能如下表：
| 区域 | 功能 |
|---|---|
| 内容区 | 内容区在模型的中心包含了盒子内的信息也就是 HTML 元素。这些元素可以是文本、图片等。 |
| 内边距padding | 内边距是内容区和边框之间的空间，可以被看作是内容区的背景区域。 |
| 边框border | 边框用于标识盒子的边界，介于内边距和外边距之间。 |
| 外边距margin | 外边距位于边框外部，是边框与周围之间的空间。 |
2.1border属性
border-width：是边框宽度，宽度一般用数值即可。
border-style：是边框线的样式，一般有 solid（实线）、dotted（圆点）、dashed（虚线）、double（双横线）。
border-color：是边框线的颜色。
border、border-width、border-style、border-color 都是复合属性，我们也可以单独设置某条边框的样式。
例如，border-color 可以写成：border-top-color: 上边框颜色;
box-sizing: border-box;
比如你给一个div设置宽高为500px，但实际你设置的只是content，之后你又设置了padding:10px;border:1px solid red；
这时div的宽高就会变为522px（content 500px + padding 20px + border 2px） 相当于一个元素的实际宽高是由： padding + border + content 组成
①：没有设置box-sizing:border-box属性，宽高会加上padding和border的值，需要我们手动去计算，减去padding和border的值，并调整content的值，以免超过给定的宽高
②：加了box-sizing:border-box属性，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里，盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整
2.2padding属性
padding就是内容区域外部的空白区域。
其使用格式如下所示：
padding: 上右下左;
padding-top: 顶部填充值;
padding-left: 左边填充值;
padding-right: 右边填充值;
padding-bottom: 底部填充值;
2.3margin属性：用来设置元素的外边距,与padding同理
margin: auto表示水平居中
3.display属性
display 属性可以用来设置元素在页面上的排列方式，也可用来隐藏元素。
| 属性值 | 说明 |
|---|---|
| block | 块级盒子 |
| inline | 行级盒子 |
| inline-block | 本身是行级，可以放在行级盒子中，可以设置宽高；作为一个整体不会被拆散成多行（里面的元素相当于一个盒子，不能被拆分）如果元素超出了父盒子的范围，需要换行才能更好看，可以添加overflow-wrap:break-word;来换行 |
| flex | 控制子盒子的排版 |
行内元素可以和其他元素处于同一行，块级元素自己单独占一行
使用inline-block：比如，我们用 a 标签来实现导航的时候，a 标签虽然可以让元素在一行显示，但若我们想给每个 a 标签加上高和宽时发现没有任何效果。这时候用上 display: inline-block，它就具备块的特性了。
行级排版：盒子在一行内水平排放；一行放不下时，换行显示；text-align决定一行内盒子的水平对齐；vertical-align决定一个盒子在行内的垂直对齐；
块级排版：盒子从上到下排放；垂直margin合并；内部盒子的margin不会和外面的合并；不会和浮动元素重叠
flex：控制子级盒子摆放的流向、顺序；盒子的宽度和高度；水平和垂直方向的对齐
4.浮动与定位
4.1浮动：float 属性指定元素沿其容器的左侧或右侧放置
4.2定位
- 静态定位（static）:一般的标签元素不加任何定位属性时，默认都属于静态定位，静态定位在页面的最底层属于标准流（普通流），在页面中没有特殊的操作方式和显示效果
- 相对定位（relative）:该元素的位置相对于它原始的位置来计算的，其他元素就相当于它没有偏移一样布局（认为他还在原来的位置）
- 绝对定位（absolute）:把元素精确地放在任意位置，相对于最近的非static祖先进行定位；不会对常规流有任何影响（其他元素认为他不存在一样）
- 固定定位（fixed）:
fixed属性值用于固定定位，被固定的元素不会随着滚动条的拖动而改变位置；也不会对常规流有任何影响，但他的参考标准是页面窗口，而不是祖先元素。
学习体会
CSS主要是用来对页面的样式进行设计。我们可以通过运用CSS技术来设计出我们想要的页面效果，并且CSS是与HTML内容是分开的，这极大地方便了我们阅读、修改程序，也使得CSS具有一定的重复使用的特性，只需要在html文件中引入CSS文件即可，这对设计者来说十分方便的。除此以外，CSS比较容易学习但是如果想要使用的非常自然、熟悉的话是比较困难的，需要不断的运用、尝试才能设计出最具有自我特色的html页面。因此，学习CSS不仅要学它的使用，更要学习如何合理的运用到你想要表达的页面当中去，打造一个属于你自我特色的页面，这种实践内容才是我们学习的目的，才能促进我们不断进步。
