CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE10以上不支持. 如果你安装了多个IE,条件注释将会以最高版本的IE为标准. 条件注释的基本结构和HTML的注释(<!– –>)是一样的.因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释…

1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; 2.设置溢出文本显示为省略标记: text-overflow:ellipsis; (注:text-overflow:clip | ellipsis | ellipsis-word;…

属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val"] E[att*="val"] E[att|="val"] 伪对象选择符  E:first-letter/E::first-letter 设置对象内的第一个字符的样式. <p>今天,阳光明媚,晴空万里,非常适合户外活动,如踏青.远足之类的.长期坐…

这篇文章这篇文章主要介绍了css中常用但是又难记的样式作为总结,方便大家学习和使用.包括了‘单行缩略号‘.’css圆角兼容'.‘元素阴影’,‘border取消宽度影响’,‘css3的背景渐变’,‘css的透明’等等 单行缩略号  .overhid{ overflow: hidden; white-space:nowrap; text-overflow:ellipsis; } css圆角兼容 .setradius{ -moz-border-radius: 5px; -webkit-border-r…

强制文本显示 让一段文字在固定宽度在一行显示,最后一个字符为省略标记(...),css样式如下 单行显示语法:white-space:nowrap; div{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } 效果: 多行文本最后省略号: div{ display: -webkit-box; -webkit-line-clamp:; overflow: hidden; -webkit-box-orient: vertic…

控制线显示0.5px .line:after{ content:""; display:block; position:absolute; width:200%; left:0; right:0; top:0; z-index:99; border-bottom:1px solid #eee; -webkit-transform-origin:0 0; transform-origin:0 0; -webkit-transform:scale(0.5, 0.5); transform:…

一.背景相关 背景颜色 background-color :颜色名称/rgb值/十六进制值 背景图片 background-image :url('') 背景图片平铺方式 background-repeat : repeat-x(仅水平重复) repeat-y(仅垂直重复) no-repeat(不重复) 设置背景图片位置 background-position : 数字+单位/center/top/bottom/left/right 同上. 例如:50px 50px 背景图片是否滚动 backg…

_______________________________________________________________  css3 瀑布流 N 列 <ul><li>aaa</li><li>aaa</li></ul> ul{-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;} ul li { -moz-page-break-inside: avoid;…

限制行数溢出省略号 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ; overflow: hidden; 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. overflow: hidden; text-overflow:ellipsis; white-space: nowrap;…

.box{ //改变轴的方向 flex-direction:column; //两端对齐 justify-content:space-between; //换行 flex-wrap: wrap; //在轴上如何对齐 //center:居中, //flex-start:在主轴上由左或者上开始排列 //flex-end:在主轴上由右或者下开始排列 //space-around:每个项目两侧的间隔相等 align-items: center; }…