一些常见的样式

//html,body默认情况下不会全屏,并且还可能会有一定的padding,marging
html,body{height:100%;margin:0;padding:0;width:100%;}

//默认h1,h2,h3,h4,h5,h6,p都带有一定的padding,marging
//大多数框架都会先设置为0,再根据实际情况来设置自己的
h1,h2,h3,h4,h5,h6,p{padding: 0;margin: 0;}

/*li去掉前面的点*/
li{list-style-type:none;}

//iconfont字体图标的使用
@font-face {
    font-family: 'iconfont';  /* project id 243270 */
    src: url('../font/font_324325_vj6drnij9syycik9.eot');
    src: url('../font/font_324325_vj6drnij9syycik9.eot?#iefix') format('embedded-opentype'),
    url('../font/font_324325_vj6drnij9syycik9.woff') format('woff'),
    url('../font/font_324325_vj6drnij9syycik9.ttf') format('truetype'),
    url('../font/font_324325_vj6drnij9syycik9.svg#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

/*特殊纪念日灰屏*/
.grayscale{
  filter: grayscale(100%);/*IE浏览器*/
  -webkit-filter: grayscale(100%);/*谷歌浏览器*/
  -moz-filter: grayscale(100%);/*火狐*/
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);/*谷歌浏览器*/
}

/*form表单两端对齐*/
.formAlign{text-align:justify;text-justify:distribute-all-lines;/*ie6-8*/text-align-last:justify;/* ie9*/-moz-text-align-last:justify;/*ff*/-webkit-text-align-last:justify;/*chrome 20+*/}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
    .formAlign:after{content:".";display: inline-block;width:100%;overflow:hidden;height:0;}
}

/*按钮禁用*/
.disabled{color:#ACA899!important;pointer-events: none!important;}

/*flex盒模型  下面的属性将忽略默认的属性*/
.flex{display: flex;display: -webkit-flex;}
/*主轴方向flex-direction*/
.flex_row_reverse{flex-direction:row-reverse;-ms-flex-direction:row-reverse;}/*主轴为水平方向,起点在右端*/
.flex_column{flex-direction:column;-ms-flex-direction:column;}/*主轴为垂直方向,起点在上沿*/
.flex_column_reverse{flex-direction:column-reverse;-ms-flex-direction:column-reverse;}/*主轴为垂直方向,起点在下沿。*/
/*换行情况flex-wrap  默认为不换行*/
.flex_wrap{flex-wrap: wrap;-ms-flex-wrap:wrap;}/*换行 第一行在上方*/
.flex_wrap_reverse{flex-wrap: wrap-reverse;-ms-flex-wrap:wrap-reverse;}/*换行,第一行在下方。*/
/*主轴上的对齐方式justify-content*/
.flex_justify_center{justify-content:center;-ms-flex-pack:center;}/*居中*/
.flex_justify_end{justify-content:flex-end;-ms-flex-pack:end;}/*右对齐*/
.flex_spacebetween{justify-content:space-between;}/*两端对齐,项目之间的间隔都相等*/
.flex_justify_around{justify-content:space-around;}/*每个项目两侧的间隔相等*/
/*项目在交叉轴上如何对齐align-items*/
.flex_align_center{align-items: center;-ms-flex-align:center;}/*交叉轴的中点对齐*/
.flex_align_start{align-items:flex-start;-ms-flex-align:start;}/*交叉轴的起点对齐*/
.flex_align_end{align-items:flex-end;-ms-flex-align:end;}/*交叉轴的终点对齐*/
.flex_align_baseline{align-items:baseline;}/*项目的第一行文字的基线对齐*/


/*不换行  超过使用...标记*/
.nowrap_point{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/*多行文本最后省略号*/
.wrap_point{display: -webkit-box;-webkit-line-clamp:2;overflow: hidden;-webkit-box-orient: vertical;text-overflow: ellipsis;}
/*容器内水平居中*/
.horizontal_center{margin: 0 auto;text-align: center;}


//去掉ie10以下img标签的边框
img {
  border-style: none;
}

你可能感兴趣的:(一些常见的样式)