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

点击右上角即可分享
微信分享提示