单行文本溢出

实现方法:

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

效果:

多行文本溢出

实现方法:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

效果:

盒子文本水平垂直居中

盒子水平垂直居中 文本水平垂直居中

补零函数

实现方法:

function pad(num, n) {
  var len = num.length
  while (len < n) {
    num = '0' + num
    len++
  }
  this.cardNo = num
  return num
}

this.pad(this.cardNo, 8)

解析 URL 参数

实现方法:

export function parseParam(url) {
  // 将浏览器地址中 ‘?’ 后面的字符串取出来
  const paramsStr = /.+\?(.+)$/.exec(url)[1]
  // 将截取的字符串以 ‘&’ 分割后存到数组中
  const paramsArr = paramsStr.split('&')
  // 定义存放解析后的对象
  let paramsObj = {}
  // 遍历
  paramsArr.forEach((param) => {
    // 判断是否含有key和value
    if (/=/.test(param)) {
      // 结构获取对象的key和value
      let [key, val] = param.split('=')
      // 解码
      val = decodeURIComponent(val)
      // 判断是否转为数字
      val = /^\d+$/.test(val) ? parseFloat(val) : val
      // 判断存放对象中是否存在key属性
      if (paramsObj.hasOwnProperty(key)) {
        // 存在的话就存放一个数组
        paramsObj[key] = [].concat(paramsObj[key], val)
      } else {
        // 不存在就存放一个对象
        paramsObj[key] = val
      }
    } else {
      // 没有value的情况
      paramsObj[param] = true
    }
  })
  return paramsObj
}

文件两端对齐

实现方法:

<style>
  div {
    width: 100px;
    text-align: justify;
  }
  div i {
    display: inline-block;
    width: 100%;
  }
</style>

<div>如何让文字两端对齐</div>

总结

  • 使用 div 标签创建一行文字
  • 在 div 内,再定义一个空标签,例如 ,i 标签
  • 在 css 中,使用 text-align 属性设置为 justify,同时设置 i 标签的宽度为 100%

清除浮动

方式一:

overflow: hidden;

方式二:

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

/* 兼容 IE */
.clearfix {
  zoom: 1;
}

input 相关

设置 input 的 placeholder 的字体样式

input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: red;
}
input::-moz-placeholder {
  /* Firefox 19+ */
  color: red;
}
input:-ms-input-placeholder {
  /* IE 10+ */
  color: red;
}
input:-moz-placeholder {
  /* Firefox 18- */
  color: red;
}

设置 input 聚焦时的样式

input:focus {
  background-color: red;
}

取消 input 的边框

border: none;
outline: none;

滚动条隐藏&更改样式

/*css主要部分的样式*/ /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 10px; /*对垂直流动条有效*/
  height: 10px; /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rosybrown;
  border-radius: 3px;
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 7px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #e8e8e8;
}

/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
  background-color: cyan;
}

/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
  background: khaki;
}

css 画三角形

#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

谈谈你对盒模型的理解

CSS3 中盒模型有两种:标准盒模型IE (怪异)盒模型

两种盒子模型都是由 content + padding + border + margin构成。其大小是由 content + padding + border决定的。但是盒子内容宽/高度(即 width/height)的计算范围根据盒模型的不同会有所不同:

  • 标准盒模型:只包含 content
  • IE(怪异)盒模型:包含 content + padding + border

可以通过 box-sizing 来改变元素的盒模型:

  • box-sizing: content-box:标准盒模型(默认)
  • box-sizing: border-box:IE(怪异)盒模型

CSS 中隐藏元素的 10 种方法

  1. opacity 和 filter: opacity()
div {
  opacity: 0;
}
div {
  filter: opacity(0);
}
  1. color alpha 透明度
div {
  color: rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
}
  1. transform

transform 属性可以用于元素的平移、缩放、旋转或倾斜

div {
  transform: scale(0);
}
div {
  transform: translate(-9999px, 0px);
}
  1. clip-path

clip-path 属性可以创建一个剪辑区域,用于确定元素的哪些部分是可见的

div {
  clip-path: circle(0);
}
  1. visibility: hidden

visibility 属性可以设置为 visible 或 hidden 来显示和隐藏元素

div {
  visibility: hidden;
}
  1. display: none

display 可能是最常用的元素隐藏方法

div {
  display: none;
}
  1. z-index

可以通过将元素的 z-index 属性设置为负值,实现元素的隐藏

div {
  z-index: -1;
}
  1. position

position 属性允许使用 top、left、right、bottom 从页面中的默认位置移动元素。

div {
  position: absolute;
  left: -999px;
}
  1. 覆盖另一个元素

通过在元素的上面放置于背景颜色相同的元素,可以在视觉上隐藏一个元素

div:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  bottom: 100%;
  right: 0;
  background-color: #fff;
}
  1. 缩小尺寸

可以通过使用 width、height、padding、border-width 或 font-size 来缩小元素的尺寸来实现元素的隐藏

div {
  height: 0;
  padding: 0;
  overflow: hidden;
}

CSS 中 display 和 position 的属性值有哪些?

display:

  • none: 隐藏,不会占用文档流位置,不会占用空间
  • inline: 行内元素
  • inline-block: 行内块元素,也即有块元素的一些特性,可以设置宽度、高度(width、height)边距等
  • block: 块元素,独占一行,可以设置宽度高度(width、height)边距等
  • table: 表格相关
  • inherit: 继承
  • flex: 弹性盒子

position:

  • absolute: 绝对定位,对象脱离正常文档流,使用 top,right,bottom,left 等属性进行绝对定位。比较多的层叠通过和 z-index 属性定义
  • fixed: 固定定位,对象脱离正常文档流,使用 top,right,bottom,left 等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动
  • relative: 相对定位,对象遵循正常文档流,但将依据 top,right,bottom,left 等属性在正常文档流中偏移位置
  • inherit: 继承,规定应该从父元素继承 position 属性的值
  • static: 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)

CSS 中的伪类及伪元素有哪些?有什么用?

CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于向某些选择器设置特殊效果。

  • 伪类:
    1. :active,将样式添加到被激活的元素。
    2. :focus,将样式添加到被选中的元素。
    3. :hover,当鼠标悬浮在元素上方是,向元素添加样式。
    4. :link,将特殊的样式添加到未被访问过的链接。
    5. :visited,将特殊的样式添加到被访问的链接。
    6. :first-child,将特殊的样式添加到元素的第一个子元素。
    7. :lang,允许创作者来定义指定的元素中使用的语言。
  • 伪元素:
    1. :first-letter,将特殊的样式添加到文本的首字母。
    2. :first-line,将特殊的样式添加到文本的首行。
    3. :before,在某元素之前插入某些内容。
    4. :after,在某元素之后插入某些内容。