1、visibility和display的区别：
visibility:visible; 显示
visibility:hidden; 隐藏，但是保留元素所占的空间
display:block; 显示
display:none; 隐藏，不保留元素所占空间
2、margin和padding的区别：
margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。
padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。
（1）margin-left:10px; 左外边距
（2）margin-right:10px; 右外边距
（3）margin-top:10px; 上外边距
（4）margin-bottom:10px; 下外边距
（5）margin:10px; 四边统一外边距
（6）margin:10px 20px; 上下、左右外边距
（7）margin:10px 20px 30px; 上、左右、下外边距
（8）margin:10px 20px 30px 40px; 上、右、下、左外边距
（1）padding-left:10px; 左内边距
（2）padding-right:10px; 右内边距
（3）padding-top:10px; 上内边距
（4）padding-bottom:10px; 下内边距
（5）padding:10px; 四边统一内边距
（6）padding:10px 20px; 上下、左右内边距
（7）padding:10px 20px 30px; 上、左右、下内边距
（8）padding:10px 20px 30px 40px; 上、右、下、左内边距
3、border边框属性：
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
例如：
边框各属性独立的样式进行CSS压缩合并
border-color:#000; border-style:solid; border-width:1px
可以简写为：
border:1px solid #000
左边框各属性独立的合并
border-left-color:#000; border-left-style:solid; border-left-width:1px
可以简写为
border-left:1px solid #000
上、下、左相同边框样式，右边无边框
border-left:1px solid #000; border-top:1px solid #000;border-bottom:1px solid #000;
简写为：
border:1px solid #000;border-right:0
向 div 元素添加圆角边框：
div{
border:2px solid;
border-radius:25px;
}
4、控制图片变色
下面代码的效果是鼠标滑过图片就变亮了，控制的是图片的透明度
img {
opacity:0.1;/*取值范围是0-1*/
filter(alpha=10);/*取值范围是0-100*/
}
img:hover {
;
filter(alpha=100);
}
以下代码可以使图片变成灰白的，使用的是滤镜
img{ /*图片置灰的滤镜*/
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
5、居中的实现
最外层的body设置text-align:center|left|right;里面的div设置margin:0 auto;可以实现水平居中，靠左，靠右
外层div设置text-align:center|left|right;里面的图片需设置margin:0 auto;可以实现水平居中，靠左，靠右
max-width:100%;max-height:100%;一起使用代表图片的宽高尺寸最大不能超过它所在的空间的宽高，即等比例压缩图片。
<body>
<div style="width:100px;height:100px;text-align:center;">
<a href="">
<img src="" style="margin:0 auto;max-width:100%; max-height:100%"/>
</a>
</div>
</body>
使div里面的文字居中：
div设置text-align:center; 可以实现里面的文字左右居中
div设置 一个height，再设置一个line-height, 这两个值设置的一样就能实现里面的文字上下居中
.ban{
width:1000px;
height:30px; /*值要一样，实现上下居中*/
line-height:30px; /*值要一样，实现上下居中*/
text-align:center; /*文字左右居中*/
background:rgb(214, 209, 8); /*设置div的背景色*/
color:rgb(94,94,94); /*设置字体颜色*/
font-size:14px; /*设置字号大小*/
font-weight: bold; /*设置字体加粗*/
margin:auto; /*div居中*/
}
<div class="ban"><span>累计180天充值100万以上以下设备任选其一！</span></div>
6、背景图片的设置
background-color 规定要使用的背景颜色。
background-position 规定背景图像的位置。
background-size 规定背景图片的尺寸。
background-repeat 规定如何重复背景图像。
background-origin 规定背景图片的定位区域。
background-clip 规定背景的绘制区域。
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
background-image 规定要使用的背景图像。
inherit 规定应该从父元素继承 background 属性的设置。
对背景图片设置属性：background-size：cover;可以实现背景图片适应div的大小。
background-size有3个属性：
auto：当使用该属性的时候，背景图片将保持100% 的大小显示，不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时，图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。
cover：当使用该属性时，图片将被缩放至恰好能覆盖div，并且图片被隐藏的部分最少，这种属性在大图背景中应用比较广泛。这点比较难理解，需要结合实践理解。
contain：当使用该属性时，图片被缩放至最大且能被完全展示出来，但是由于图片的的尺寸比例与div的尺寸比例会有不同，所以当图片不能盖住div时，图片会自动平铺。
background: url(./images/logo.png) no-repeat; no-repeat为不平铺。
js给DOM对象设置background 属性，在一个声明中设置所有的背景属性
Object.style.background=background-color background-image background-repeat background-attachment background-position
background-color 设置元素的背景色。
color-name
color-rgb
color-hex
transparent
background-image 设置背景图像。
url(URL)
none
background-repeat 设置背景图像是否及如何重复。
repeat
repeat-x
repeat-y
no-repeat
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
scroll
fixed
background-position 设置背景图像的起始位置。
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
7、人民币价格的显示
<div font-family="Arial;">
<span>¥20.0</span><!--这种方式在不同浏览器可能显示的不一样-->
<span>¥20.0</span><!--推荐这种使用实体符号的写法-->
</div>
<div style="text-decoration:line-through">10000元</div><!--划掉价格，一般用于显示原价-->
效果图：
8、光标形状的控制
例子：style="cursor:pointer;"
cursor 属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。