摘要:1、加载性能优化:css压缩、css单一样式、减少使用 @import, 而建议使用link; 2、 选择器性能优化: 避免使用通配规则 * 尽量少的去对标签进行选择,而是用class 不要去用标签限定ID或者类选择符:ul#nav,应该简化为#nav 尽量少的去使用后代选择器,降低选择器的权重值
阅读全文
摘要:1、问题原因:移动设备推出一个设备像素⽐:dpr=window.devicePixelRatio,也就是设备的物理像素与逻辑像素的⽐值。在retina屏的⼿机上, dpr为2或3,css⾥写的1px宽度映射到物理像素上就有2px或3px宽度。 2、解决方法:border-image实现、backgr
阅读全文
摘要:区别:总宽度的计算公式不一样 1、content-box:标准盒模型:实际宽度=width+pading+border 2、border-box: 怪异(IE盒)模型:实际宽度=width
阅读全文
摘要:方法1:使用绝对定位和负外边距对块级元素进行垂直居中 优点:兼容不错。缺点:必须提前知道被居中块级元素的尺寸 .father { width: 300px; height: 300px; background-color: red; position: relative; margin-bottom
阅读全文
摘要:1、浮动:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样 2、我们使用position:fixed,absolute和float都会造成浮动效果。 3、clear 属性的值可以是 lef
阅读全文
摘要:效果图: 1、浮动:设置float: left;,配合负margin来实现 .left { float: left; width: 100px; height: 200px; background-color: red; } .right { float: right; width: 100px;
阅读全文
摘要:1、单行溢出显示省略号: { white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} 2、多行溢出省略号: ①、(缺点:此方法因为使用了webkit属性,故只能chrome等浏览器有效) { -webkit-line-clamp:
阅读全文
摘要:CSS颜色定义方法:(RGBA \ HSLA \ opacity \ transparent为css3 新特性) 1、直接使用颜色名/16进制值 2、使用RGBA: RGB代表光的三原色,Red、Green和Blue,CSS3中可以增加一个值a(alpha),表示颜色的透明度:取值范围0-1之间,0
阅读全文
摘要:①基本选择器:* 、 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
阅读全文