美文网首页
css方便以后使用

css方便以后使用

作者: 眼镜蛇 | 来源:发表于2019-08-14 17:55 被阅读0次

本人觉得浮动挺好用的,flex有些用的很不错,但是操作起来没有浮动好操作,也许是还没掌握,还在学习中

清楚浮动

.clearFix:after{ content:''; clear:both; display:block;}

.fl{ float:left; display:inline;}

.fr{ float:right; display:inline;}

clearFix是给浮动的父级加的

移动端媒体查询,现在用的少了,第三方库支持的多移动端pc多都是自动响应的了,写在这里用时方便

@media screen and (max-width:最大宽度) and (min-width:最小宽度){……}

图片垂直居中(给图片的父级)

display:table-cell

vertical-align:middle

工作中常用但是就是记不住这些样式(伤脑筋)渐变只记录了线性渐变

background:linear-gradient() 

filter:blur(10px)   模糊效果 

background clip:背景裁剪区域 

background origin:背景定位(相对内容) 

background:linear-gradient(to bottom,#f65f57,#B4453A,#f65f57) no-repeat right/1px 15px;

border:样式(dotted点线,dashed虚线,solid实线,double双线) 

white-space:nowrap;强制不换行 

letter-spacing:16px文本间隔  

cursor:pointer :鼠标变手型

超过两行显示省略号

overflow: hidden;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

超出以省略号显示

text-overflow:ellipsis; // 溢出时产生省略号的效果 

overflow:hidden;  //溢出内容为隐藏 

white-space:nowrap; //强制文本在一行内显示 

::selection 鼠标选中后的变化背景颜色和字体颜色

兼容性:

ie6-9的渐变色做法

 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B2FFFFFF', endColorstr='#00FFFFFF',GradientType=0 );

相关文章

  • css方便以后使用

    本人觉得浮动挺好用的,flex有些用的很不错,但是操作起来没有浮动好操作,也许是还没掌握,还在学习中 清楚浮动 ....

  • css3 实现线条两端渐变效果

    接触了一个css3效果,记录下来,方便以后使用,在实践中学点新知识,共勉!! html标签 css样式 展现结果

  • 利用js实现360全景效果和3D模型展示

    先看效果: 功能主要靠css实现的,本人修改了下把属性拿出来,方便以后使用。 图片是通过本地路径加载的 以后直接修...

  • Bootstrap框架

    css框架:对css相同功能的整体封装,方便使用。 常见css框架:Amaze UI;Framework7;Boo...

  • MariaDB 数据库初始化批处理 Linux

    记录,方便以后使用

  • Sass快速入门

    摘抄于Sass中文网, 方便以后查看。 1. 使用变量; sass让人们受益的一个重要特性就是它为css引入了变量...

  • jQ 写 css3 效果的一点注意事项

    尽量用 class 挂钩,而不是图个方便的使用 $(el).css({.....}) 使用 class 挂钩的好处...

  • CSS代码语法

    CSS代码语法 注意:1、最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。2、为了使用样式更加容易...

  • 如何在react中使用自己的font

    今天遇到一个需求,要在项目中使用特定的字体,因为字数较多,而且方便以后做效果,于是便采用了CSS3的@font-f...

  • 移动端多图上传、文件上传及下载

    js+css实现手机端的多图片上传,为了方便使用,css和js都未内联,为性能建议使用时改为外联; 如要用到pc端...

网友评论

      本文标题:css方便以后使用

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