随笔分类 -  css相关内容

css3 Transition动画执行时有可能会出现闪烁的bug
摘要：css3 Transition动画执行时有可能会出现闪烁的bug，一般出现在开始的时候或结束的时候。 解决方法如下： webkit backface visibility: hidden; webkit transform style: preserve 3d; 需要应用在动画元素上即可 估计是Ch 阅读全文
posted @ 2018-09-30 15:59 Sarah119 阅读(853) 评论(0) 推荐(0)
全局样式的设置
摘要：全局css样式的设置 阅读全文
posted @ 2018-04-03 11:48 Sarah119 阅读(557) 评论(0) 推荐(0)
Flex 布局教程：实例
摘要：一、骰子的布局 骰子的一面，最多可以放置9个点。 下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。 如果不加说明，本节的HTML模板一律如下。 上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项 阅读全文
posted @ 2018-01-22 16:18 Sarah119 阅读(2) 评论(0) 推荐(0)
CSS单位px、em、rem、vh、vw、vmin、vmax
摘要：px 绝对单位，页面按精确像素展示，像素px是相对于显示器屏幕分辨率而言的。 em 相对单位，基准点为父节点字体的大小，如果自身定义了font size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 rem 相对单位，可理解为”root em”, 相对根节点html的字 阅读全文
posted @ 2018-01-21 22:23 Sarah119 阅读(2) 评论(0) 推荐(0)
display 表格模型值
摘要：display:inline table display:table display:table caption display:table header group disply:table row group display:table row display:table cell dispal 阅读全文
posted @ 2018-01-21 18:58 Sarah119 阅读(225) 评论(0) 推荐(0)
display 的 32 种写法
摘要：从大的分类来讲， display的 32种写法可以分为 6个大类，再加上 1个全局类，一共是 7大类： 外部值 内部值 列表值 属性值 显示值 混合值 全局值 外部值 所谓外部值，就是说这些值只会直接影响一个元素的外部表现，而不影响元素里面的儿子级孙子级元素的表现。 display: block; 阅读全文
posted @ 2018-01-21 15:56 Sarah119 阅读(3) 评论(0) 推荐(0)
icon的使用
摘要：前端 icon 的发展史 早期 最开始的时候，大部分图标都是用 img 来实现的。渐渐发现一个页面的请求资源中图片 img 占了大部分，所以为了优化有了image sprite 就是所谓的雪碧图，就是将多个图片合成一个图片，然后利用 css 的 background position 定位显示不同的 阅读全文
posted @ 2018-01-14 15:48 Sarah119
文本显示，单行超出和多行超出显示省略号
摘要：实现效果如下图所示： 1、单行文本超出 js css 2、多行文本超出 js css 阅读全文
posted @ 2017-11-15 16:29 Sarah119 阅读(290) 评论(0) 推荐(0)
实现CSS样式垂直水平完全居中
摘要：1、水平居中 a、内联元素（inline or inline-*）居中? 你可以让他相对父级块级元素居中对齐 b、块级元素（block level）居中? 你可以通过设置margin-left和margin-right为auto让它居中（同时还要设置width，否则它就会承满整个容器，无法看出居中效 阅读全文
posted @ 2017-03-20 22:20 Sarah119 阅读(234) 评论(0) 推荐(0)