移动端适配-rem: 认识移动端 做适配方案之前先认识下移动端，熟悉移动端和pc端的区别和特点，才能真正理解做适配的精髓，这里就简单介绍下； 网上找不到主流android设备的数据表，就以iphone为例： 以iphone6为例： 竖屏宽为375，叫做逻辑像素（有的地方叫独立像素）； 竖屏宽的像素750，叫做物理像素，是设备实际的光点个数，要知道屏幕都是由一个一个光点组成的; 像素比（Asset）2x，就是2倍，物理像素/逻辑像素； ppi:像素密度326,实际平方英寸的光点个...
实现原理很简单，就是通过把浏览器默认的下拉框样式清除，自定义select样式，再把默认的下拉按钮替换为张向右对齐的小箭头图标即可，具体代码如下。 select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: solid 1px #000; /*很关键：将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("ht...
如果把 overflow:hidden 用在 body 标签，移动端浏览器依然能滚动，因为移动端是基于touch事件，解决方法有两个。 方法一： 将要隐藏滚动的内容加上一个包裹层div，然后给这个div设置高度为window.height()，并且 overflow:hidden 就可以解决你的问题。 方法二： 给 body 添加 position:fixed; 示例： body { overflow:hidden; position:fixed; left:0; top:0; }
给可点击的元素添加代码： -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 该属性的作用是：当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。 该属性可以只设置透明度，如果未设置透明度，iOS Safari使用默认的透明度；当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。 ...
ios safari浏览器中，type="button"、type="submit"按钮会显示为圆角样式，要去掉圆角样式，通过给对应的CSS添加 -webkit-appearance:none; 就能解决。 示例： HTML代码： <input type ="button" class ="btn" /> CSS代码： input .btn { display : inline-block ; height : 30px ; line-height : 30px ; bord...
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; border-left:none; border-right:none; border-bottom:1px solid #ddd;} 第一种是去掉border...
图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的。所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。 给图片定义vertical-align也可以解决这个问题，将图片的垂直对齐方式设置为 top 或 bottom，这个空隙会消失。 解决办法给img定义vertical-align或者定义为块状display:block，最优的解决办是定义vertical-align，但是定义vertical-align为middle时在IE6中大...
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。 块级元素： 动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子； 行内元素： 自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。 ...
有两个嵌套关系的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-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
不同分辨率设备或不同窗口大小下布局 @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:480px)and(max-width:767px) { } @media only screen and(max-width:479px) { }
nth-child(n)，n 可以是数字、关键词或公式。选择器匹配属于其父元素的第N个子元素，不论元素的类型。 序号写法： li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/ 倍数写法： li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/ 倍数分组匹配： li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/ li:nth-child(3n+5...
使用css+html制作网页时，经常会出现css代码在某浏览器没有效果的情况，如list-style-image代码就经常不能显示出图标，有些时候是因为使用了float的原因，有些时候却难以发现是什么原因。解决的方法一般是使用background背景图片的方法。 如以下css代码： #sidebar ul {margin:15px 0;} #sidebar ul li {line-height:1.5em; padding-left:10px; background:url(images/post.jpg) no-repeat center left; font-...