单行文本溢出
实现方法:
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 种方法
- opacity 和 filter: opacity()
div {
opacity: 0;
}
div {
filter: opacity(0);
}
- color alpha 透明度
div {
color: rgba(0, 0, 0, 0);
background-color: rgba(0, 0, 0, 0);
}
- transform
transform 属性可以用于元素的平移、缩放、旋转或倾斜
div {
transform: scale(0);
}
div {
transform: translate(-9999px, 0px);
}
- clip-path
clip-path 属性可以创建一个剪辑区域,用于确定元素的哪些部分是可见的
div {
clip-path: circle(0);
}
- visibility: hidden
visibility 属性可以设置为 visible 或 hidden 来显示和隐藏元素
div {
visibility: hidden;
}
- display: none
display 可能是最常用的元素隐藏方法
div {
display: none;
}
- z-index
可以通过将元素的 z-index 属性设置为负值,实现元素的隐藏
div {
z-index: -1;
}
- position
position 属性允许使用 top、left、right、bottom 从页面中的默认位置移动元素。
div {
position: absolute;
left: -999px;
}
- 覆盖另一个元素
通过在元素的上面放置于背景颜色相同的元素,可以在视觉上隐藏一个元素
div:after {
position: absolute;
content: '';
top: 0;
left: 0;
bottom: 100%;
right: 0;
background-color: #fff;
}
- 缩小尺寸
可以通过使用 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 伪元素用于向某些选择器设置特殊效果。
- 伪类:
- :active,将样式添加到被激活的元素。
- :focus,将样式添加到被选中的元素。
- :hover,当鼠标悬浮在元素上方是,向元素添加样式。
- :link,将特殊的样式添加到未被访问过的链接。
- :visited,将特殊的样式添加到被访问的链接。
- :first-child,将特殊的样式添加到元素的第一个子元素。
- :lang,允许创作者来定义指定的元素中使用的语言。
- 伪元素:
- :first-letter,将特殊的样式添加到文本的首字母。
- :first-line,将特殊的样式添加到文本的首行。
- :before,在某元素之前插入某些内容。
- :after,在某元素之后插入某些内容。