随笔分类 -  CSS

有关CSS
css/js使用小技巧记录
摘要：1、透明底小图标换色 .iconBox { position: relative; width: 19px; height: 19px; overflow: hidden; // 隐藏原本颜色的图片 .icon { position: absolute; left: -100%; width: 19 阅读全文
posted @ 2023-02-22 15:16 桃李子 阅读(63) 评论(0) 推荐(0)
a标签做锚点定位，有部分内容被置顶头部遮挡的解决方法
摘要：被遮挡的元素添加如下样式： /**这里假定头部高度是100px*/ position: relative;top: 100px;/**关键样式如下，我这里上面有加定位，如果没用定位，下面的数值需根据实际情况调整*/padding-top: 100px; // 200px margin-top: -1 阅读全文
posted @ 2022-06-10 15:17 桃李子 阅读(368) 评论(0) 推荐(0)
react实现转盘动画
摘要：转盘动画方法如下： /** * 点击转动转盘 */ const turnCircle = () => { let runDeg = +(Math.random() * 360).toFixed(0) + 2160; // 先转6圈，最后再转随机的0-1圈 const table = document 阅读全文
posted @ 2022-06-10 14:58 桃李子 阅读(280) 评论(0) 推荐(0)
获取元素宽高的方法
摘要：1.获取内联样式：element.style.width/height；--‘100px’ 2.获取实时样式：window.getComputerStyle(ele).width/height; --'100px' 3.IE9以下获取实时样式：element.currentStyle.width/h 阅读全文
posted @ 2022-04-22 15:59 桃李子 阅读(122) 评论(0) 推荐(0)
css 文字只显示两行
摘要：text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; /*! autoprefixer: off */ -webkit-box-orient: vertical; /*! aut 阅读全文
posted @ 2021-09-30 17:15 桃李子 阅读(739) 评论(0) 推荐(0)
link和@import的区别
摘要：1.link是HTML标签，@import是CSS提供的方式； 2.页面加载时，link同时被加载，@import则会等页面加载完再加载； 3.@import是CSS2.1提供的方法，老版本不支持，只在IE5以上识别，而link因为是HTML标签，不会有兼容问题； 4.link的权重高于@impor 阅读全文
posted @ 2021-05-18 15:40 桃李子 阅读(192) 评论(0) 推荐(0)
BFC--CSS
摘要：1.BFC既“块级格式化上下文”，是一块独立的布局环境，保护内部元素不受外部影响，也不会影响外部，是CSS的一种布局方式。 2.有什么特性？ （1）BFC内部的盒子会在垂直方向上一个接一个的放置； （2）垂直方向上的距离由margin决定（常规情况大小选大）； （3）BFC的区域不会与浮动的元素区域 阅读全文
posted @ 2021-05-18 15:28 桃李子 阅读(70) 评论(0) 推荐(0)
CSS(CSS3)笔记
摘要：1.CSS规则 由两个主要部分构成：选择器以及一条或多条声明。 2.选择器 1）分类： 基础选择器、复合选择器。 2）基础选择器：标签选择器、类选择器、id选择器、通配选择器。 3）复合选择器 1 后代选择器：父 子（包含在父里面所有符合的子元素） 2 子代选择器：父>子（最近一级元素亲儿子，不包含 阅读全文
posted @ 2020-08-07 14:23 桃李子 阅读(286) 评论(0) 推荐(0)
CSS选择器优先级
摘要：!important > 行内样式 > id > class > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 阅读全文
posted @ 2020-07-18 16:25 桃李子 阅读(115) 评论(0) 推荐(0)
三栏布局：左右固定中间自适应
摘要：<div class="left">left</div> <div class="right">right</div> <div class="main">main</div> 1.position: absolute方式 *{ margin: 0; padding: 0; } .left,.rig 阅读全文
posted @ 2020-07-15 15:45 桃李子 阅读(115) 评论(0) 推荐(0)
两栏布局：左侧固定右侧自适应
摘要：1.position: absolute方法 .left{ position: absolute; background-color:green; width: 200px; top: 0; left: 0; min-height: 500px; } .right{ background-color 阅读全文
posted @ 2020-07-15 15:38 桃李子 阅读(141) 评论(0) 推荐(0)
CSS水平垂直居中方式
摘要：1.grid布局实现（一） .father{ display:grid; align-item:center; justify-items:center; } 2.grid布局实现（二） .father{ display:grid; align-item:center; justify-conten 阅读全文
posted @ 2020-07-10 11:48 桃李子 阅读(66) 评论(0) 推荐(0)
CSS9种水平居中方式
摘要：1.通过margin:0 auto实现CSS水平居中* .father{ 必须指定宽高 } .son{ margin:0 auto; text-align:center; } 2.通过display:flex实现CSS水平居中 .father{ display:flex; flex-driectio 阅读全文
posted @ 2020-07-10 11:23 桃李子 阅读(512) 评论(0) 推荐(0)
CSS8种垂直居中方式
摘要：1.通过vertical-align:middle实现垂直居中 .son{ display:inline-block; vertical-align:middle; } 2.通过display:flex实现垂直居中 .father{ display:flex; } .son{ align-self: 阅读全文
posted @ 2020-07-10 10:51 桃李子 阅读(1357) 评论(0) 推荐(0)