首页 > 代码库 > CSS段落
CSS段落
常用小知识点
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="http://www.mamicode.com/img/HBuilder.png" /></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; }
CSS段落