码迷,mamicode.com
首页 > Web开发 > 详细

CSS段落

时间:2017-03-27 14:15:40      阅读:945      评论:0      收藏:0      [点我收藏+]

标签:display   otto   stat   com   tween   曲线   实现图   tran   hbuilder   

常用小知识点

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: 中文释义降低。就好像依次设置了nonecontain, 最终呈现的是尺寸比较小的那个。

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" /></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;/*实现IE下可读效果*/

     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段落

标签:display   otto   stat   com   tween   曲线   实现图   tran   hbuilder   

原文地址:http://www.cnblogs.com/web-dev-engineer/p/6626449.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!