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内部均添加边框