随笔分类 - html/css
摘要::root { --safe-area-inset-top: 0px; --safe-area-inset-right: 0px; --safe-area-inset-bottom: 0px; --safe-area-inset-left: 0px; --safe-area-inset-consta
阅读全文
摘要:html <div class="img-box"> <div class="img"></div> <div class="img-bg"></div> </div> css .img-box { width: 100%; height: 212px; position: relative; .i
阅读全文
摘要:需求 css实现按钮文案垂直水平居中,按钮左侧图标相对文字固定距离展示,效果如图: 实现 方案一:使用 margin-right 来实现按钮和左侧图标的间距 <div class="download-btn"> <div class="btn-content" :class="{'left-icon
阅读全文
摘要:在 CSS 中,`pointer-events: auto;` 和 `pointer-events: all;` 实际上并不存在 `pointer-events: all;` 这个值,因此不用考虑哪个更好。正确的用法是 `pointer-events: auto;`。### `pointer-eve
阅读全文
摘要:如题,给一个按钮写一个 css 心跳收缩动画后,按钮中的文字会上下抖动,解决方案为 will-change: transform; 代码如下: // 按键呼吸特效使用 class="pulse" @keyframes pulse { 0%{ transform: scale(1); } 25%{ t
阅读全文
摘要:<div class="img-box"> <img :src="xxx.png"> <div class="img-bg" :style="{'background-image': `url(`+ xxx.png+ `)`}"></div> </div> .img-box { width: 100
阅读全文
摘要:在 CSS 中,font-weight 属性的默认值是 normal。这通常对应于字体权重的数值 400。 - normal:相当于 400- bold:相当于 700- bolder:比父元素的字体更粗- lighter:比父元素的字体更细- 100 到 900:定义了从最薄 (100) 到最粗
阅读全文
摘要:在移动端开发中,我们通常不希望页面的图片被长安选中可下载,会禁用图片选中事件,这时,css不能使用通配符全局设置 pointer-events:none; 否则会把所有点击事件禁用。 解决方案 img { box-sizing: border-box; -moz-user-select: none;
阅读全文
摘要:如标题,css border不能同时设置圆角和 border-image,当我想要实现既有圆角,并给圆角加 border-image的时候,发现无法同时生效,只有 border-image会生效。 <!DOCTYPE html> <html lang="en"> <head> <meta chars
阅读全文
摘要:filter CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。 mdn 文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter /* URL to SVG filter */ fil
阅读全文
摘要:unset是css的关键字,将一个属性的属性值设置为unset,目的是将一个属性重新重新设置为其从父母那继承的属性值,如果没有继承则是重置成初始值。 它可以应用到所有的css属性上,包括css简写。 转自:https://www.cnblogs.com/Janejxt/p/7490997.html
阅读全文
摘要:flex 布局,上下两个盒子,如果想要让某一个盒子支持滚动条,必须给这个盒子加高度,如果是 auto 则无法滑动。
阅读全文
摘要:如上图,给图片加了 border 后,无论直接给图片加,还是给图片套一个壳子加,都会有一点点不太明显的图片和边框之间的分割线,在手机看尤其明显。 勉强看不出来的解决方案: 给图片外层加 border,给图片的宽高都放大一点点,同时给外层付元素设垂直居中,外层父元素不要写 overflow:hidde
阅读全文
摘要:对于仅指定一个 class 的场景,我们通常会想到使用 :last-child 或者 :only-child 但是亲测发现,这些伪类选择器不是仅在子元素只有一个我们想要筛选的 class 类的时候,才会被选择,而是仅有一个子元素的时候才会被选中,所以,如果我们子元素还有其他非该类的子元素,则不会被认
阅读全文
摘要:在开发的过程中,外层盒子高度不确定的情况下,想要跟内层图片高度保持一致,内层图片高度设为width:100%;height:auto;外层box高度也是width:100%;height:auto.为什么会比图片本身到高度超出去一部分呢?外层box如何可以跟内层不确定高度的图片高度保持一致呢? <!
阅读全文
摘要:实现网站全页面快速置灰,可以使用一个 css 属性,加到 html 标签上,即可快速实现 filter: grayscale(100%); -webkit-filter: grayscale(100%); //兼容chrome和safari -moz-filter: grayscale(100%);
阅读全文
摘要:请说下如下两个form 表单 submit 执行结果 当两个 input 都不输入的时候,请说出分别执行两个 submit,执行结果 url 上参数是什么 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta h
阅读全文
摘要:css选择器选择奇数行或偶数行 实现方式有两种 方式一:nth-child /* 奇数行*/ div:nth-child(odd){ } /* 偶数行 */ div:nth-child(even){ } :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 方式二:
阅读全文
摘要:flex-basis比width 优先级高, 当然前提是flex 的直接子元素, 而且子元素的空间富裕, 子元素的内容, 没有超出的情况下, 同时设置这两个, flex-basis比width 优先级高, 如果不是, width 还是有用的. 自己写宽度或者覆盖已有样式, 用 flex-basis吧
阅读全文
摘要:实现效果如图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Title</title> <style> .contain0 { overflow: hidden; width: 100px; heigh
阅读全文