常用但记不住的css

作者 江辉 日期 2017-07-13
css
常用但记不住的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 */
}
FEATURED TAGS
css