【css3整理--text-overflow】的更多相关文章

css3整理-方便查询使用

最近详细地研究了CSS3的相关内容,并整理了这个文档,方便以后查询使用,分享给大家. 案例代码大家可以下载参考下:https://gitee.com/LIULIULIU8/CSS3 1.边框属性border-radius.box-shadow.border-image 边框圆角 border-radius:25px; -moz-border-radius:25px; /* 老的 Firefox */ 边框阴影 -moz-box-shadow: 10px 10px 5px #888888; /*…

css3整理--media

media语法: <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> 上面的media语句表示的是:当屏幕宽度小于或等于600px,调用small.css样式表来渲染Web页面. 含义: screen:指的是一种媒体类型:还可以选择all.print.TV等. and:关键词,与其相似的还有not,only. max-widt…

css3整理--word-wrap/word-break/white-space

word-wrap语法: word-wrap : normal | break-word normal : 默认值,单词如果单词超长,会冲出边界(单个单词超长,在当前行显示) break-word : 将内容在边界内换行,当单词在当前行放不下时,会自动切换到下一行(单个单词超长,在下一行显示) word-break语法: word-break:normal | break-all | keep-all normal:如果设置为默认值时中文则到边界处的汉字换行,如果是英文整个单词换行,如果出现某个…

css3整理--text-overflow

text-overflow语法: text-overflow : clip | ellipsis clip:表示不显示省略标记(...),而只是简单的裁切,需要在一定的高度范围内配合overflow:hidden属性使用,如果不配合的话将无任何效果: 和单独使用overflow:hidden;效果一致. ellipsis:对象文本溢出时将显示省略标记(...),需要配合overflow:hidden:white-space:nowrap一起使用才会有效果. 小知识点: /**这是firefox特…

【总结整理】overflow: auto/hidden;清除自己

.top-nav{ font-size: 12px; font-weight: bold; list-style-type: none; border-bottom: 8px solid #DC4E1B; overflow: auto;/*hidden与auto的效果一样*/ /*不是用来控制溢出,而是用来清除浮动,不是在该元素上清除浮动,而是清除自己*/ /*应用了overflow的元素,扩展到他需要的大小,以包围他里面浮动的子元素*/ }…

鼠标经过图片会移动（css3过渡，overflow：hidden）

效果图如下: 代码: <body> <div><img src="jd.jpg"></div> </body> img{ width: 250px; height: 250px; transition: all 0.6s;/* 过渡效果,图片实现效果,写在图片上 */ } div{ width: 240px;/* 宽度比图片宽度少10px */ height: 250px; border: 1px solid rgb(194,…

css3整理--filter

只在chrome的少数版本的浏览器中有实现,兼容性差,不适宜应用. filter语法: elm { filter: none | <filter-function > [ <filter-function> ]* } 取值说明: filter-function:有以下值可选 grayscale灰度 sepia褐色(求专业指点翻译) saturate饱和度 hue-rotate色相旋转 invert反色 opacity透明度 brightness亮度 contrast对比度 blur…

css3整理--clip

clip语法: .selector { clip: rect | auto | inherit } 注意:clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用 取值: rect:通过设置四个点来进行裁切,语法下面介绍 auto:默认,和不进行裁切的效果一致 inherit:继承父元素的裁切属性 clip: rect(<top>, <right>, <bottom>, <left>); 通过设置距离上…

css3整理--::selection

::selection作用: 当使用鼠标选择文本时,改版被选中文本的背景色和前景色.(默认情况下,window中背景色是深蓝色,前景色是白色.) ::selection语法: /*Mozilla Firefox*/ ::-moz-selection { background: 颜色值: color:颜色值: } /*Webkit,Opera9.5+,Ie9+*/ ::selection { background: 颜色值: color:颜色值: } 注意:::selection只能设置backg…

css3整理--calc()

calc()语法: elem{ width:calc( 50% -2px ); } 取值说明: calc是计算的缩写,上句含义是:计算elem父元素的50%再减2px,并将结果赋值给elem的width属性 calc()能做什么: calc()可以通过动态的计算来得到元素的宽度或者高度. 例如:width:calc(50% - 2px).当为元素设置了2px的边框时,通过这样的计算就可以避免因超出而折行. 可以使用 + - * / 等运算符来进行计算 注意:表达式中有“+”和“-”时,其前后必须…

css3整理--box-sizing

box-sizing语法: box-sizing : content-box || border-box || inherit 参数取值: content-box:此值为其默认值,其让元素维持W3C的标准Box Model,也就是说元素的宽度/高度(width/height)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度 /高度(content width/height)即:Element Width/Height = border+padding+conten…

css3整理--background-image

background-image语法: background-image: url1,url2,...,urlN; 通过“,”分隔N张背景图片,background的所有其它属性需要配合该属性进行设置,如下: background-repeat: repeat1,repeat2,...,repeatN; background-position: position1,position2,...,positionN; background-size: size1,size2,...,sizeN; b…

css3整理--background-origin

background-origin语法: background-origin: padding-box || border-box || content-box 参数取值: padding-box(padding):此值为background-origin的默认值,决定background-position起始位置从padding的外边缘(border的内边缘)开始显示背景图片: border-box(border):此值决定background-position起始位置从border的外边缘开…

css3整理--background-clip

background-clip语法: background-clip : border-box || padding-box || content-box 参数取值: border-box:此值为默认值,背景从border区域向外裁剪,也就是超出部分将被裁剪掉: padding-box:背景从padding区域向外裁剪,超过padding区域的背景将被裁剪掉: context-box:背景从content区域向外裁剪,超过context区域的背景将被裁剪掉:…

css3整理--background-size

background-size语法: /*Mozilla*/ -moz-background-size: auto || <length> || <percentage> || cover || contain /*Webkit*/ -webkit-background-size: auto || <length> || <percentage> || cover || contain /*Presto*/ -o-background-size: auto…

css3整理--Animation

animation语法: 1.动画的定义 @keyframes IDENT { from { Properties:Properties value; } Percentage { Properties:Properties value; } to { Properties:Properties value; } } 或者全部写成百分比的形式: @keyframes IDENT { 0% { Properties:Properties value; } Percentage { Properti…

css3整理--transition

transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-f…

css3整理--transform

transform语法: transform : none | <transform-function> [ <transform-function> ]* none为默认值,表示不进行变换 n个transform-function表示进行n种不同的变换.包括:rotate | scale | skew | translate |matrix;(每种变换中间用逗号分开) transform:rotate(30deg)  // 沿中心顺时针旋转30度 transform:transl…

css3整理--gradient

gradient语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )  // chrome的新版写法和FF的一致,只要改版前缀即可 第一个参数:指定渐变方向.例如:top,从上向下渐变:left,从左向右渐变: left top,从左上向右下渐变 第二个参数:指定起始点的颜色值 第三个参数:指定结束点的颜色值 还可以加参数,如: backgrou…

css3整理--rgba

rgba语法: rgba(0, 0, 0,0.5); 第一个参数:R 红色(0-255) 第二个参数:G 绿色(0-255) 第三个参数:B 蓝色(0-255) 第四个参数:透明度(0-1)使用rgba指定颜色的好处是:任何位置的颜色,使用rgba指定,都可以通过设置第四个参数来调整透明度.不仅仅可以设置背景色的透明度.使用rgba指定背景透明和使用opacity指定背景颜色的透明度的区别: 1.使用opacity指定背景颜色的透明度时,其内容也一起被设置透明度,导致内容模糊.如果不想内容模糊,…

css3整理--text-shadow

text-shadow语法: text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]... 或者 text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]... 第一个参数:…

css3整理--box-shadow

box-shadow语法:(想法:用阴影来做边框,就不会出现动态改变边框宽度而产生的重排问题) 对象选择器{box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色} 第一参数: 阴影类型:此参数是一个可选值,如果不设值,其默认的投影方式是外阴影:如果取其唯一值“inset”,就是将外阴影变成内阴影, 也就是说设置阴影类型为“inset”时,其投影就是内阴影: X轴偏移量:是指阴影水平偏移量其值可以是正负值可以取正负值,如果值为正值,则阴影在对象的右边,反之其…

css3整理--border-image

border-image语法: border-image : none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2} 第一个参数:none:默认值,边框无背景图片 image:和background-image一样,根据绝对定位设置背景图片的位置 第二个参数: number:设置边框的宽度,单位px,…

css3整理--border-radius

1.border-radius 标准: border-top-left-radius: x y // 左上角,x 圆角水平半径, y 圆角垂直半径 border-top-right-radius:x y border-bottom-right-radius:x y border-bottom-left-radius:x y FF: -moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomrig…

移动端 常见布局CSS3的细节

结合 Framework7 和ios UI系统,微信weUI,支付宝H5    我们在移动端一些css用法 细节的有了更深的了解: 高斯模糊的显示效果,ios8以上支持,ios8以上0.5px,backdrop-filter:  blur(10px)等新的属性被支持: 适当利用伪元素 比如menu 菜单icon: (ps:安卓uc 浏览器 伪元素transition支持的不是很好;) list   arrow 箭头,简易,不依赖字体,图片:减少请求:最早从weUI中看到这样写:支付宝 H5页面…

【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好.自信.谦虚.善于沟通.表达. ü  喜欢追究原理 5.2 面试内容 1.2.1简历上的项目 ü  介绍下你的项目吧? 1)        第一步:介绍你项目是干嘛的 2)        第二步:介绍下你负责的是哪块 3)        第三步:介绍下里面都有什么功能,你是怎么实现的,怎么分层的? 1…

css3

CSS3的换行 如果某个单词太长,不适合在一个区域内,它扩展到外面: 自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字: 允许长文本换行: p {word-wrap:break-word;}   CSS3 单词拆分换行 CSS3 单词拆分换行属性指定换行规则: p.test1 { word-break: keep-all; } p.test2 { word-break: break-all; }   CSS3 Text Overflow属性 CSS3文本溢出属性指定应向用户如何…

js零碎整理

本文格式: 大整合类标题 文章标题 作者:文章网址 USA:参考老外网址/老外网址 &&: 意思是内涵一个系列 javascript方面整理: 1. for in 循环的输出顺序问题 司徒正美:http://www.cnblogs.com/rubylouvre/archive/2013/10/30/3396042.html 2. 判定元素是否刚插入到DOM树 司徒正美:http://www.cnblogs.com/rubylouvre/archive/2013/10/30/3396289.…

CSS3 教程

CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CSS3 中的新特性. 开始学习 CSS3!  更多:http://www.runoob.com/css3/css3-tutorial.html --------------- 以下为部分摘抄 CSS3 模块 CSS3被拆分为"模块".旧规范已拆分成小块,还增加了新的. 一些最重要CSS3模块如下: 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面 更多…

CSS3 文本效果(阴影)

CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴影 CSS3 中,text-shadow属性适用于文本阴影. 您指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色: <style> h1 { text-shadow: 5px 5px 5px #FF0000; } </style>…