2021年3月26日

display 属性

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

posted @ 2021-03-26 15:54 cropsecrab 阅读(108) 评论(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 阅读(309) 评论(0) 推荐(0)

水平 + 垂直居中

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

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

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

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

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

float 浮动

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

posted @ 2021-03-26 11:11 cropsecrab 阅读(110) 评论(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 阅读(114) 评论(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 阅读(104) 评论(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 阅读(176) 评论(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 阅读(114) 评论(0) 推荐(0)

导航