展开菜单

利用css属性padding或margin的百分比值实现元素的高度自适应

利用css属性padding或margin的百分比值实现元素的高度自适应

外边距属性margin和内边距属性padding取百分比值的时候,无论是left、right或top、bottom,都是以其父元素的宽值(width)作为参照物(即分母top/width),这是W3C的规范,官方原文如下: Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margi...

chrome浏览器jquery点击事件click元素出现黄色边框的解决方法

chrome浏览器jquery点击事件click元素出现黄色边框的解决方法

chrome浏览器下,使用jquery click()点击事件,被点击的元素会出现黄色边框: 解决方法: 给被点击的元素添加:focus的css代码:(如被点击的元素是element,代码如下 element:focus { outline:none; } 或 element:focus { outline:0; }

CSS实现元素垂直居中的几种方法

网页前端经常需要把元素垂直居中,下面总结几种方法。 1、不知道元素高度,利用定位和CSS属性transform实现元素垂直居中: 代码一: parentElement{ position:relative; } childElement{ position: absolute; top: 50%; transform: translateY(-50%); } 代码二: parentElement{ height:xxx; } .childElement { position: relative; ...

解决使用overflow:scroll;样式在苹果ios上滚动卡顿

给元素使用overflow:scroll;后在苹果手机浏览器上滚动时会卡顿,解决方法是: 在overflow:scroll;滚动的容器中增加样式: -webkit-overflow-scrolling: touch; 或者给body增加: body {overflow-x: hidden} 如果body和html使用了height: 100%;就把height: 100%;去除掉。 另外: 在苹果手机上使用了-webkit-overflow-scrolling:touch;后,可能会导致使用position:fixed;固定定位的元素,随着页面...

前端移动端适配方案之rem之小白解惑

前端移动端适配方案之rem之小白解惑

移动端适配-rem: 认识移动端 做适配方案之前先认识下移动端,熟悉移动端和pc端的区别和特点,才能真正理解做适配的精髓,这里就简单介绍下; 网上找不到主流android设备的数据表,就以iphone为例: 以iphone6为例: 竖屏宽为375,叫做逻辑像素(有的地方叫独立像素); 竖屏宽的像素750,叫做物理像素,是设备实际的光点个数,要知道屏幕都是由一个一个光点组成的; 像素比(Asset)2x,就是2倍,物理像素/逻辑像素; ppi:像素密度326,实际平方英寸的光点个...

通过css修改select下拉列表框的默认样式

实现原理很简单,就是通过把浏览器默认的下拉框样式清除,自定义select样式,再把默认的下拉按钮替换为张向右对齐的小箭头图标即可,具体代码如下。 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("ht...

在移动端设置overflow:hidden为什么页面还能滚?禁止方法

在移动端设置overflow:hidden为什么页面还能滚?禁止方法

如果把 overflow:hidden 用在 body 标签,移动端浏览器依然能滚动,因为移动端是基于touch事件,解决方法有两个。 方法一: 将要隐藏滚动的内容加上一个包裹层div,然后给这个div设置高度为window.height(),并且 overflow:hidden 就可以解决你的问题。 方法二: 给 body 添加 position:fixed; 示例: body { overflow:hidden; position:fixed; left:0; top:0; }

css取消Safari浏览器链接点击颜色变灰-webkit-tap-highlight-color

给可点击的元素添加代码: -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 该属性的作用是:当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。 该属性可以只设置透明度,如果未设置透明度,iOS Safari使用默认的透明度;当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。 ...

解决苹果ios设备 safari浏览器中按钮圆角问题

解决苹果ios设备 safari浏览器中按钮圆角问题

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...

通过css修改水平横线<hr/>标签样式去掉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; border-left:none; border-right:none; border-bottom:1px solid #ddd;} 第一种是去掉border...

HTML img图片出现下边距的解决方法

图片底部的空隙实际上涉及行内元素的布局模型,图片默认的垂直对齐方式是基线,而基线的位置是与字体相关的。所以在某些时候,图片底部的空隙可能是 2px,而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。 给图片定义vertical-align也可以解决这个问题,将图片的垂直对齐方式设置为 top 或 bottom,这个空隙会消失。 解决办法给img定义vertical-align或者定义为块状display:block,最优的解决办是定义vertical-align,但是定义vertical-align为middle时在IE6中大...