CSS
看陌生的风景
keep coding
展开
-
css中可继承/不可继承的属性
能继承的属性不能继承的属性。原创 2022-08-25 10:38:41 · 170 阅读 · 0 评论 -
鼠标事件监听
onmousedown onmouseup onmousemove onwheel原创 2022-06-06 10:16:14 · 895 阅读 · 0 评论 -
BFC原理,布局规则
什么是 BFC既 Block Formatting Context(块级格式化上下文),是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。存在以下几种方案可创建 BFC:⚪ 浮动元素, float 值不为 none⚪ 绝对定位元素,position 属性为 absolute ,fixed⚪ 非块级盒子的块级容器( display 值为 inline-blocks , table-cells , table-captions 等)⚪ o..原创 2021-08-26 16:33:46 · 37 阅读 · 0 评论 -
防抖节流操作
// 防抖函数/* 可以把多个顺序地调用合并成一次,即规定事件被触发的次数 */function debounce(func, wait, immediate) { var timeout; return function () { var context = this, args = arguments; var later = function () { timeout = null; if (!immediate) func.apply(conte.原创 2020-07-16 11:19:13 · 230 阅读 · 0 评论 -
设置display:flex时, flex布局时设置单个子元素靠右
<div class="operate-content"><el-button type="primary" size="small" class="search_btn" :loading="search_loading" @click="search()" icon="el-icon-search" >添加</el-button> <div class="textR"..原创 2020-06-29 18:11:07 · 7648 阅读 · 0 评论 -
div 自定义滚动条
/*chrome滚动条颜色设置*/.le::-webkit-scrollbar,.msgs::-webkit-scrollbar{width:6px;height:6px;background-color:transparent;}/*定义滚动条轨道内阴影+圆角*/.le::-webkit-scrollbar-thumb,.msgs::-webkit-scrollbar-thumb{background-color:#fff;...原创 2020-06-05 16:51:38 · 171 阅读 · 0 评论 -
table表头固定,内容滚动
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>a</title> <style> table tbody { display: block; height: 195px; overflow-y: scro.原创 2020-05-21 14:29:31 · 385 阅读 · 0 评论 -
盒子模型
W3C标准盒子模型正常盒模型,是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box,它也是标准 w3c 盒子模型。正常盒模型是指:盒模型的大小包括content,padding,border,并且先做content.。IE盒子模型怪异盒模型,是指块元素box-sizing属性为border-box的...原创 2019-12-13 11:01:30 · 157 阅读 · 0 评论 -
数字滚动
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>城管执法门户</title> <style>...原创 2019-11-26 20:03:03 · 218 阅读 · 0 评论 -
Flex布局实现垂直居中
父元素设置: .pareDiv{display: flex; justify-content: center; align-items: center; align-content: center; width: 322px; height: 150px}或 display: flex; flex-direction...原创 2019-11-18 15:19:27 · 372 阅读 · 0 评论 -
删除兄弟节点的class样式
$("#ten_days").siblings("a").removeClass("sec");原创 2019-09-26 18:04:47 · 1429 阅读 · 0 评论 -
框选位置(一个、多个)
// 框选一个// data(左上角坐标:leftTopX,leftTopY 右下角坐标:rightBottomX,rightBottomY )function drawLine(data) { var image = new Image(); //原图片原始地址(用于获取原图片的真实宽高,当<img>标签指定了宽、高时不受影响) if ($("#carS...原创 2019-09-26 17:23:24 · 230 阅读 · 0 评论 -
隐藏掉滚动条
/*chrome和Safari*/html::-webkit-scrollbar{width:0;display:none;}/*IE10+*/html{-ms-overflow-style:none;}/*Firefox*/html{overflow:-moz-scrollbars-none;}...原创 2019-09-17 10:07:24 · 105 阅读 · 0 评论 -
限制文本的行数
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;原创 2019-09-10 17:33:36 · 239 阅读 · 0 评论 -
去除<li>标签前的空白
<style type="text/css"> ul { padding: 0px; margin: 0px; }</style>原创 2019-07-31 17:17:39 · 320 阅读 · 0 评论 -
超出文字。。。显示
width : 300px;overflow : hidden;white-space : nowrap;text-overflow: ellipsis;原创 2019-07-31 12:45:08 · 115 阅读 · 0 评论 -
Canvas实现添加水印
function addWaterMarker(str) { var can = document.createElement('canvas'); var body = document.body; body.appendChild(can); can.width = 300; can.height = 3...原创 2019-07-23 20:07:14 · 673 阅读 · 0 评论 -
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
网页可见区域高:document.body.clientHeight网页正文全文高:document.body.scrollHeight(与clientHeight比起来,多个border的高度跟横向滚动条不可用的高度)网页可见区域高:document.body.offsetHeight(自身的高度,如果有设置boder的话还应该加上boder的值)网页被卷去的高:document.bod...转载 2019-02-22 09:26:22 · 147 阅读 · 0 评论 -
css:position fixed使用
position:fixed的元素将相对于屏幕视口(viewport)的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。(上层元素有的使用了transform: translate(0, 0);导致position: fixed功能失效)pointer-events: none;元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其...原创 2019-07-23 17:23:57 · 871 阅读 · 0 评论