css方便以后使用

本人觉得浮动挺好用的,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 );

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,208评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,342评论 0 11
  • 概述 相信大家在写css属性的时候,会遇到一些问题,比如说:垂直对齐,垂直居中,背景渐变动画,表格宽度自适应,模糊...
    精神蛙阅读 250评论 0 1
  • 前一个端午 我收拾好行装 轻轻把根,和念想 系在门前的树上 去了远方 只是关于你的家乡 不经意的一牵 我便跌跌撞撞
    搁浅的星阅读 74评论 0 2
  • 【日精进打卡第527天】 姓名:姚玲雅 公司:浙江巨人控股有限公司 上海236期利他1组学员 做志工六次,已报名上...
    姚玲雅阅读 217评论 0 0