一、CSS样式编辑
/* 一般而言，CSS的声明语句非常简单。 */ 选择器 { 属性: 值; /* 更多属性...*/ }
/* 你可以通过类名来指定它 */ .some-class { } /* 给出所有类名 */ .some-class.class2 { } /* 标签名 */ div { } /* id */ #someId { }
如果是， 选择器组合时候，尤其是class选择器，有空格和没有空格的区别很大，看如下例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <style type="text/css"> .green1 {color: green;} .red1 {color: red;} .purple1{color:purple} .green1 .red1{color: green;} /*带空格，表示嵌套的子元素class */ .green1.purple1{color: purple;} /*不带空格，表示同时具备这2个class */
</style> </head> <body> <h1 class="green1 ">.green1</h1> <h1 class="red1 ">.red1</h1> <h1 class="purple1 ">.purple1</h1> <div class="green1"> <h1 class="red1">.green1 .red1{color: red;} /*被嵌套的class */
</h1>
</div>
<h1 class="green1-1 purple1 ">.green1.purple1{color: purple;}</h1> /*同时具备连个class */
</body> </html>
参考：https://learnxinyminutes.com/docs/zh-cn/css-cn/
css 选择器： https://www.cnblogs.com/ssaylo/p/13223439.html
还有一些小专题：
https://blog.csdn.net/weixin_43736435/article/details/107119668
https://blog.csdn.net/zhou_shadow/article/details/91412014
https://www.cnblogs.com/jacobb/p/7674410.html
二、盒子模型
盒模型，顾名思义，就是一个盒子。生活中的盒子，有长宽高，盒子本身也有厚度，可以用来装东西。页面上的盒模型我们可以理解为，从盒子顶部俯视所得的一个平面图，盒子里装的东西，相当于盒模型的内容（content）；东西与盒子之间的空隙，理解为盒模型的内边距（padding）；盒子本身的厚度，就是盒模型的边框（border）；盒子外与其他盒子之间的间隔，就是盒子的外边距（margin）。
元素的外边距（margin）、边框（border）、内边距（padding）、内容（content）就构成了CSS盒模型。
几乎所有的tag, 如 div ,ul ,li, p等都具有盒子模型特征
填充凡是一：
内部
- padding-top：设置元素的顶部填充
- padding-bottom：设置元素的底部填充
- padding-left：设置元素的左部填充
- padding-right：设置元素的右部填充
外部：
- margin-top：设置元素的上外边距。
- margin-bottom：设置元素的下外边距。
- margin-left：设置元素的左外边距
- margin-right：设置元素的右外边距。
或者（如下 margin和padding一样）
-
padding:25px 50px 75px 100px;
- 上填充为25px
- 右填充为50px
- 下填充为75px
- 左填充为100px
-
padding:25px 50px 75px;
- 上填充为25px
- 左右填充为50px
- 下填充为75px
-
padding:25px 50px;
- 上下填充为25px
- 左右填充为50px
-
padding:25px;
- 所有的填充都是25px
关于border
盒子边框（border）
语法：
border : border-width | border-style | border-color
边框属性—设置边框样式：border-style 用于定义页面中边框的风格，常用属性值如下：
none: 没有边框即忽略所有边框的高度（默认值）
solid：边框为单实线（最常用）
dashed： 边框为虚线
dotted：边框为点线
double：边框为双实线
参考：https://www.jianshu.com/p/824eed8ce119