随笔分类 - CSS+H5
摘要：1.device-width 定义：定义输出设备的屏幕可见宽度。 不管你的网页是在safari打开还是嵌在某个webview中，device-width都只跟你的设备有关，如果是同一个设备，那么他的值就不会变。 比如iphone6的device-width*device-height为375*667
阅读全文
摘要：应用场景 在我们开发业务的过程中，经常遇到列表显示，并且ui设计是每行固定几个元素跟固定间距，但是因为我们需要根据不同大小的屏幕进行自适应，在不用rem等单位进行自适应的时候，我们在pc端布局，可以使用以下2种方法进行，固定动态列表的固定列数固定间距 效果图下：数据个数不固定，每行固定4个，元素之间
阅读全文
摘要：问题：在移动端中使用line-height=height实现文字垂直居中时，在安卓手机会发现文字偏上！ 解决： 1、利用flex布局中的垂直居中属性实现垂直居中,父元素设置 子元素 2、不直接设置line-height=height，而是设置
阅读全文
摘要：应用场景 我们在 HTML 开发时可能会遇到这样的情况：页面上有一些元素使用绝对定位布局，这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部。默认情况下，下方元素被遮挡的部分是不会响应鼠标事件的。 但有时我们可能需要被遮盖住的元素仍然能够处理鼠标事件。 比如：我们在一个地图组件上覆盖了一个显示
阅读全文
摘要：font-family 属性设置文本的字体系列。 font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。 注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。 多个字体系列是用一个逗号分隔指明： 实例
阅读全文
摘要：1、在说到百分比是前，先简单了解下基本的单位 英寸（inch） ：in 1 in=2.54cm厘米（centimeter）：cm毫米（millimeter）：mm磅（point）：pt 1pt=1/72 in皮卡（pica）:pc 1pc==12 pt像素（pixel unit）：px 1px=0.
阅读全文
摘要：进度条类型1（渐变进度条） 效果1：图片实现进度条 思路，进度条是一张图片，用定位来控制不同时间图片相对进度条box的left值来控制位置，用animate实现动画效果 html css .gameBg .barBox .barImg { position: absolute; top: 0; le
阅读全文
摘要：利用absolute定位的不固定宽高垂直实现方法（position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;） 展示效果 html css：
阅读全文
摘要：应用场景 宽高比率，实现图片自适应高度，防止图片加载过程高度为0，加载完图片高度撑起，它下面的div抖动问题 重点：CSS百分比padding都是相对宽度计算的 可以看到，当把垂直方向padding值只使用padding-bottom表示的时候，如果没有text-align属性干扰，<img>元素的
阅读全文
摘要：1、css3新单位vh、vw，这个单位是相对显示窗口的宽度或高度 vh等于viewport高度的1/100.例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px。 2、动画效果(圈圈从小到大放大) 》 》》》 3.常见的PC鼠标滑过
阅读全文
摘要：兼容css3新属性 在css3中，我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性，使我们不用为每个css3新属性再加上属性（需要用到大量css3的项目时再引入） content布局 当h5内嵌在app里面的时候，在iso手机下，底部（头部）固定按钮
阅读全文
