美文网首页
一些常见的样式

一些常见的样式

作者: Trytodo_zbs | 来源:发表于2018-11-29 00:47 被阅读5次
//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;
}

相关文章

  • 一些常见的样式

  • CSS特性

    继承 CSS的一些特性,最常见的就是继承,CSS的有些属性是可以继承的,如果没有样式,则会继承父标签样式。比如co...

  • CSS的常见样式

    本篇文章将主要阐述CSS的常见样式 对于常见样式做出大量说明 虽然CSS的样式并不算多但是在CSS的使用上却是最多...

  • CSS的常见样式

    1. 块级元素和行内元素 块级元素主要有span, strong, em, br, img , input, la...

  • 常见的CSS样式

    注意:li 这个标签要设置 list-style: none; 去掉默认属性,否则在IE浏览器中当只有一行的时候,...

  • 常见的css 样式

    padding : 10px 10px 0px 10px;表示的是上下左右的边距;

  • 写css经常要清除的一些默认样式

    我们写css的时候经常会遇到要清楚一些默认的样式,其实每次做项目中需要清除的样式就经常是那么几个,最常见的比如 清...

  • WEB页面中几种常见的分页样式

    这里谈谈WEB页面中几种常见的分页样式 分页样式一:滚动翻页image 分页样式二:常规分页image 分页样式三...

  • HTML——常见样式

    1. 内容修饰样式 1.1 字体样式 1.1.1字体 1.1.2字号 1.1.3加粗 1.1.4颜色 1....

  • CSS常见样式

    块级元素有:div,h1,h2,h6,p,hr,form,ul,dl,ol,pre,table,li,dd,dt,...

网友评论

      本文标题:一些常见的样式

      本文链接:https://www.haomeiwen.com/subject/amwtcqtx.html