![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css问题锦囊
文章平均质量分 87
muzidigbig
凡事第一反应,找方法,而不是找借口;发现问题,反思,而不是急着辩解。
展开
-
String.prototype.replaceAll 兼容性问题
如图,replaceAll() 报错了,查看了下当前的版本,发现Chrome版本太低,故判定原因为低版本浏览器不支持字符串的replaceAll();原创 2023-04-24 22:49:26 · 837 阅读 · 0 评论 -
说说em/px/%/rem/vh/vw/vm的区别?
背景介绍我们为什么要选择合适的网页设计单位随着Web的发展,对新的解决方案的需求也会继续增大,对网页的要求更高。网页设计单位是涉及到我们布局的效果,使用不同的单位会对最终的demo,会有影响。现在都是要求响应式设计,需要适配各种设备,电脑,手机,平板。如果单位不合适,可能在这个设备显示良好,那个设备就会打乱布局。所以需要我们选择合适的单位来进行开发,设计。一、介绍传统的项目开发中,我们只会用到px、%、em这几个单位,它可以适用于大部分的项目开发,且拥有比较良好的兼容性从CSS3开始原创 2021-04-02 11:51:50 · 804 阅读 · 0 评论 -
手机端解决2倍图3倍图自适应
1.第一种方法 通过 css 的 DevicePixelRatio 媒体查询属性:/*默认大小*/.photo {background-image: url(image100.png);}/* 如果设备像素大于等于2,则用2倍图 */@media screen and (-webkit-min-device-pixel-ratio: 2),screen and (min--moz-device-pixel-ratio: 2) { .photo { background-image:原创 2020-09-09 15:58:55 · 1855 阅读 · 0 评论 -
浮动出现问题解决办法
float 是css 的定位属性。在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分(半脱离文档流)。这与使用绝对定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了(完全脱离文档流),就像印刷布局里面的文本框被设置为无视页面环绕一样。绝对定位的元素不会影响其它元素,其它元素也不会影响它,无论它是否和其...原创 2018-05-22 23:15:28 · 974 阅读 · 0 评论 -
input选择输入历史后样式改变
一、修改选择背景色 **chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:方式一 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-auto...原创 2019-12-03 14:53:55 · 4466 阅读 · 1 评论 -
:target的伪类的用法
:target当我们点击链接(<a>)时,对应id的元素显示在当前页面。position:absolute;让大图进行叠加z-index;的值的大小哪个显示在第一个/点击锚点之后哪个显示案例: <ul class="target_a"> <li> <a href="#target01"&g...原创 2019-09-30 18:23:32 · 1213 阅读 · 0 评论 -
自定义input file文件上传的默认样式
Web页面中,在需要上传文件时基本都会用到<inputtype="file">元素,它的默认样式:chrome下:给input加上 style="border: 1px solid red;"如左图所示的样式IE下:不管是上面哪种,样式都比较简单,和很多网页的风格都不太协调。根据用户的需求,设计风格,改变其显示样式的场合就比较多了。如果,要像下面一样做一个...原创 2018-06-01 19:04:46 · 5368 阅读 · 0 评论 -
清除记住密码后input的背景色
input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: #ededed !important; -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; ...原创 2019-08-30 16:47:17 · 509 阅读 · 0 评论 -
css做一些简单的计算
用 counter-reset,结合counter-increment和content,可以做一些简单的计算。counter-reset属性创建或重置一个或多个计数器。counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。counter()插入计数器。只能被使用在content属性上。如果想重复多次计数器可以使用 counters()...原创 2019-06-04 07:51:11 · 446 阅读 · 0 评论 -
如何设置select和option的文字居中(通过padding将宽度撑开而不是设置width)
一、设置select和option的文字居中今天在设置option文字居中时发现,给select设置text-align:center在火狐浏览器下ok,但是在chrome浏览器无效,然后option在两个浏览器下设置text-align:center都是无效的,解决方法,设置样式如下select{ width: auto; padding: 0 2%;...原创 2019-03-11 17:13:58 · 4349 阅读 · 0 评论 -
解决position: fixed;弹框的中input自定义表单1px border看起来模糊问题
出现的问题:我们想要的效果:结构:<body> 咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩 <div class="box"> <div class="box_bg"></div> <div class="box_bubble"> <h2...原创 2019-03-19 17:51:34 · 1114 阅读 · 0 评论 -
css中word-break、word-wrap和white-space的区别
https://baijiahao.baidu.com/s?id=1578623236521030997&wfr=spider&for=pc总结:1.white-space主要是用来处理元素内文本的空白符、换行符以及是否允许折行。 注:CJK指的是中文、日文、韩文三国文字的缩写(应该包含多种亚洲文字)2.word-wrap用来标明是否允许浏览器在整句内进行断句...转载 2019-03-09 10:53:42 · 327 阅读 · 0 评论 -
css常用的问题/兼容性
常见的兼容性问题:1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同解决方案: css 里增加通配符 * { margin: 0; padding: 0; }2、IE6双边距问题;在 IE6中设置了float , 同时又设置margin , 就会出现边距问题解决方案:设置display:inline;3、当标签的高度设置小于10px,在IE6、IE...原创 2019-03-08 15:59:10 · 199 阅读 · 0 评论 -
文本在盒子中水平、垂直居中(图片与文本居中)、多行文本垂直居中、盒子居中
在样式布局中,我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单:对文本,只需要对其父级元素设置text-align: center;,而对div等块级元素,只需要设置其left和right的margin值为auto。要实现元素的垂直居中,有人会想到css中的vertical-align属性,但是它只对拥有valign特性的元素才生效,例如表格元素中的<td>、<t...原创 2018-05-23 10:37:12 · 34056 阅读 · 2 评论 -
input时间表单默认样式修改(input[type="date"])
一、时间选择的种类:HTML代码:选择日期:<input type="date" value="2018-11-15" />选择时间:<input type="time" value="22:52" />选择星期:<input type="week" />选择月份:<input type=原创 2018-11-15 13:12:42 · 62393 阅读 · 2 评论