2018年7月30日
移动端手机浏览器页面出现上下滑动页面是涩的感觉，不流畅
摘要： 最近在做手机端页面时，出现了上下滑动页面感觉很涩、不流畅的问题，经过在网上一番查找，发现添加如下代码就好： body { -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } 解决问题地址：https://segmentfau 阅读全文
posted @ 2018-07-30 10:42 绿叶葱花 阅读(819) 评论(0) 推荐(0)
input选中发光效果
摘要： 有时我们需要让input选中时，有个类似发光的效果，如下图所示 其实，这种效果很好实现，代码如下： input:focus{ border-color: #ff962d !important; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba( 阅读全文
posted @ 2018-07-30 10:36 绿叶葱花 阅读(456) 评论(0) 推荐(0)
css连续的纯数字或字母强制换行
摘要： 默认情况下，一个 DIV或者其他元素的文本，如果都是无文字分隔符，无空格，则不会自动换行，而如果我们想让它换行的话需要设置CSS属性： div{ white-space:normal; word-break:break-all; } 阅读全文
posted @ 2018-07-30 10:29 绿叶葱花 阅读(348) 评论(0) 推荐(0)
CSS设置行间距和字间距
摘要： 行间距： CSS中通过line-height是一个比较常用的属性，可以实现行间距的设置，line-height的值表示的是两行文字之间基线的距离（line-height可以实现文字垂直居中效果，但我一般用flex布局来实现，感觉flex布局比较好用，且适用范围广）。 line-height的值为具体 阅读全文
posted @ 2018-07-30 10:21 绿叶葱花 阅读(5496) 评论(0) 推荐(0)
2018年7月27日
css3 字体自动换行第二行缩进一格
摘要： 我们知道css中text-indent属性可以使每个段落首行开头文字缩进，如缩进2个文字距离样式。 p{ text-indent: 2em; /*em是相对单位*/} 注：em是相对长度单位。相对于当前对象内文本的字体尺寸。我们中文段落一般每段前空两个汉字。实际上，就是首行缩进了2em。 那如果我们 阅读全文
posted @ 2018-07-27 09:49 绿叶葱花 阅读(11751) 评论(0) 推荐(2)
2018年1月19日
单行文本与多行文本超出范围隐藏并显示省略号
摘要： 在做项目时，很多时候文本内容未超出我们想让它显示的内容，这个时候，就需要把超出的范围隐藏起来 阅读全文
posted @ 2018-01-19 20:28 绿叶葱花 阅读(187) 评论(0) 推荐(0)
naturalWidth 与 naturalHeight
摘要： 在HTML 5中，新增加了两个用来判断图片的宽度和高度的属性(图片原始大小)，分别为 naturalWidth 和naturalHeight属性，例子如下： 注意问题： - 图片没有加载的时候 值为0，0 - 与img 设置的width 和height 无关，是图片的原始大小 阅读全文
posted @ 2018-01-19 20:22 绿叶葱花 阅读(254) 评论(0) 推荐(0)
2017年9月25日
CSS清除浮动的几种方式
摘要： 浮动对页面的影响： 如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0， 下面的元素会自动补位，所以这个时候要进行浮动的清除(不要在浮动元素上清除浮动)，不然浮动会造成父元素高度坍塌，同时浮动会脱离文档流，对整个页面布局有很 阅读全文
posted @ 2017-09-25 13:22 绿叶葱花 阅读(239) 评论(0) 推荐(0)