css问题锦囊
关注
分享
扫一扫
文章平均质量分 89
muzidigbig
凡事第一反应，找方法，而不是找借口；发现问题，反思，而不是急着辩解。
展开
-
transform、animation、transition？
transform它就像一次性地将元素从一个状态改变到另一个状态，没有动画过程transition过渡是一种样式转换到另一种样式时的效果animation是利用@keyframes关键帧完成（元素从开始过程到结束）不需要js技术就可以完成的动画制作通常情况下，transform会与transition或animation结合使用，例如使用transition来实现平滑的旋转效果 ()，或者使用animation来创建更复杂的位移动画。单独使用transform只会改变元素的最终状态，而不会产生动画效果。原创 2024-12-29 17:57:27 · 1355 阅读 · 0 评论 -
String.prototype.replaceAll 兼容性问题
如图，replaceAll() 报错了，查看了下当前的版本，发现Chrome版本太低，故判定原因为低版本浏览器不支持字符串的replaceAll()；原创 2023-04-24 22:49:26 · 1076 阅读 · 0 评论 -
说说em/px/%/rem/vh/vw/vm的区别?
背景介绍我们为什么要选择合适的网页设计单位随着Web的发展，对新的解决方案的需求也会继续增大，对网页的要求更高。网页设计单位是涉及到我们布局的效果，使用不同的单位会对最终的demo，会有影响。现在都是要求响应式设计，需要适配各种设备，电脑，手机，平板。如果单位不合适，可能在这个设备显示良好，那个设备就会打乱布局。所以需要我们选择合适的单位来进行开发，设计。一、介绍传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性从CSS3开始原创 2021-04-02 11:51:50 · 1015 阅读 · 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 · 1948 阅读 · 0 评论 -
浮动出现问题解决办法
float 是css 的定位属性。在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分（半脱离文档流）。这与使用绝对定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了（完全脱离文档流），就像印刷布局里面的文本框被设置为无视页面环绕一样。绝对定位的元素不会影响其它元素，其它元素也不会影响它，无论它是否和其...原创 2018-05-22 23:15:28 · 1152 阅读 · 0 评论 -
input选择输入历史后样式改变
一、修改选择背景色 **chrome表单自动填充后，input文本框的背景会变成偏黄色的，这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：方式一 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-auto...原创 2019-12-03 14:53:55 · 4714 阅读 · 1 评论 -
:target的伪类的用法
:target当我们点击链接(<a>)时，对应id的元素显示在当前页面。position:absolute;让大图进行叠加z-index;的值的大小哪个显示在第一个/点击锚点之后哪个显示案例： <ul class="target_a"> <li> <a href="#target01"&g...原创 2019-09-30 18:23:32 · 1242 阅读 · 0 评论 -
自定义input file文件上传的默认样式
Web页面中，在需要上传文件时基本都会用到<inputtype="file">元素，它的默认样式：chrome下：给input加上 style="border: 1px solid red;"如左图所示的样式IE下：不管是上面哪种，样式都比较简单，和很多网页的风格都不太协调。根据用户的需求，设计风格，改变其显示样式的场合就比较多了。如果，要像下面一样做一个...原创 2018-06-01 19:04:46 · 5435 阅读 · 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 · 528 阅读 · 0 评论 -
css做一些简单的计算
用 counter-reset，结合counter-increment和content,可以做一些简单的计算。counter-reset属性创建或重置一个或多个计数器。counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。counter()插入计数器。只能被使用在content属性上。如果想重复多次计数器可以使用 counters()...原创 2019-06-04 07:51:11 · 477 阅读 · 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 · 4464 阅读 · 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 · 1147 阅读 · 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 · 362 阅读 · 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 · 236 阅读 · 0 评论 -
文本在盒子中水平、垂直居中（图片与文本居中）、多行文本垂直居中、盒子居中
在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align: center;，而对div等块级元素，只需要设置其left和right的margin值为auto。要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，例如表格元素中的<td>、<t...原创 2018-05-23 10:37:12 · 36430 阅读 · 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 · 63389 阅读 · 2 评论