css
文章平均质量分 52
1091214370的博客
以前很狂,现在很菜!
展开
-
css初探知识总结
css初探知识总结css(层叠样式表)用来规定HTML文档的呈现形式。 主要记录了自己新接触的属性和之前并没关注的属性。包括:css的长度和vartical。css的长度 css的长度分为绝对长度和相对长度。 1:css支持的绝对长度有五个 in–英寸 / cm–厘米 / mm–毫米 pt–磅(1磅等于1/72英寸) / pc–原创 2016-11-17 15:58:30 · 303 阅读 · 1 评论 -
多行文字超出部分显示省略号,以及打包后失效问题【20190227更新】
单行超出隐藏处理单行文字超出显示省略号的问题很常见div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}浏览器原生支持,但是只能在单行中实现。多行超出隐藏使用-webkit-line-clamp实现。div { overflow: hidden; text-overflow: ...原创 2019-01-28 13:34:17 · 691 阅读 · 0 评论 -
Sticky Footer 让页脚紧贴页面底部
功能效果:当页面内容不超过当前屏幕高度时,页脚在屏幕的底部;当页面内容过多超过当前屏幕高度时,页脚在内容后面。图片效果演示: 当页面内容不超过当前屏幕高度时: 当页面内容过多超过当前屏幕高度时: 代码实现:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>demo</title> <style>原创 2017-02-19 16:05:25 · 802 阅读 · 0 评论 -
css3中的滤镜特效
页面被渲染后再页面中某个局部呈现的一些特殊的视觉效果。 先放一张原图: grayscale滤镜(灰度滤镜)<style> .grayscale { filter: grayscale(50%); -webkit-filter: grayscale(50%); }</style><h3>grayscale(灰度滤镜):</h3><div cla原创 2017-11-23 20:51:03 · 1290 阅读 · 0 评论 -
box-sizing 布局
在CSS中盒模型被分为两种,第一种是W3C的标准模型,第二种是IE怪异盒模型。不同之处在于后者的宽高定义的是可见元素框的尺寸,而不是元素框的内容区尺寸。目前对于浏览器大多数元素都是基于W3C标准的盒模型,但对于表单form中的部分元素还是基于IE的怪异盒模型,如input里的radio、checkbox、button等元素,如果给其设置border和padding它们也只会往元素盒内延伸。 在W3原创 2017-11-22 20:06:23 · 988 阅读 · 1 评论 -
IE8 兼容rgba
关于rgba的内容不介绍了,直接贴代码。background-color: rgba(0,0,0,0.4); filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);segmentfault的连接原创 2017-07-27 08:58:22 · 248 阅读 · 0 评论 -
如何让一个很长的单词在div里自动换行
一个很长的单词:一串连续的没有空格的字母或数字,div默认其为一个很长的单词,不会自动换行。比如:11111111111111111111111111111111111111111111111111111111111111111111111在宽度为100px的div里面会出现溢出, 如何让这个很长的单词自动换行呢?word-wrap:break-word;//让长单词或者URL地址内部换行原创 2017-07-20 10:21:17 · 817 阅读 · 0 评论 -
用css写个三角形
在百度前端学院任务重遇到了这个,之前也接触过,在这里写一下吧。 就是上面这个三角形。 我是这样写的div{width: 0;height: 0;border-top:5px solid #f7ded9;border-left:5px solid #f7ded9;border-right:5px solid #f7ded9;border-bottom:5px solid #5b5b原创 2017-04-02 10:59:24 · 395 阅读 · 0 评论 -
css3新添加的过渡、动画和变换
css3新添加的过渡、动画和变换在这几周的时间,我看完了css部分的相关知识,在这个过程中唯一的感觉就是css并没有我想象的那么简单,它有着很复杂的一面。这几周的时间,我看完一本css权威指南和html5权威指南的css部分,也算是系统的学习了一下css。 个人觉得有必要写一下CSS3部分的新特性:过渡、动画和变换。过渡 过渡效果一般是由浏览器直接改变元素的css属性实现的。例如 :hover原创 2016-12-28 23:30:04 · 3120 阅读 · 0 评论 -
记一次完整的等比例还原设计稿的响应式页面
项目新的迭代周期里面有样式优化的任务,决定借此机会重构页面布局,实现等比例还原设计稿、并响应多种设备的页面,上一版时间比较紧凑,忽略了等比例还原,这次补上。等比例还原实现思路:实际像素/实际设备宽度 = 设计稿像素/1920看到这个公式就知道,需要通过rem来实现了使用rem就需要设置html的font-size, 根据上面的公式:var viewport = document.doc...原创 2019-02-14 10:23:16 · 1838 阅读 · 1 评论