ducky_L

导航

随笔分类 -  CSS

css 渲染优化的方式
摘要:1、加载性能优化:css压缩、css单一样式、减少使用 @import, 而建议使用link; 2、 选择器性能优化: 避免使用通配规则 * 尽量少的去对标签进行选择,而是用class 不要去用标签限定ID或者类选择符:ul#nav,应该简化为#nav 尽量少的去使用后代选择器,降低选择器的权重值 阅读全文

posted @ 2023-04-24 11:40 ducky_L 阅读(51) 评论(0) 推荐(0)

css 移动端1px问题及解决
摘要:1、问题原因:移动设备推出一个设备像素⽐:dpr=window.devicePixelRatio,也就是设备的物理像素与逻辑像素的⽐值。在retina屏的⼿机上, dpr为2或3,css⾥写的1px宽度映射到物理像素上就有2px或3px宽度。 2、解决方法:border-image实现、backgr 阅读全文

posted @ 2023-04-24 10:25 ducky_L 阅读(131) 评论(0) 推荐(0)

css 两种盒模型(box-sizing)的区别
摘要:区别:总宽度的计算公式不一样 1、content-box:标准盒模型:实际宽度=width+pading+border 2、border-box: 怪异(IE盒)模型:实际宽度=width 阅读全文

posted @ 2023-04-11 15:45 ducky_L 阅读(100) 评论(0) 推荐(0)

CSS 实现垂直居中的5种方法
摘要:方法1:使用绝对定位和负外边距对块级元素进行垂直居中 优点:兼容不错。缺点:必须提前知道被居中块级元素的尺寸 .father { width: 300px; height: 300px; background-color: red; position: relative; margin-bottom 阅读全文

posted @ 2023-04-11 15:25 ducky_L 阅读(134) 评论(0) 推荐(0)

css 清楚浮动的4种办法
摘要:1、浮动:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样 2、我们使用position:fixed,absolute和float都会造成浮动效果。 3、clear 属性的值可以是 lef 阅读全文

posted @ 2023-04-11 11:40 ducky_L 阅读(105) 评论(0) 推荐(0)

css 实现三栏布局(圣杯布局)的5种方法
摘要:效果图: 1、浮动:设置float: left;,配合负margin来实现 .left { float: left; width: 100px; height: 200px; background-color: red; } .right { float: right; width: 100px; 阅读全文

posted @ 2023-04-11 11:26 ducky_L 阅读(190) 评论(0) 推荐(0)

css 实现单行、多行溢出 省略号显示
摘要:1、单行溢出显示省略号: { white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} 2、多行溢出省略号: ①、(缺点:此方法因为使用了webkit属性,故只能chrome等浏览器有效) { -webkit-line-clamp: 阅读全文

posted @ 2023-04-11 11:16 ducky_L 阅读(365) 评论(0) 推荐(0)

CSS 颜色定义
摘要:CSS颜色定义方法:(RGBA \ HSLA \ opacity \ transparent为css3 新特性) 1、直接使用颜色名/16进制值 2、使用RGBA: RGB代表光的三原色,Red、Green和Blue,CSS3中可以增加一个值a(alpha),表示颜色的透明度:取值范围0-1之间,0 阅读全文

posted @ 2023-04-11 11:08 ducky_L 阅读(76) 评论(0) 推荐(0)

CSS选择器汇总
摘要:①基本选择器:* 、 E、 .info、 E.info、#info、E#info ②组合选择器:E,F(多元素选择器)、E F(后代选择器)、E>F(子元素选择器)、E+F(毗邻元素选择器)、E~F(匹配E之后的同级所有F元素) ③属性选择器:E[att]、E[att=val]、E[att~=val 阅读全文

posted @ 2021-03-31 14:53 ducky_L 阅读(16) 评论(0) 推荐(0)