用JavaScript获取DOM元素的位置

HTMLElement.offsetLeft 返回当前元素左边界相对于 offsetParent 节点的左边界的距离。HTMLElement.offsetTop 返回当前元素上边界相对于 offsetParent 节点的上边界的距离。值为像素值,整数。 继续阅读

发表在 JavaScript | 标签为 , | 留下评论

css外边距叠加问题,即垂直方向margin合并

外边距叠加(合并)是指两个或多个包含或相邻的普通文档流的块元素在垂直方向上的边距(margin)会重叠在一起(即发生合并),重叠后的外边距大小等于这几个外边距中值较大的那个。 继续阅读

发表在 CSS | 标签为 , , , | 留下评论

CSS 浏览器兼容性问题总结

1、CSS 默认值不同

HTML 标签 火狐浏览器、谷歌浏览器 IE浏览器
body 默认 margin 默认 padding
ul 默认 padding、默认margin 默认margin

继续阅读

发表在 CSS | 标签为 , , , | CSS 浏览器兼容性问题总结已关闭评论

图片在div中水平垂直居中显示的实现方法

实现在固定尺寸容器内,图片水平垂直居中。方法① 将容器样式的 text-align 设置为 center,行高 line-height 设置为与容器高度相同。 继续阅读

发表在 CSS | 标签为 , , | 留下评论

内层div设置margin-top无效的原因及解决方法

现象:内层div设置margin-top没有效果,实际上已经产生了影响,但效果表现在其父层div上。原因:根据W3C盒子模型的规范,一个盒子(box)如果没有上边距(padding-top)或上边框(border-top) 继续阅读

发表在 CSS | 标签为 , , , , , | 留下评论

css元素垂直居中的实现方法

元素垂直居中在页面布局中很常见,我总结了下面几种实现方法,并会在后续前端开发过程中根据自身经验补充新的方案。一、行内元素或单行文本垂直居中 1.css设置父元素的height与line-height 继续阅读

发表在 CSS | 标签为 , , | 留下评论

全局变量name与window对象的name属性

在全局作用域未声明name变量的情况下,在控制台打印 ‘name’ 输出一个空字符串而不是undefined。而打印其它未声明的常规变量则会正常输出 undefined。 继续阅读

发表在 JavaScript | 标签为 , | 留下评论

img标签在未指定src属性或值为空,出现边框不能去除

其实这是一个非常初级的问题,但有时不注意就有可能掉进这个坑里。
使用 <img />、<img src=”” /> 这两种形式,给元素设置宽高会出现边框,并且边框不能用 CSS 定义样式去除。
<img src=”sample.jpg” /> 给 img 标签设置 src 属性且值不为空时,一般不会出现边框,旧版 IE 浏览器可能出现,而且可以通过 CSS 去除。 继续阅读

发表在 CSS, HTML | 标签为 , , , , | img标签在未指定src属性或值为空,出现边框不能去除已关闭评论

CSS margin负值的实际表现与应用

前端开发一些布局需求时常使用 margin 负值来达到效果,margin 负值在不同布局上会展现出不一样的效果。
① 针对两个上下布局的块元素(普通文档流):
HTML:

<div class="box1"></div>
<div class="box2"></div>

继续阅读

发表在 CSS | 标签为 , , | CSS margin负值的实际表现与应用已关闭评论

CSS !important的用法和效果

在 CSS(层叠样式表)中,!important 的作用是提高 CSS 样式规则的优先级。
例如:

#box{
    width: 200px;  /* 无效 */
    width: 300px !important;  /* 有效 */
}

继续阅读

发表在 CSS | 标签为 , | CSS !important的用法和效果已关闭评论