随笔分类 -  css

-webkit-line-clamp 设置行数限制
摘要：设定文字最多现实两行，超出后... display: -webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow，可以用来多行文本的情况下，用省略号“...”隐 阅读全文
posted @ 2023-06-07 14:45 模糊的星空 阅读(147) 评论(0) 推荐(0)
font-size: 0;解决元素间的空白间隙
摘要：看别人的代码看到过font-size:0这个设置，不明白为何这样操作，后来研究一下才明白：这是像素级还原设计稿很有用的设置，因为元素节点有文本节点，在缩进代码时会占据宽度，这么说不好理解，演示如下： 理论上box下面的三个div都是30px，刚好在一行显示，但是实际效果是这样： 这就是上文说到的原因 阅读全文
posted @ 2018-09-21 14:21 模糊的星空 阅读(373) 评论(0) 推荐(0)
水平居中和transform: translateY(-50%) 实现元素垂直居中效果
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中</title> <style> * { margin: 0; padding: 0; } .center { width: 960px; height 阅读全文
posted @ 2017-07-24 09:52 模糊的星空 阅读(5849) 评论(0) 推荐(0)
/ ./ ../ 的区别
摘要：/ 根目录 （绝对路径） ./ 当前目录 ../父级目录 （相对路径） 阅读全文
posted @ 2017-06-20 17:54 模糊的星空 阅读(788) 评论(0) 推荐(0)
深入理解 CSS变形 transform(3d)
摘要：坐标轴 在了解透视之前，首先要先了解坐标轴。3D变形与2D变形最大的不同就在于其参考的坐标轴不同。2D变形的坐标轴是平面的，只存在x轴和y轴，而3D变形的坐标轴则是x、y、z三条轴组成的立体空间，x轴正向、y轴正向、z轴正向分别朝向右、下和屏幕外 perspective-origin 值: x轴 y 阅读全文
posted @ 2016-10-23 13:07 模糊的星空 阅读(737) 评论(0) 推荐(0)
一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
摘要：在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 代码加 <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <meta htt 阅读全文
posted @ 2016-08-03 18:16 模糊的星空 阅读(232) 评论(0) 推荐(0)
浏览器的兼容性
摘要：常见的bug; 1应该记住的一些浏览器css写法 2图片默认有间距 3标签最低高度设置min-height不兼容 4子标签不撑开父的高度 5谷歌浏览器支持小于12px的字体 6 opacity 定义元素的不透明度 浏览器兼容问题一 （100%遇到） 不同浏览器的标签默认的外补丁和内补丁不同 解决方案 阅读全文
posted @ 2016-08-03 18:00 模糊的星空 阅读(203) 评论(0) 推荐(0)