文本缩进：text-indext：2em；（缩进两个字）。
单行文本垂直居中：line-height：20px；（当行文本行高20px，当line-height等于容器的高时，当行文本在容器中垂直居中）。
文本左对齐：text-align：left；
px（像素单位）和em都是相对单位，em=1*font-size；
字体下划线：text-decoration：underline；
鼠标光标的样式：cursor：pointer；
圆角：border-radius：10px；
----------------------------------------------------
行级元素（display:inline;）：（1）内容决定元素所占位置（2）不能通过css改变宽高。
<sapn><strong><a><em><del>
块级元素（display:block;）：（1）独占一行（2）可以通过css改变宽高。
<div><p><ul><ol><li><form>
行级块元素（display:inline-block;）：（1）不独占一行（2）可以改变宽高
<img>
（ps：带有inline或者inline-block的都带有文字的特性，例如：两个单词在浏览器中显示会通过一个空格隔开，两张图片并排中间也会有一条小间隙）
（ps：行级元素只能嵌套行级元素，块级元素能够嵌套任何元素，但是<p>标签不能嵌套块级元素，<a>标签里面不能嵌套<a>标签）
----------------------------------------------------------------------
（ps：html页面中的<body>标签自带8px的margin值）
当margin和padding只有两个值的时候，分别代表上下，左右。例如margin：100px（上下） 150px（左右）
当margin和padding只有3个值的时候，分别代表上，左右，下，例如margin：100px（上） 150px（左右） 200px（下）
当margin和padding有4个值的时候，分别代表上，右，下，左，例如margin：100px（上） 150px（右） 200px（下） 250px（左）
（ps：margin：0 auto；自适应屏幕宽度的改变，前提是父子级元素必须都是块级元素）
---------------------------------------------------------------------
绝对定位：absolute（1、脱离原来的位置/层，进行定位），一般配合left和top一起使用。（2、离最近的，有定位的父级进行定位。如果进行绝对定位的元素的父级都没有设置position，那该元素根据文档进行定位。）
相对定位：relative（1、保留原来的位置，脱离原来的层，进行定位）一般配合left和top一起使用（2、相对于自己原来的位置进行定位，跟父元素有没有定位没有关系）
固定定位（相对于可视区的定位）：fixed（固定在页面的某个位置，及时拉动滚动条，被fixed定位的元素还是展示在屏幕的固定位置）
（ps：通常让relative充当定位的参照物，因为relative能够保留原来的位置的特性）
（ps：设置了position：absolute和float：left/right的元素，系统内部会把元素转成inline-block）
-----------------------------------------------------------------
float：
（1）当一个元素添加了float：left/right；之后，块级元素看不见添加了float的元素，块级元素的定位会重新排列。
（2）触发了BFC的块级元素和文本以及文本类元素（inline）都能看见添加了float的元素
（ps：clear：both；可以进行浮动的清除，但是前提是使用clear的元素一定要是块级元素）
-----------------------------------------------------------------
伪元素（是行级元素）：每个标签中都用两个伪元素分别是before和after。
例如：
html：
<span>124</span>
css：
span::before{
content:"content里面的内容用来修改伪元素的内容";
}
span::after{
content：“content即使不写内容，也要加上”；
}
-----------------------------------------------------------------
两个BUFF：
1、margin塌陷：（ps：父子元素嵌套在一起的时候，在垂直方向上的margin，往往会取最大的那个值，并且子元素会带着父元素一起动）
解决办法1：给父元素加上border：1px solid；（一般不用这种）
解决办法2：触发元素盒子的BFC
触发盒子BFC的几种办法（
1、position：absolute；
2、display：inline-block；
3、float：left/right；
4、overflow：hidden；
）
2、margin合并：兄弟元素在垂直方向上的margin共用。
解决办法1：给兄弟元素各自添加一个父元素，触发父元素的BFC（不推荐）
解决办法2：只设兄弟元素中其中一者的margin-top或者margin-bottom值
-------------------------------------------------------------
元素在屏幕（可视区）居中显示：
left：50%；
top：50%；
margin-left：-width/2px；
margin-top：-height/2px；
--------------------------------------------------------------
单行文本溢出部分用“...”表示：三个步骤
white-space：nowrap；（不换行）
overflow：hidden；（溢出部分隐藏）
text-overflow：ellipsis；（文字溢出部分用...表示）
-------------------------------------------------------------
背景图片设置大小：background-size：100px（width） 100px（height）；
背景图片设置不重复平铺：background-repat：no-repat；
背景图片位置：background-position：100px 100px；
-------------------------------------------------------------
（ps：www.css88.com）
来源：https://www.cnblogs.com/wyx221/p/10075726.html