页面布局相关总结（持续更新）

img标签底部空白

图片为行内元素，有文字特性，默认存在间隙。可以将图片设置为块元素

// 去除img空隙
img{display: block;};

table设置高不生效问题

需要给每一行设置height以及line-height属性才可以生效

设置链接的样式顺序

link >visited >hover >active

设置边框透明度

border:10px solid rgba(255,255,255,0.5) 最后一位代表透明度

background与 background-image的区别

如果涉及样式的设置 应该使用background 用background—image不起作用

.content:hover div{
            background: url("http://climg.mukewang.com
            /582c34220001091605000150.jpg") 
            no-repeat 10px 10px;//在background才可以起作用
            display: block;
            background-origin: content-box;
        }

效果图

background是复合属性，如果将background-color写在background前面， 会导致background-color属性被覆盖

不换行

white-space: nowrap;/不换行/

z-index

只有添加定位 z-index才会生效，设置了定位的元素默认层级是 比较大的

1、中文无法两边对齐

word-break:break-all;
word-wrap : break-word ;

2、点击按钮跳转指定链接

window.location=""

3、密码强度判断

//密码强度判断
var rankStr = ["rank-a", "rank-b", "rank-c"];
function getRank(val){
    var modes= 0;
    if (/\d/.test(val))  modes++;//数字
    if(/[a-zA-Z]/.test(val)) modes++;//字母
    if(/[^a-zA-Z0-9\u4e00-\u9fa5    ]/.test(val)) modes++;//字符
    return modes;
}

解决页面body设置100%后仍旧出现滚动条

遇到一个问题：页面顶部设置一个块级元素之后，显示滚动条
原因是因为给块级元素设置了margin-top导致页面被撑开导致高度超过了100%
解决方案：body 设置 overflow：hidden；

ele.offsetLeft值不正确

遇到一个问题：将一个元素使用translate属性居中之后，因为需要获取其offsetLeft 值，但是一直不正确
原因：translate属性只是在视觉上改变了元素的位置，元素实际元素页面的位置没有发生改变，所以会导致获取外层元素的offsetLeft属性值的结果是不正确的。
解决方案：使用元素的margin属性进行布局

table.border与table.style.border区别

table.style.border仅在table标签添加边框，table.border则在table内部均添加边框