如何改变文本提示内容样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ::-webkit-input-placeholder { /* WebKit browsers */ color:red; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:red; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color:red; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color:red; } </style> </head> <body> <input type="text" placeholder="请输入你的姓名"/> </body> </html>
|
div盒子水平垂直居中的方法
这个问题比较老,方法比较多,各有优劣,着情使用。
一、盒子没有固定的宽和高
这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%) 必须加上
top: 50%; left: 50%;
优点:
- 内容可变高度
- 代码量少
缺点:
IE8不支持
属性需要写浏览器厂商前缀
可能干扰其他transform效果
某些情形下会出现文本或元素边界渲染模糊的现象
1
| <div class="wrapper">我不知道我的宽度和高是多少,我要实现水平垂直居中。</div>
|
1 2 3 4 5 6 7 8 9 10 11 12
| .wrapper { padding: 20px; background: orange; color: #fff; position: absolute; top: 50%; left: 50%; border-radius: 5px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
|
方案2、在父级元素上面加上上面3句话,就可以实现子元素水平垂直居中。
1 2 3
| <div class="wrapper"> 我不知道我的宽度和高是多少,我要实现水平垂直居中。 </div>
|
1 2 3 4 5 6 7 8 9 10
| .wrapper { width: 500px; height: 300px; background: orange; color: #fff; justify-content: center; align-items: center; display: -webkit-flex; }
|
二、盒子有固定的宽和高
方案1、margin 负间距
此方案代码关键点:
1.必需知道该div的宽度和高度,
2.然后设置位置为绝对位置,
3.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,
4.最后将该div分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半。
1
| <div class="wrapper">我知道我的宽度和高是多少,我要实现水平垂直居中。</div>
|
1 2 3 4 5 6 7 8 9 10 11 12
| .wrapper { width: 400px; height: 18px; padding: 20px; background: orange; color: #fff; position: absolute; top:50%; left:50%; margin-top: -9px; margin-left: -200px; }
|
方案2、margin:auto实现绝对定位元素的居中(该方法兼容ie8以上浏览器)
此方案代码关键点:
1、上下左右均0位置定位;
2、margin: auto;
1
| <div class="wrapper">我不知道我的宽度和高是多少,我要实现水平垂直居中。</div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| .wrapper { width: 400px; height: 18px; padding:20px; background: orange; color: #fff;
position: absolute; left:0; right:0; top: 0; bottom: 0; margin: auto; }
|
移动端呼叫电话号码的一个技巧
1
| <a href="tel:18816798025">点击呼叫18816798025</a>
|
css更改复选框 背景颜色
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| .close .content .all[type=checkbox]{ -webkit-appearance:none ; background: url(../img/shopping/radio_nor.png); background-size: cover; background-repeat: no-repeat; outline: none; } .close .content .all[type=checkbox]:checked{ -webkit-appearance:none ; outline: none; background: url(../img/shopping/radio_hig.png); background-size: cover; background-repeat: no-repeat; }
|
1
| caret-color: red; // 只需要在input对应样式上加个属性就可以了
|
CSS控制文字,超出部分显示省略号
1 2 3 4 5
| overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
display: inline-block; // 在flex里省略失效 加上这句代码
|
css实现禁止页面横竖向滚动
1
| overflow-x:hidden;overflow-y:hidden;
|
1 2 3 4 5 6 7
| text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
|
css小字和大字怎么底对齐
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css小字和大字怎么底对齐?</title> <style> .flex{ display: flex; align-items:baseline } .big-sign{ font-size:50px; } </style> </head> <body> <span class="flex"> <span class="big-sign">你好</span> <span>你好</span> </span> </body> </html>
|
css border边距 在盒子内部呈现,不占用外部Px
1 2
| box-sizing: border-box; border: solid 1px white;
|