随笔分类 - h5c3
摘要：一、css不可以继承的属性 display、 margin、padding、border、 background、 width、min-width、max-width、height、min-height、max-height、 overflow、 position、top、bottom、left、r
阅读全文
摘要：
效果： 1、数据结构：Calendar/data.js export const data = [ { id: 0, hour: '00:00' }, { id: 1, hour: '01:00' }, { id: 2, hour: '02:00' }, { id: 3, hour: '03:00'
阅读全文
效果： 1、数据结构：Calendar/data.js export const data = [ { id: 0, hour: '00:00' }, { id: 1, hour: '01:00' }, { id: 2, hour: '02:00' }, { id: 3, hour: '03:00'
阅读全文
摘要：1、css变量的声明 使用--声明变量（$被sass用掉了，@被less用掉了） <style> :root { --color: red; } </style> root为根元素，相当于给html设置了css变量 /* :root 相当于 html */ html { --color: red;
阅读全文
摘要：box-sizing默认值为 content-box，设置border和padding时会改变width和height 并且不具有继承性，每次设置border或padding时都需要设置一遍box-sizing: border-box;比较麻烦 可以这样设置： html { box-sizing:
阅读全文
摘要：方式一：使用transition标签包裹需要过渡动画的标签 <transition name="checkbox"> <van-checkbox v-model='item.flag' v-show="isSign"> <template #icon="props"> <div :class="pr
阅读全文
摘要：> .van-icon::before { background: #e56300; background-image: linear-gradient(180deg, #ffbd96, #ff7f48); background-image: -moz-linear-gradient(180deg,
阅读全文
摘要：有A、B、C三个页面，跳转顺序为A-->B-->C-->B-->A 从A进入B，再从B进入C，从C返回到B，此时，点击浏览器的返回按钮，需要回到A，但是却到达了C 这个过程的路由栈为A --> B --> C --> B，此时点击浏览器的返回按钮，铁定是返回C了 解决办法： 第一种方法：B中监听浏览
阅读全文
摘要：border-radius: 10px; transform: translate3d(0, 0, 0); 当使用滑块时，在苹果手机上有兼容问题，需要加上transform: translate3d(0, 0, 0);
阅读全文
摘要：强制换行 word-break: break-all; 只对英文起作用，以字母作为换行依据。 word-wrap: break-word; 只对英文起作用，以单词作为换行依据。 white-space: pre-wrap; 只对中文起作用，强制换行。 禁止换行 white-space: nowrap
阅读全文
摘要：漏洞存在场景： NO1、使用target='_blank'，且无rel="noopener"或rel="noopener noreferrer"属性。 NO2、使用window.open，但第二个参数使用默认值（即以_blank或默认方式打开）。 这两种使用情况都存在安全漏洞。 修复方法： 针对NO
阅读全文
摘要：<template> <div id="app"> <button class="btn btn-primary">按钮1 <span class="mask mask-1"></span></button> <button class="btn btn-secondary">按钮2 <span c
阅读全文
摘要：<template> <div id="app"> <span @click="close">x</span> </div> </template> <script> export default { methods: { close() { console.log('123') } } } </s
阅读全文
摘要：[class^='icon'], [class*=' icon'] { width: 100px; height: 100px; background-color: red; } 以icon开头，包含 ' icon'的类名
阅读全文
摘要：概念：当设置padding-bottom的值为75%时，该值为父级元素宽度的75%，可以达到自适应的效果 应用： <template> <div id="app"> <div class="img-container"><img src="./assets/images/4：3.jpg"></div
阅读全文
摘要：<style> * { margin: 0; padding: 0; } .container { width: 350px; border: 1px solid red; display: flex; flex-wrap: wrap; justify-content: space-between;
阅读全文
摘要：dom结构： <h1><b>h1</b></h1> <h2><b>h2</b></h2> <h3><b>h3</b></h3> <h4><b>h4</b></h4> <h5><b>h5</b></h5> <h6><b>h6</b></h6> css： h1 > b, h2 > b, h3 >
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content
阅读全文
摘要：Sticky Footer：页脚footer永远在页面的底部，内容不够长时footer停留在底部，内容撑满时将footer往下挤，footer仍然停留在底部。 实现方式： 1、利用绝对定位和padding-bottom .container { position: relative; min-hei
阅读全文
摘要：/* 第一种方法：设置父容器的行高，子容器需要设置为行内块 */ .box1 { width: 200px; height: 200px; line-height: 200px; background: rgb(164, 214, 179); } .box1 span { display: inli
阅读全文
摘要：block formatting context 块级格式化上下文 形成独立的渲染区域，内部元素的渲染不会影响外界 形成BFC的条件： 浮动元素 float不是none 绝对定位元素 position为absolute或fixed 块级元素的overflow不为visible flex元素 inli
阅读全文
