CSS实现元素垂直居中的几种方法
网页前端经常需要把元素垂直居中，下面总结几种方法。
1、不知道元素高度，利用定位和CSS属性transform实现元素垂直居中：
代码一：
parentElement{
position:relative;
}
childElement{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
代码二：...
解决使用overflow:scroll;样式在苹果ios上滚动卡顿
给元素使用overflow:scroll;后在苹果手机浏览器上滚动时会卡顿，解决方法是：
在overflow:scroll;滚动的容器中增加样式：
-webkit-overflow-scrolling: touch;
或者给body增加：
body {overflow-x: hidden}
如果body和html使用了height: 100%;就把height: 100%;去除掉。
另外：...
前端移动端适配方案之rem之小白解惑
移动端适配-rem:
认识移动端
做适配方案之前先认识下移动端，熟悉移动端和pc端的区别和特点，才能真正理解做适配的精髓，这里就简单介绍下；
网上找不到主流android设备的数据表，就以iphone为例：
以iphone6为例：
竖屏宽为375，叫做逻辑像素（有的地方叫独立像素）；
竖屏宽的像素750，叫做物理像素，是设备实际的光点个数，要知...
通过css修改select下拉列表框的默认样式
实现原理很简单，就是通过把浏览器默认的下拉框样式清除，自定义select样式，再把默认的下拉按钮替换为张向右对齐的小箭头图标即可，具体代码如下。
select {
/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
border: solid 1px #000;
/*很关键：将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:...
在移动端设置overflow:hidden为什么页面还能滚？禁止方法
如果把 overflow:hidden 用在 body 标签，移动端浏览器依然能滚动，因为移动端是基于touch事件，解决方法有两个。
方法一：
将要隐藏滚动的内容加上一个包裹层div，然后给这个div设置高度为window.height()，并且 overflow:hidden 就可以解决你的问题。
方法二：
给 body 添加 position:fixed; 示例：...
css取消Safari浏览器链接点击颜色变灰-webkit-tap-highlight-color
给可点击的元素添加代码：
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
该属性的作用是：当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。...
解决苹果ios设备 safari浏览器中按钮圆角问题
ios safari浏览器中，type="button"、type="submit"按钮会显示为圆角样式，要去掉圆角样式，通过给对应的CSS添加 -webkit-appearance:none; 就能解决。
示例：
HTML代码：
<input type ="button" class ="btn" />
CSS代码：
input .btn
{
d...
通过css修改水平横线
标签样式去掉hr标签阴影效果
html中水平衡线hr默认高度是两个像素，其中border-top高1px，且颜色为黑，border-bottom高1px颜色为灰，这时看着是阴影效果，去掉阴影效果很简单，只需在css里把border-bottom或border-top属性设置一个为none即可。
hr {border:none; border-bottom:1px solid #ddd;}
或者
hr {border-top:none; b...
HTML img图片出现下边距的解决方法
图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的。所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。
给图片定义vertical-align也可以解决这个问题，将图片的垂直对齐方式设置为 top 或 bottom，这个空隙会消失。
解决办法给img定义vertical-al...
详细介绍css display:block的用法
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。
块级元素：
动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子...
div嵌套导致子区域margin-top失效不起作用的解决方法
有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div，使父元素产生上外边距。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti...
实现网页布局的自适应@media screen各max-width和min-width大小
不同分辨率设备或不同窗口大小下布局
@media screen and(min-width:1200px) {
}
@media screen and(min-width:960px)and(max-width:1199px) {
}
@media screen and(min-width:768px)and(max-width:959px) {
}
@media only screen and(min-width:480p...
