1. id选择器，内联样式，类选择器
2. padding 内边距
3. margin 外边距
4. letter-spacing: 1em; 字母间距
5. word-spacing: 18em; 单词的间距
6. line-height: 1.5em; 行高
等等基础样式，
```
body {
background-color: #f4f4f4;
color: rgb(12, 12, 12);
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
/* body中字体的颜色 ，如果类中没有指定 则使用，如果类中有指定字体颜色，则不会用 */
line-height: 1.5em; /*行高*/
}
.container {
width: 60%;
margin: auto;
}
.box1 {
background-color: rgb(251, 255, 255);
color: blueviolet;
border-radius: 15px;
}
.box1 h1 {
font-family: 'Times New Roman', Times, serif;
font-weight: bolder;
font-style: italic;
/*意大利斜体 */
text-decoration: underline;
/* 下划线 */
text-transform: uppercase;
/* 大小写 */
letter-spacing: 1em;
/* 字母间距 */
word-spacing: 18em;
/* 单词的间距 */
/* margin: 5px 5px 5px 5px 外边距上右下左 顺时针方向*/
/* margin: 5px 5px 外边距上下一样，，左右一样 */
/* margin: 5px 外边距上下左右一样 */
/* margin: 5px 10px 5px 外边距两边是上下边距，，中间是左右边距是一样的 */
}
.box2 {
background-color: rgb(236, 236, 236);
color: blueviolet;
border: 2px red dotted;
padding: 50px;
border-radius: 15px;
/* 里面的文字 内边距 30px和外面的边框 */
/* position: relative;
top: 30px;
left: 40px;
发生了相对位移，，相对于当前位置发生偏移WW */
}
.box3 {
background-color: rgb(238, 237, 238);
color: blueviolet;
border: 2px rgb(79, 34, 202) solid;
margin: 30px 10px 30px 10px;
border-radius: 15px;
/* 真个元素距外面的元素 外边距 30px */
/* position: absolute;
top: 30px;
left: 40px;
如果absloute 上下文中 不存在relative，相对于当前视窗做偏移 根节点 绝对位置*/
}
.list li {
list-style-image: url('./xingxing.jpg');
list-style: square
}
button {
width: 100px;
height: 50x;
background-color: rgb(117, 123, 129);
}
button:hover {
/*鼠标放在按钮上的时候触发样式 */
background-color: rgb(91, 197, 91);
}
button:active {
/*鼠标点击按钮上的时候触发样式 */
background-color: rgb(238, 66, 14);
}
a {
text-decoration: none;
color: grey;
}
a:hover {
color: aqua;
}
/* 浮动 */
.block {
float: left;
/* 未设置宽度时，占据整行 */
width: 33.3%;
border: 2px dotted green;
box-sizing: border-box;
/* 解决加上边框以后 超出宽度的问题*/
}
.block p {
padding: 15px;
}
#main-block {
float: left;
width: 70%;
border: 2px dotted green;
box-sizing: border-box;
}
#side-block {
float: right;
width: 30%;
border: 2px dotted green;
box-sizing: border-box;
}
.list2 li:nth-child(even) {
/* 列表中 可以选择具体的行数进行添加样式 例如偶数 */
background-color: hotpink;
}
.list2 li:nth-child(3) {
/* 列表中 可以选择具体的行数进行添加样式 例如3 */
background-color: rgb(18, 122, 241);
}
/* 如果父亲是相对位置 */
.position-box {
width: 1000px;
height: 500px;
border: 1px solid rgb(137, 170, 47);
position: relative;
}
/* 如果父亲是相对位置 ，儿子的话绝对位置相对于父亲进行偏移*/
.position-box h1 {
width: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%)
}
/* 子绝父相 居中
先让子盒子往右移动父元素的一半： left:50%；
再让子盒子往左移动自己的一半；
表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要改变代码；
*/
```
网友评论