卜小娴的博客

元素的overflow属性是用来规定当内容溢出元素框时发生的事情，设置单个方向的overflow-x和overflow-y同理，它有五个值，visible（默认），hidden，scroll，auto，inherit，现在我们先来简单说下这几个属性值： visible：默认值，它会把内容完全展现出来，即使内容超出已定义的父元素大小，它还是会超出部分按正常显示，但是也不会影响其他元素的布局。 hi

经常我们会碰到多个inline元素和inline-block元素同行展示时会出现间距问题，而我们已经处理了margin:0;和padding:0;如下： 这种默认间距也被称为元素留白间距，是我们在编辑器coding时对于inline或inline-block元素进行换行编写，元素进行留白引起，解决办法有以下四种：方法一：把标签内容写在同一行 此方法直接针对引起原因进行处理，所以当我们把代码写在

禁止长按图片弹出菜单img{ pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -webkit-user-select:none; -o-user-select:none; user-select:n

当我们在移动端给元素添加点击事件时我们会发现点击时元素会默认出现一个背景色框或者高亮显示，这个时候我们就需要使用-webkit-tap-highlight-color属性来解决，它的原理是使用用户自定义颜色值覆盖原先的高亮色，使用如下： -webkit-tap-highlight-color：transparent/color； 用户可以自定义取值，当取值transparent时将不会出现背景色

在我们开发过程中，我们经常会遇到这样的问题，在页面上弹出一个弹层，但是底部页面却可以滚动，本文实现JS弹出遮罩层后底部页面不滚动效果。首先效果如图，这里我们需要点击页面头部一个按钮才出现弹层，这里是弹层出现后底部页面滑动到下面的效果图： 这里只需CSS就可实现，代码如下：//弹层CSS代码.paydiv{ position: fixed; left: 0; top:0;

首先本文要实现的尖角效果图为： 这里我们使用的是CSS3的伪元素:before和:after。在此之前我们先看下面两段代码和对应效果图：//css代码div{ width: 0; height: 0; border-style: solid; border-width: 10px 25px; border-color:#f00 #ff0 #0f

我们知道，在移动端1px的线很粗很难看，我们设置border-width：0.5；它也会自动转为1px，又言之，直接设置宽度使其为0.5是不可能的，这里我们就提供几种方法。一：meta viewport控制//1px像素线条<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">//

HTML5里面有个新增标签progress，它可以用来表示进度，但是它的样式控制却比较特殊，正常情况下不加任何样式，它显示如下： 现在我们要设置总长度背景色和已完成进度背景色，这里在不同浏览器下使用的样式不一样，Opera浏览器只能为浏览器默认样式，即上面样式。 Chrome下：progress{ width: 168px; height: 5px; color:#f