2021年3月26日

display 属性

摘要： display 属性 none：此元素不显示 block：此元素作为块级元素，前后有换行符 inline：此元素作为行内元素 inline-block：此元素作为行内元素，但是对象的内容作为块对象。意思是作为一个块容器，可以有块元素的属性，比如设置宽、高等。 list-item：此元素会作为列表显示 阅读全文

posted @ 2021-03-26 15:54 cropsecrab 阅读(111) 评论(0) 推荐(0)

flex 弹性布局

摘要： display: flex; 弹性盒子只定义了弹性子元素如何在弹性容器内布局 弹性容器的属性： justify-content: flex-start | flex-end | center 在主轴( 假设为默认 row )上面对齐 左对齐 | 右对齐 | 居中 space-between：平均分布 阅读全文

posted @ 2021-03-26 15:43 cropsecrab 阅读(76) 评论(0) 推荐(0)

两种盒子模型 + CSS利用 border 画三角形

摘要： margin：外边距 -top -bottom -left -right 上下左右 (一个数字：全部 两个数字：上下+左右 四个数字：上右下左 顺时针) border：盒子本身 粗细 样式 solid实线 dashed虚线 颜色 padding：内边距 标准盒子模型（W3C盒模型）： 1、给一个标签 阅读全文

posted @ 2021-03-26 12:00 cropsecrab 阅读(312) 评论(0) 推荐(0)

水平 + 垂直居中

摘要： absolute定位： ** 父级元素不用设置 position:relative ，可以以html为标准水平竖直居中 1）margin-top 和 margin-left 来设置 。必须知道需要居中元素的高度和宽度 .center { background-color:red; position: 阅读全文

posted @ 2021-03-26 11:40 cropsecrab 阅读(75) 评论(0) 推荐(0)

position 5种定位 静态定位 + 绝对定位 + 相对定位 + 粘性定位 + z-index

摘要： 静态定位（默认值）：static 不受偏移值影响 绝对定位：absolute 和 fixed 统称为绝对定位 相对定位：relative 粘性定位：sticky 偏移值上下左右：top bottom left right 一、relative 相对定位： 相对于原来的位置移动，仍在文档流中，不影响其 阅读全文

posted @ 2021-03-26 11:39 cropsecrab 阅读(434) 评论(0) 推荐(0)

float 浮动

摘要： 浮动： float:left / right 1、设置浮动会让某个元素脱离文档标准流，后面的元素会移动占据它原来的位置 2、浮动元素会向左或向右移动到它的外边缘碰到 包含框 或另一个 浮动框 时 3、浮动的位置： 如果B是浮动的元素，当它的上一个元素A不是浮动的，则浮在A的下面，相对垂直位置不会改变 阅读全文

posted @ 2021-03-26 11:11 cropsecrab 阅读(111) 评论(0) 推荐(0)

css

摘要： span 强调 fqf是<span id="title1">美女</span> font-family:字体样式font-size:字体大小font-weight:字体粗细 bold bolder lighter 也可以数字100 900color:字体颜色font:风格(斜体oblique) 粗细 阅读全文

posted @ 2021-03-26 11:00 cropsecrab 阅读(116) 评论(0) 推荐(0)

vue中 ECharts 的使用

摘要： npm install echarts --save //安装在需要的项目中导入： import * as echarts from 'echarts'**** 不能用 import echarts from 'echarts' **** 1、 <!-- 为 ECharts 准备一个具备大小（宽高） 阅读全文

posted @ 2021-03-26 10:57 cropsecrab 阅读(107) 评论(0) 推荐(0)

vue中 bootstrap 的使用

摘要： npm i bootstrap jquery popper.js //安装在main.js中写入：import "jquery";import "bootstrap";import "bootstrap/dist/css/bootstrap.min.css"; 阅读全文

posted @ 2021-03-26 10:56 cropsecrab 阅读(177) 评论(0) 推荐(0)

vue中 vuex 的使用

摘要： npm install vuex --save // 安装 $store.state.XXX this.$store.commit('XXX') this.$store.dispatch('XXX') import { mapState,mapMutations,mapActions } from 阅读全文

posted @ 2021-03-26 10:55 cropsecrab 阅读(115) 评论(0) 推荐(0)

vue中 axios 安装 + post 登录 + get 表单

摘要： npm install axios 安装 import axios from 'axios' 在需要使用的 .vue 文件中引入 get请求：("",{ }) 第一个参数表示请求地址，第二个参数表示配置信息params： 表示传递到服务器端的数据headers： 表示请求头post请求：("",{ 阅读全文

posted @ 2021-03-26 10:50 cropsecrab 阅读(288) 评论(0) 推荐(0)

el-table 表格

摘要： <el-table> 必填： :data="tableData" 可填： size="" // 表格内容整体大小 medium / small / mini :row-style="{height:'80px'}" // 设置表格 行高 :cell-style="{}"也可以，注意！冒号和单引号 : 阅读全文

posted @ 2021-03-26 10:13 cropsecrab 阅读(233) 评论(0) 推荐(0)

el-form 表单

摘要： <el-form> ** 必须设置： :model="Form" ref="Form" ** 可以设置： :rules="rules" // 创建验证表单 :inline=true // 创建行内表单 inline-message // 以行内形式展示校验信息 默认为false size=" " / 阅读全文

posted @ 2021-03-26 09:50 cropsecrab 阅读(765) 评论(0) 推荐(0)

导航