css 小小tips

1，子元素为float时，父元素必须有固定的宽高，否则float子元素位置会跑偏，触发一系列问题。需注意。

2，position：absolute定位在overflow：hidden元素中。如果绝对定位的元素的 第一个、非static定位的祖先元素，同时也是overflow：hidden元素的祖先元素的情况下 绝对定位元素不会被隐藏。反之超出部分会被隐藏

3，padding-bottom：20%；可以实现div长宽比5：1，从而实现等比缩放 利用padding-bottom实现自适应等比缩放

1，链接直接跳转到outlook写邮件：<a href="mailto:[e-mail]"><em>[e-mail]</em></a>

2，table可以设置margin，而不能设置padding；单元格td可以设置padding而不能设置margin，涉及margin padding不要用表格

4，背景透明度兼容background:#333; opacity:0.3;filter:alpha(opacity:40);

5，图片3px误差：设置为块元素 并设置父div font-size：0；

6，

7，文字两边对齐：

.test1 {

                text-align:justify;

                text-justify:distribute-all-lines;/*ie6-8*/

                text-align-last:justify;/*ie9*/

               -moz-text-align-last:justify;/*ff*/

               -webkit-text-align-last:justify;/*chrome 20+*/

            }

            @media screen and(-webkit-min-device-pixel-ratio:0){/* chrome*/

                .test1:after{

                    content:".";

                    display: inline-block;

                    width:100%;

                    overflow:hidden;

                    height:0;

                }

            }

注：html中文字中间要有空格，chrome浏览器才有效果。

8，标题左边图片

<link rel="shortcut icon"href="__PUBLIC__/img/bitbug_favicon.ico" type="image/ico"/>

Ico图片制作网址http://www.bitbug.net/

9，添加微博动态http://app.weibo.com/tool/weiboshow

10，js变量转换为字符串<img src=“ ’ +ba1+ ’ ”>

11，

如果您希望把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[href][title] {color:red;}

12，div[data-line]:after { content: attr(data-line);

attr属性通常和自定义属性data-配合使用，因为传统的其它属性虽然也能存值，但通常不适合存放表达性文字。

div[data-line]:after { content: "[line " attr(data-line) "]"; }

还需要用JavaScript里拼装字符串吗？CSS3里就能完成这些，是不是感觉CSS3可以部分的替代Javascript了！ attr的动态生成页面内容的能力着实是一件让人兴奋的事情。你实际上可以用它配合content对页面的很多其他元素和属性进行操作。

13,js控制css样式如果需要设置!important时，是不起作用的，解决方案：element.setAttribute('style', 'display:inline !important');或者element.style.cssText = 'display:inline !important';重写才可

PS：文本属性：

1，字数超过范围换为点点 overflow:hidden;white-space:nowrap;text-overflow:ellipsis;

2，强制换行word-break: break-all; word-wrap:break-word;

3，文字间距设置letter-spacing，首行缩进text-indent

4，background-size的cover特定值会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。contain属性会将图像放至最大尺寸，使之完全适合内容区域。

5,渐变色：background: -webkit-gradient(linear, 0 0, 100% 100%, from(#1d1b1f), to(#2f2d32));

6,input 输入框输入小写变大写：text-transform:uppercase;

垂直居中：

方法一 利用 line-height 实现垂直居中

#example1 {    height: 100px;    line-height: 100px;    background: #161616;    color: #fff;    width: 200px;}<div id="example1">    单行文字垂直居中</div>

这种方法适用于单行文本垂直居中,如果文本内容太长，出现了换行，换行后的内容会溢出。

方法二 利用 display: table 实现垂直居中

#example2 {    height: 100px;    background: #161616;    color: #fff;    width: 400px;    overflow: hidden;    display: table;}#example2 .inner{    display: table-cell;    vertical-align: middle;    height: 50px;    background:#999;}<div id="example2">    <div class="inner">块区域垂直居中</div></div>

方法三 margin 填充

#example3 {    height: 100px;    background: #161616;    color: #fff;    width: 400px;    overflow: hidden;}#example3 .inner{    margin-left: auto;    margin-right: auto;    margin-top: calc((100px - 50px)/2);    height: 50px;    background:#999;}<div id="example3">    <div class="inner">块区域垂直居中</div></div>

这种方法需要知道内外容器的大小

方法四 经典 absolute 布局上下文垂直居中

#example4 {    width: 400px;    height: 100px;    background: #161616;    color: #fff;    position: relative;}#example4 .inner{    height: 50px;    width: 200px;    position: absolute;    left: 50%;    top: 50%;    margin-top: -25px;    margin-left: -100px;    background:#999;}<div id="example4">    <div class="inner">块区域垂直居中</div></div>

这种方法内部容器的宽高，外部容器的宽高可以不定

方法五 Css3下 absolute 布局上下文垂直居中

#example5 {    width: 400px;    height: 100px;    background: #161616;    color: #fff;    position: relative;}#example5 .inner{    position: absolute;    left: 50%;    top: 50%;    background: #999;    transform: translateX(-50%) translateY(-50%);}<div id="example5">    <div class="inner">块区域垂直居中</div></div>

这种方法内外容器都可以是不定的

方法六 利用margin：auto 居中

#expample6 {    width: 400px;    height: 100px;    background: #eee;    position: relative;}#expample6 .inner {    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    margin: auto;    height: 50px;    width: 70%;    background: #aaa;    color:#222;}<div id="expample6">    <div class="inner">Content here</div></div>

方法七 利用 Flex布局 居中

#expample7 {    width: 400px;    height: 100px;    background: #eee;    display: flex;    justify-content: center;    align-items: center;}#expample7 .inner {    height: 50px;    width: 70%;    background: #aaa;    color:#222;}<div id="expample7">    <div class="inner">Content here</div></div>