css 常用技巧

css图片文字水平垂距中

父级标签属性：display:table-cell;vertical-align:middle;距中标签元素：vertical-align:middle;display: inline-block;

文字不换行与超出时显示省略标记(…)

• 一般的文字截断(适用于内联与块)：

.text-overflow{display:block;                     /*内联对象需加*/width:31em;word-break:keep-all;           /* 不换行 */white-space:nowrap;          /* 不换行 */overflow:hidden;               /* 内容超出宽度时隐藏超出部分的内容 */text-overflow:ellipsis;         /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/}

• 对于表格，定义有点不一样：

table{width:30em;table-layout:fixed;                 /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */}td{width:100%;word-break:keep-all;             /* 不换行 */white-space:nowrap;            /* 不换行 */overflow:hidden;                  /* 内容超出宽度时隐藏超出部分的内容 */text-overflow:ellipsis;            /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/}

ie不支持html5标签的解决方案

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]>      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    <![endif]-->

article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

css 初始化

html { font-family:"微软雅黑";} body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input,figure { margin: 0; padding: 0; }body { -webkit-overflow-scrolling: touch; text-align:left;  max-height: 100%; }a, a:hover { text-decoration: none; outline: none;  }li { list-style: none }img { border: none; max-width:100%; }input, select, textarea { border: none; outline: none; background: none }em,i { font-style: normal }h1, h2, h3, h4, h5, h6 { font-weight: normal }.jz{ width:1200px; margin:0 auto;}.clearfix{*zoom:1;}.clearfix::after{ clear: both; display: block; height: 0; content: ''; visibility: hidden;}