总结碰到的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;