工作中遇到的HTML和CSS布局和JavaScript技巧记录分享

工作中遇到的HTML和CSS布局和JavaScript技巧记录分享

1. 左右对齐:
   display:flex;
   justify-content:space-between
2. 2.固定菜单项:

jquery:
$(window).scroll(function() {
      if ($(window).scrollTop() >= 55) {//如果滑动大于55px;吸住左侧菜单栏
        $(".nav").css("position", "fixed");
      }else{
        $(".nav").css("position", "absolute");
      }
  });

3. jquery插件:ripples.js,水波涟漪
4. text-transform: uppercase转为大写字母

5.下面介绍一下如何给一个节点添加和删除class名

添加：节点.classList.add("类名")；
删除：节点.classList.remove("类名")；

6.检查是否含有某个CSS类

myDiv.classList.contains('myCssClass'); //return true or false 
注意：类名直接写，不可加“.”; 　　　
如若同时添加多个类名，并列写，用逗号分隔。

7.禁止选中文本:

.noselect {
-webkit-touch-callout: none; /* iOS Safari /
-webkit-user-select: none; / Chrome/Safari/Opera /
-khtml-user-select: none; / Konqueror /
-moz-user-select: none; / Firefox /
-ms-user-select: none; / Internet Explorer/Edge / user-select: none; / Non-prefixed version, currently not supported by any browser
*/ }

在 IE < 10 和Opera < 15中我们需要在需要禁止选中的元素上面添加一个属性 unselectable=“on”，
否则可能不会生效哦~不过现代浏览器如果不是非得兼容一些老的浏览器也可以不加。

8.使用 object-fit: cover;来使图片适应容器

9.文本放不下显示省略号…

overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;

盒子要是块元素才行

.box {
	width: 100px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

效果
美国进口Culturelle康萃乐
益生菌30片儿童水果味LGG…

10:点击拨打电话:

 <a href="tel:xxxx-88731088" >

11:字体间距

letter-spacing: 0.8px;

12.取消选择,取消鼠标右键事件

oncontextmenu=self.event.returnValue=false onselectstart="return false"

13.让textarea拉动不了

css: resize:none;

14.常见字体单位总结:

——常见字体单位——
1.em
移动端常用的字体尺寸单位，相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。

2.rem
r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。

3.vh
vh就是当前屏幕可见高度的1%，即 height:100vh == height:100%;它的好处是当元素没有内容时候，设置height:100%该元素不会被撑开，但设置height:100vh，该元素会被撑开屏幕高度一致。

4.vw
viewpoint width，视窗宽度，1vw = 视窗宽度的1%。vw就是当前屏幕宽度的1%，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，但100vw是相对于屏幕可见宽度来设置，所以会出现50vw
比50%大的情况。

15.文本框自动填写历史记录:

autocomplete="on"
<input type="text" name="q" autocomplete="on" value="" placeholder="输入搜索关键词">

16.设置图片的宽度100%高度等于宽度(就算图片不是正方形也行,只是被压缩了点,或者再加个obj-fit:cover)

/*stulus语法*/
.img{
    position:relative;
    width:100%;
    height:0;
    padding-top: 100%; /*padding-bottom都可以*/
    img{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

17.css 修改placeholder字体颜色字体大小

input::-webkit-input-placeholder {
    /* 修改字体颜色 */
    color: #fff;
    /* 修改字号，默认继承input */
    font-size: 12px;
    /* 设置背景色 */
    background: #8ac6d1;
}

18.小米盒子阴影设置

 -webkit-box-shadow: 0 15px 30px rgba(0,0,0,.1);
  box-shadow: 0 15px 30px rgba(0,0,0,.1);

19.自定义字体图标:

/自定义字体图标/ /1.通过@font-face定义自己的字体/ @font-face {
/2.申明自己的字体名称/
font-family: ‘wjs’;
/3.引入字体文件（约束某一段字符代码什么图案）/
src:
url(…/fonts/MiFie-Web-Font.svg) format(‘svg’),
url(…/fonts/MiFie-Web-Font.eot) format(‘embedded-opentype’),
url(…/fonts/MiFie-Web-Font.ttf) format(‘truetype’),
url(…/fonts/MiFie-Web-Font.woff) format(‘woff’); } /4.怎么使用维护性更好/ .wjs_icon{
font-family: wjs; } .wjs_icon_phone::before{
content: “\e908”; } .wjs_icon_tel::before{
content: “\e909”; }

20.左侧滑动右侧不滑动,或者相反

.left{
overflow-y: scroll;
height: 100%;
}

21.滚动条样式设置(仅支持pc端)

/* 拖拉槽宽度 */
::-webkit-scrollbar {
  width: 6px;
  height: 13px;
}
/* 拖动条 */
::-webkit-scrollbar-thumb {
  background-color: #cfcfd2;
  border-radius: 8px;
  background-clip: padding-box;
  min-height: 28px;
}
/* 背景槽 */
::-webkit-scrollbar-track-piece {
  background: #f3f3f3;
}


pc以及移动端隐藏滚动条:思路:设置滚动条颜色为透明色
::-webkit-scrollbar {
  background-color: transparent;
}
或者:??
::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
}