常用但记不住的css

作者 江辉 日期 2017-07-13
常用但记不住的css

常用但记不住的css 样式

我在日常工作中,经常会用到一些 css 样式(譬如:超出长度后加省略号、圆角样式等),然后这些样式自己有记不住。本文做一些梳理,方便自己和别人使用。

一、省略号

省略号样式一般需要定义宽度,table 一般要 fixed

li{-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 300px;}

二、阴影

div{
box-shadow:2px 3px 4px #333333;
-moz-box-shadow:2px 3px 4px #333333;
-webkit-box-shadow:2px 3px 4px #333333;
}

2px 表示水平移动,3px 表示垂直移动,4px 表示 模糊半径,#333333 表述阴影颜色

三、 font 字体

按顺序设置如下属性:

  • font-style
  • font-weight
  • font-size/line-height
  • font-family
h1 {font:12px/20px arial,sans-serif;} /*一般用的比较多*/
h2 {font:italic bold 12px/20px arial,sans-serif;}

四、 background 背景

div {background: url(/static/images/banner1.png) no-repeat center top;} /*图片居中显示,不会因宽度变小而变小*/
background-size: length|percentage|cover|contain;

background-size:cover;
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。


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

五、字体内容垂直居中

这个方法使用绝对定位的 div,把它的 top 设置为 50%,top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。

因为有固定高度,或许你想给 content 指定 overflow:auto,这样如果 content 太多的话,就会出现滚动条,以免content 溢出。

<div class="content"> Content goes here</div>
#content {
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px; /* negative half of the height */
}