开发中遇到的常用的布局样式及问题

常用样式：

a标签去掉下划线：text-decoration:none;
li去掉点：list-style-type:none;
字体粗细：font-weight: bold;
字体间距：letter-spacing:1px;

单行字体超出用省略号：
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
多行字体超出用省略号：
          overflow : hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;

背景自适应宽高：
background-size:100% 100%;
-moz-background-size:100% 100%;

背景不重复：
background-repeat: no-repeat;

transform兼容性写法：
transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 	/* Opera */

兼容iphone5的写法：

@media screen and (max-width:500px){ 
  body{  
      background: #000;
   }
}

判断ios端还是android端:

let ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
  alert('ios');
  localStorage.setItem('type', 'ios');
} else if (/android/.test(ua)) {
  alert('android');
  localStorage.setItem('type', 'android');
}

touch-action: none; 这样任何触摸事件都不会产生默认行为，但是 touch 事件照样触发。

问题：

1.绝对定位后面的div不能点击。

pointer-events:none;这样能够让鼠标事件穿透这个绝对定位层，

使之能点击到后面的<div>，

然后再在这个绝对定位层里面需要接受事件的<dvi>上面添加：pointer-events:auto;

 

2.子级margin-top影响父级

1. 父级或子元素使用浮动或者绝对定位absolute

浮动或绝对定位不参与margin的折叠

2. 父级overflow:hidden;

3. 父级设置padding（破坏非空白的折叠条件）

4. 父级设置border

3.css3渐变样式

左上到右下渐变

background: -webkit-linear-gradient(left top, #FD3631, #EC46A4); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, #FD3631, #EC46A4); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, #FD3631, #EC46A4); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, #FD3631, #EC46A4); /* 标准的语法 必须在最后  颜色后面不能跟100%*/  

4.居中

图片垂直居中：text-align:center;

文字垂直居中：外层div设置行高 line-height: 36px;

 

5.a标签不记录历史跳转地址问题

资料来自：https://blog.youkuaiyun.com/qq_40963664/article/details/78561086

<a href="b.html" id="bbb">b.html</a>

var fnUrlReplace = function (eleLink) {
  if (!eleLink) {
    return;
  }
  var href = eleLink.href;
  if (href && /^#|javasc/.test(href) === false) {
    if (history.replaceState) {
      history.replaceState(null, document.title, href.split('#')[0] + '#');
      location.replace('');
    } else {
      location.replace(href);
    }
  }
};

document.getElementById('bbb').onclick = function (event) {
  if (event && event.preventDefault) {
    event.preventDefault();
  }
  fnUrlReplace(this);
  return false;
};

6.CSS实现div的高度填满剩余空间

<div id="main">
    <div id="nav">nav</div>
    <div id="content">content</div>
</div>

#nav {
    background-color: #85d989;
    width: 100%;
    height: 50px;
}
#content {
    background-color: #cc85d9;
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0px;
    left: 0px;
}