常用小知识点

1､文字显示第N行之后变成…显示，只适合谷歌浏览器

text-overflow: -o-ellipsis-lastline;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2; //这儿的数字代表的就是你所需要实现效果的第N行

-webkit-box-orient: vertical;

word-break: break-all;

兼容方式

p {

position: relative;

line-height: 1.4em;

/* 3 times the line-height to show 3 lines */

height: 4.2em;

overflow: hidden;

}

p::after {

content: "...";

font-weight: bold;

position: absolute;

bottom: 0;

right: 0;

padding: 0 20px 1px 45px;

background: url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;

2､子元素文字始终居中

div {

width: 300px;

height: 300px;

border: 1px solid red;

}

p {

width: 300px;

text-align: center;

/*height: 300px;

display: table-cell;

vertical-align: middle;*/

line-height: 300px; /* 设置行高，或者用上设方式 */

}

3、盒子水平、垂直居中

css3方式，嵌套div加上样式

display: flex;

justify-content: center; /* horizontal centering */

align-items: center; /* vertical centering */

普通写法 //不支持IE6，IE7

display: table-cell;

vertical-align: middle;

text-align: center;

4､给定宽度，内部文字，元素平均分布 ，父盒子添加样式

display: flex;

/*justify-content: space-around;*/ /* 弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半 */

justify-content: space-between; /* 左右两边不留空隙，中间子元素间隙对等分*/

5、flex-grow 属性规定项目将相对于同一容器内其他灵活的项目进行扩展的量，做等量均分可以使用

父元素：display:flex;

子元素：flex-flow: number|initial|inherit; 默认值是 0

.container>div:nth-of-type(1) {

flex-grow: 1;

}

.container>div:nth-of-type(2) {

flex-grow: 3;

}

.container>div:nth-of-type(3) {

flex-grow: 1;

}

6､线性渐变

-moz/o/ms/webkit-linear-gradient(起始点，起始颜色，终点颜色 )

第一个参数可以使用三种方式，如top 是指从上到下渲染，如to bottom 是左上角到右下角，或者角度0deg 0度表示渐变方向从下向上，90度表示渐变方向从左向右。如果取值为下值，其角度按顺时针方向旋转。

eg:background:-moz/o/ms/webkit-linear-gradient(top,#ccc,#000);

线性渐变在ie下的应用：

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/IE<9>/

-ms-filter: “progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)”;/IE8+/

7､animation动画

animation 属性是一个简写属性，用于设置六个动画属性

animation: name duration timing-function delay iteration-count direction;

• animation-name 规定需要绑定到选择器的 keyframe 名称
• animation-duration 规定完成动画所花费的时间，以秒或毫秒计
• animation-timing-function 规定动画的速度曲线
• animation-delay 规定在动画开始之前的延迟
• animation-iteration-count 规定动画应该播放的次数
• animation-direction 规定是否应该轮流反向播放动画
• animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 要另外单独写
• animation-fill-mode 规定对象动画时间之外的状态。 要另外单独写

//精简版

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */

//完整版

animation: myfirst 5s linear 2s infinite alternate;

/* Firefox: */

-moz-animation: myfirst 5s linear 2s infinite alternate;

/* Safari 和 Chrome: */

-webkit-animation: myfirst 5s linear 2s infinite alternate;

/* Opera: */

-o-animation: myfirst 5s linear 2s infinite alternate;

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

@keyframes myfirst

{

from {background: red;}

to {background: yellow;}

}

@-moz-keyframes myfirst /* Firefox */

{

from {background: red;}

to {background: yellow;}

}

@-webkit-keyframes myfirst /* Safari 和 Chrome */

{

from {background: red;}

to {background: yellow;}

}

@-o-keyframes myfirst /* Opera */

{

from {background: red;}

to {background: yellow;}

}

8､background-size 属性

background-size: length|percentage|cover|contain;

length:设置背景图像的高度和宽度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

percentage:以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

9､background-position属性

可能的值有3种方式，默认值：0% 0%。可能需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作

1､如果您仅规定了一个关键词，那么第二个值将是"center"。

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

2､x% y% ，第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。

3､xpos ypos，第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

10、object-position/object-fit属性

这里的object实际上指的是replaced element(替换元素)，具体指的是其内容不受CSS视觉格式化模型控制，例如image, iframe, object, video, textarea, input是替换元素，audio和canvas在某些特定情形下为替换元素。

object-fit和object-position之间的关系有点类似于background-size和background-position

object-fit有五个值

.fill { object-fit: fill; }

.contain { object-fit: contain; }

.cover { object-fit: cover; }

.none { object-fit: none; }

.scale-down { object-fit: scale-down; }

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。

contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。

cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。

none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。

scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

object-position控制替换内容位置，默认值是50% 50%，也就是居中效果，也支持负值，建议还是使用calc实现相对右下角定位，例如object-position: calc(100% - 20px) calc(100% - 10px);

11､实现图片居中的兼容性又比较好的方法

html:

<ul class="imgWrap clearfix">

<li><span></span><img src="img/HBuilder.png" alt="" /></li>

</ul>

css:

<style type="text/css">

.imgWrap li{

height: 219px;

float: left;

border: solid 1px #666;

margin: 10px 10px 0 0;

list-style: none;

text-align: center;

font-size: 0;

}

.imgWrap span {

display: inline-block;/*将行内元素改变为行内块元素显示*/

width: 1px;/*实现ＩＥ下可读效果*/

height: 100%;/*使用元素高度和图片容器高度一样*/

vertical-align: middle;/*垂直对齐*/

}

.imgWrap img {

vertical-align: middle;

}

</style>

12、父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐(和图片居中差不多)

html:

<div class="test"><span>这里存放的是文字</span></div>

css:

.test{

width: 300px;

height: 300px;

background: honeydew;

display: table-cell;

vertical-align: middle;

}

.test span{

display: inline-block;

vertical-align: middle;

}

13、css绘制三角形，箭头朝上用bottom,朝下用top，原则上是相反方向

.triangle{

width: 0;

height: 0;

border-bottom: 6px solid #ff3300;

border-left: 4px solid transparent;

border-right: 4px solid transparent;

}

同理 箭头朝右用left,朝左用right

.triangle{

width: 0;

height: 0;

border-left: 6px solid #ff3300;

border-top: 4px solid transparent;

border-bottom: 4px solid transparent;

}

14､will-change属性

will-change属性可以提前通知浏览器我们要对元素做什么动画，这样浏览器可以提前准备合适的优化设置。这样可以避免对页面响应速度有重要影响的昂贵成本。元素可以更快的被改变，渲染的也更快，这样页面可以快速更新，表现的更加流畅。不要为太多元素声明，会加重浏览器负担，变化完成后可以用js移除掉css，浏览器兼容性较差，建议不使用

例如will-change: transform, opacity;

15､避免图中的长按弹出菜单与选中文本的行为、禁止选中文本

a,img{ -webkit-touch-callout:none; }

html,body{ -webkit-user-select:none;user-select:none; }

优质内容筛选与推荐>>
1、HTML5教程:2.2 新增的元素和废除的元素
2、Django基础四之模板系统
3、【1414软工助教】团队作业10——复审与事后分析（Beta版本） 得分榜
4、UVA 11297 线段树套线段树(二维线段树)
5、CSDN网站被黑

赞赏

长按二维码向我转账

受苹果公司新规定影响，微信 iOS 版的赞赏功能被关闭，可通过二维码转账支持公众号。

阅读

已发送

发送中