css遇到的问题，以及解决方案

1.常用的几个图片类型：

1. 1.png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。

   2.jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。

   3.gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.

2.overflow几个不常用但却是很实用的属性

• 参数是scroll时候，必会出现滚动条。

  参数是auto时候，子元素内容大于父元素时出现滚动条

3.让一个浮动的元素垂直居中

border: 1px solid red;
float: left;position:

absolute;width: 200px;

height: 100px;

left: 50%;

top: 50%;

margin: -50px 0 0 -100px;

4.两个大山的宽度计算

1. 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin

   低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

5.三角形实现（无语）

width: 0;
height: 0;

border-top: 40px solid transparent;

border-left: 40px solid transparent;

border-right: 40px solid transparent;

border-bottom: 40px solid #ff0000;

6.元素垂直居中

html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative;（absolute）
            top: 50%; /*偏移*/元素的上边框已经到了中心
            margin-top：150px；（把元素向上移动高度的一半即可）
            transform: translateY(-50%);把元素向上移动高度的一半即可
        }
flex布局就是神器
 			display: flex;
            align-items: center; 
            justify-content: center;