css知识梳理

总结碰到的css样式问题，持续更新

问题汇总

小程序空格解决文字分散对齐

• 中文全角空格 == 一个中文

去除chorm浏览器默认的input黄色背景样式

• 使用transition属性，是input的黄色背景颜色无限延迟显示

input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-transition-delay: 99999s;
            -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
        }

input标签字体靠右对齐

• 字体靠右 在获得焦点时希望光标可以在字体的右边

<input type="text" style="text-align:right" value="1234566" onclick="this.selectionStart = this.selectionEnd = this.value.length;" />

placeholder样式的设置

• 在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果

::-webkit-input-placeholder{}    /* 使用webkit内核的浏览器 */
:-moz-placeholder{}                  /* Firefox版本4-18 */
::-moz-placeholder{}                  /* Firefox版本19+ */
:-ms-input-placeholder{}           /* IE浏览器 */
注1：冒号前写对应的input或textarea元素等。
注2：placeholder属性是css3中新增加的属性，IE9和Opera12以下版本的CSS选择器均不支持占位文本。

让块级元素和行内块级元素里的超范围文本显示为…

• 行内元素直接使用text-overflow：ellipsis；即可

    overflow: hidden; // 隐藏超出的文本
    text-overflow:ellipsis; // 将被剪切的文本替换为...
    white-space:nowrap; // 防止超出的内容换行

父元素透明度对子元素的影响

• opacity是继承属性，在父元素上设置opacity，子元素会自动继承父元素的opacity且无法被覆盖。这一特性可能造成意料之外的后果

用rgba代替opacity对元素设置透明度，可以避免这一问题。

父元素透明度对子元素的影响

• opacity是继承属性，在父元素上设置opacity，子元素会自动继承父元素的opacity且无法被覆盖。这一特性可能造成意料之外的后果

用rgba代替opacity对元素设置透明度，可以避免这一问题。

如何使文本两端对齐

• 使用text-align文本两端对齐可能遇到的问题
• text-align: justify;可以让一行文字两端对齐显示，但是文本内容要超过一行才能正常的两端对齐

p{
    margin: 0;
    text-align: justify;
    /* chorme下的文本两端对齐 */
    text-align-last: justify;
    /* ie下的文本两端对齐  */
    text-justify:inter-ideograph;
}
<p>This is some text in a paragraph.</p>

• 单行文本两端对齐

/* 使用after伪类或者另外用新的标签是文本强制变成两行行*/
p:after{
    content: " ";
    display: inline-block;
    width: 100%;
}
p>i{
    display:inline-block;
    /*padding-left: 100%;也可以*/
    width:100%;
}
<p>This is some text in a paragraph.</p>

父元素透明度对子元素的影响

• 使用translate使标签垂直或水平居中对齐

div{//水平居中
    position:absolute;
    left: 50%
    transform:translateX(-50%);
}
div{//垂直居中
    position:absolute;
    top: 50%;
    transform:translateY(-50%);
}
<div>Hello World</div>

checkbox\radio通过点字也能选中或不选中

• 常常会有场景需要用到checkbox，默认的checkbox只有点击框才能选中，但好的用户体验点击框后的文字也要能选中，这时候可以套一个label来解决

<label><input type='checkbox'/>是/否</label>

css将彩色图片变黑白图片

• css将彩色图片变黑白图片

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;

ie默认以11展示

• 这是一个文档兼容模式的定义。主要用于加强代码对IE的兼容性，强制IE使用当前本地最新版标准模式渲染或者用chrome内核渲染。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">   

css 字间距、CSS字体间距、css 字符间距

• css 字间距，使用css来控制字与字之间距离，也叫css字间距方法。

//设置第一行第一个字和左侧相距
text-indent设置抬头距离css缩进
text-indent : 20px; 

//设置字与字间距_字符间距离
letter-spacing来设置字与字间距_字符间距离，字体间距css样式
letter-spacing:8px;