沭瑾-优快云博客

转载 Vue PC端框架和Vue移动端UI框架

Vue PC端框架1. Element中文文档：http://element-cn.eleme.io/#/zh-CNgithub地址：https://github.com/ElemeFE/element2. iView中文文档：https://www.iviewui.com/github地址：https://github.com/iview/iview3. vue-element-a...

2019-12-06 14:12:09 336

转载前端常用插件

第三方接口蚂蚁金服开放平台： https://docs.open.alipay.com/200/105518微信开放平台： https://open.weixin.qq.com/cgi-bin/index?t=home/index&lang=zh_CN微信支付： https://pay.weixin.qq.com/wiki/doc/api/index.html腾讯开放平台：h...

2019-12-03 19:17:53 311

转载 vue插件大全

一、UI组件及框架element - 饿了么出品的Vue2的web UI工具套件mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式一致的响应式 UI 库vuetify - 为...

2019-12-03 19:16:28 494

转载前端常用插件汇总

项目文件结构detail/ 一些组件的详细说明，以及使用 Demo目录工具类浏览器增强类表单类图片类图标类 UI 框架 UI 组件类用户体验增强动画 SVG 测试其他类 Bootstrap相关类 JS Plugins仓库工具类方便操作对象，数组等的工具库 underscore.js lo-dash 与underscore....

2019-12-03 19:02:59 585

原创 BFC机制

1、BFCBFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。2、BFC的布局规则内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的m...

2019-08-31 17:26:52 286

原创文本标签在div内水平垂直居中显示

在写页面时，通常导航栏和页面最底部的信息一般都是文字信息，而且都是居中显示的。能实现这种效果的方法有很多，用定位或者浮动都可以，我今天就介绍两种别的方法来实现这种效果。1）给父级元素加display：table；text-align：center；给子元素添加display：table-cell；vertical-align：center；上图代码：<style> ...

2019-08-31 17:05:28 2487

原创在写高度自适应时遇到高度坍塌的问题及解决办法

问题描述：通常在写高度自适应的时候，父级的高度通常要设置成自适应，其在页面显示的真正高度其实是由子元素撑开的高度。通常在这种自适应的页面中，布局通常会用到浮动，让子元素浮动起来，可以在同一排显示，但是子元素浮动后会脱离文档流，这会导致其父级失去高度，从而造成高度坍塌的问题。如下图：由于子元素现在为空，所以父级ul的内容为空，所以只显示边框上图代码： <style> ...

2019-08-31 16:33:06 394

原创 css属性

1、css属性1）每个css样式都必须由两部分组成：选择符（Selector）和声明（Decleration）注：声明又包括属性（Properyt）和属性值（Value）2）css属性：属性是指定选择符具有的属性，他是css的核心，css2共有150多个属性；3）css属性值：属性值包括法定属性值和常规的数值加单位或颜色值(colorValue)；如（25px）。2、关于文本的css声...

2019-08-29 22:09:53 515

原创选择符的权重（特殊性）

css中，用4位数字表示权重，权重的表达方式如：0,0,0,0类型选择符的权重为：0001类（class）选择符的权重为：0010ID选择符的权重为：0100伪类选择符的权重为：0010包含选择符的权重为：包含选择符权重之和内联样式的权重：1000通配符权重：0000伪元素选择符的权重为：0001子选择符的权重为：0000属性选择符的权重为：0010继承样式权重为：0000...

2019-08-29 20:51:48 450

原创外部样式表的调用

1、第一种写法：<link rel="stylesheet" type="text/css" href="目标文件路径及全称" />2、第二种写法：<style type="text/css"> @import url(目标路径及全称);</style>link和@import的区别（建议使用link元素加载外部样式表）本质上，这两种方式都是为...

2019-08-29 20:28:46 1386

原创（20）HTML&&CSS笔记

1、css继承：从某个元素继承属性常见的文本样式，字体样式都可以继承；继承父级属性可以用inherit； .wrap{ width:100%; height:300px; border-bottom:5px solid #000; text-align:center; ...

2019-08-09 17:03:32 134

原创（19）HTML&&CSS笔记（flex布局）

1、弹性盒子模型（flex容器）：定义弹性伸缩盒容器类型用法：display：flex；将对象作为块级弹性弹性盒模型；display：inline-flex；将对象作为内联块级弹性弹性盒模型；（之前学过display：block/inline-block；）2、flex容器采用flex布局的元素，称为flex容器（flex container），简称“容器”。3、flex项目它的所...

2019-08-09 15:14:03 128

原创（18）HTML&&CSS笔记（2D）

1、transform（变换）rotate 旋转deg为旋转角度，旋转值可以是正值也可以是负值；scale 缩放值可以为负值；scale（number）：一个值的时候，x与y方向同时进行缩放；scale（number，number）：两个值的时候，单独对应的值控制对应的方向；translate 位移translate（number）：单独控制x轴的方向；translate（nu...

2019-07-27 08:17:53 137

原创（17）HTML&&CSS笔记（过渡，动画）

1、transition-property 过渡属性默认为all；也可以为具体的某个属性（attr），如果有多个属性值的情况，就用逗号隔开；2、transition-duration 过渡时间<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt...

2019-07-26 21:54:33 176

原创（16）HTML&&CSS笔记（渐变，倒影）

1、线性渐变（linear-gradient）background-image:来作为属性渐变样式是从上往下的：确定方向：确定单方向to right，to top，to left，to bottom确定对角方向to right bottom，to right top，to left bottom，to left top单位：%，px<!DOCTYPE html&...

2019-07-26 18:56:11 170

原创（15）HTML&&CSS笔记（HTML5标签，hsl颜色）

1、html5 最新版本；canvas、svg、数据交互、css3动画效果、css3选择器；2、h5 结构标签header 头部标签section 板块标签nav 导航栏footer 页脚aside 侧边栏，轮播图，nav导航栏3、语义化标签article 文章标签或内容标签hgroup 标题组的标签time 表示时间或日期的标签address 地址标签mark ...

2019-07-26 18:14:07 1044

原创（14）HTML&&CSS笔记（表格，iframe）

1、table：定义标签的表格table特殊情况：border="num"是自带的属性（指边框的宽度）！表格简化内容：可以不加thead,tbody,tfoot,但是默认把所有的行与列都放到tbody里面去。样式问题：th,td自带一个像素的内边距。<body> <table border='1'> <!-- thead是表头 --&g...

2019-07-26 16:55:31 175

原创（13）HTML&&CSS笔记（伪元素，选择器优先级）

1、伪元素 ::after，::before（两个冒号兼容IE9以下）使用方法如下<style> p{ border:5px solid #000; background-color: #ff0; font-size:20px; } p::after{ ...

2019-07-26 15:53:26 210

转载（1）面试题

HTML && CSS 部分1、CSS常用布局CSS常用布局为盒模型div+css、其中需要注意IE的怪异盒模型，我们通常通过box-sizing解决。传统盒模型布局方式中我们可以细分为文档流布局、浮动布局、定位布局。在ie10+中我们可以使用flex布局，其中我们需要理解最为核心的容器和轴的概念。二维布局中，我们可以使用Grid布局。对于三栏布局，除了浮动实现方式，还有双飞翼...

2019-07-26 11:40:08 241

原创（12）HTML&&CSS笔记（表单）

1、form的属性action 规定表单提交到哪个地址；target 规定链接地址在哪个窗口打开；_self 在本窗口打开_blank 新窗口打开name 表单的名字method 表单的提交方式getpost<form name='kaidyHobby' action="http://www.baidu.com" target='_blank' method='ge...

2019-07-26 11:38:50 171

原创（11）HTML&&CSS笔记（BFC，书写顺序）

1、BFC（Block Formatting Context 块级格式化上下文）：指页面中一个指定的区域，并且给一套渲染规则，他会去决定子元素如何去定位；触发BFC机制：overflow：非visiable;display:inline-block;float:left/right;position:absolute/fixed;解决什么样的问题：（1）防止外边距合并的情况...

2019-07-26 10:44:47 137

原创（10）HTML&&CSS笔记（伪元素，高级选择器）

1、选择器群组选择器：同时匹配共同的样式，元素与元素之间用逗号隔开；后代选择器：同时匹配A元素的后代B元素，两元素之间用空格隔开；子元素选择器：匹配A元素的子代B元素，两元素之间用大于隔开；毗邻选择器：B元素紧跟随着A元素，两元素之间用 + 隔开2、属性的选择器attr：属性val：属性值[ attr ]：所匹配具有这个属性的元素；[ attr=val ]：所匹配具有这个属性而且...

2019-07-25 23:23:19 112

原创（9）HTML&&CSS笔记（定位*）

1、定位：在网页中，我们是用来确定位置的。position：方位值：top 上bottom 下left 左right 右static 静态定位（方位值是不起作用的）relative 相对定位（方位值起作用）absolute 绝对定位（方位值起作用）参考系：除了静态定位之后，其它都可以作为参考；如果没有参考系，默认为body来进行参考；作为参考物需要满足的要求：...

2019-07-25 19:55:57 160

原创（8）HTML&&CSS笔记（浮动*）

1、文档流：它是在文档中（页面）可显示对象所占用的位置（空间）脱离文档流：在页面当中不占位置；以往让盒子排成一行，我们使用的display:inline-block;解析空格；会产生基线对齐的情况。2、浮动（float）它使元素脱离文档流，按照指定（左右）方向发生移动。遇到父级边界或相邻的浮动元素就停下来（往下掉）。分类：float：left；左浮动float：right；...

2019-07-25 19:12:35 168

原创（7）HTML&&CSS笔记（垂直对齐、背景样式）

1、vertical-align：垂直对齐方式baseline 基线对齐top 顶部对齐middle 中部对齐bottom 底部对齐什么情况才会产生这个垂直对齐方式的问题？垂直对齐：垂直方向上而不是水平方向；对齐：上对齐，中对齐，下对齐；适用范围：行内样式（inline）/行内块元素（inline-block）;2、块级样式属性块级元素默认宽度为100%；如果说需要...

2019-07-25 18:14:08 296

原创（6）HTML&&CSS笔记（文本）

1、font：font-size：字体大小单位：px 像素（12px 为字体的最小字体）% 百分比（相对于父级）em 倍数（相对于父级）rem 根倍数（相对于html根标签）color：字体颜色font-family：字体类型font-weight：字体粗细normal 正常字体bold 加粗100 瘦身细200 - 500 正常600以上都是加...

2019-07-25 17:33:03 110

原创（5）HTML&&CSS笔记（样式）

1、样式初始化：把你所有浏览器自带的默认样式来进行处理；可用群组选择器：如果有共同的样式，可以使用群组选择器归类。body,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,p{ margin:0; }2、display（样式类型）block 块级样式inline 内联/行内样式区分block与inline的特点：block 块级样式：独占一行支持宽...

2019-07-25 15:11:39 110

原创（4）HTML&&CSS笔记（外边距合并）

外边距合并一个元素与另一个元素之间在垂直方向上合并起来。解决方案：1、给父级加内边距来撑开垂直方向的内容。<html> <head> <meta charset='utf-8'/> <title> Document</title> <meta name='keywords' content=''/> ...

2019-07-25 12:31:25 183

原创（3）HTML&&CSS笔记（盒子模型）

1、盒子模型<!doctype html><html> <head> <meta charset='utf-8'/> <title> Document </title> <meta name='keywords' content=''/> <meta name='description'...

2019-07-25 11:39:26 161

原创（2）HTML笔记（命名规范）

1、div 标签【division】划分标签：可以把文档分割为各个独立的，不同的模块。div标签是非常非常干净，不带任何杂质[margin,padding]的标签2、css样式css层叠样式表（Cascading style sheets）特点：后面的相同的样式会把前面的相同样式给覆盖掉。3、css样式种类（1）内嵌样式/内联样式：用一对style标签包裹起来的，style标签里面放...

2019-07-24 21:13:27 157

原创（1）HTML笔记（标签）

1、什么是标签标签是由一对尖括号组成的。种类：单标签：<img /> 双标签：<html></html> 双标签是由同一对标签组成的，前面<html>是开始标签，后面</html>是结束标签。2、HTML文档的构成网站...

2019-07-24 19:42:58 352

栈是一种高效的数据结构，遵循先入后出，是一种运算受限的线性表，其限制是仅允许在表的一端进行操作，这一端被称之为栈顶。所以任何不在栈顶的元素都无法访问，如果要访问栈底的元素，必须先移除上面的元素。就像一摞盘子，放只能放在上面，拿也只能从上面拿，所以栈是一种先入后出的一种数据结构。因为栈的这种特点，栈中任意不在栈顶的元素都无法访问，为了得到栈底的元素，必须把该元素之上的元素拿掉，把栈底的元素暴露在...

2019-04-07 17:24:45 342

原创 JavaScript 冒泡算法详解

冒泡算法简单来说就是让数组中需要比较大小的数据，像气泡一样，小的往上冒，大的往下沉，由此得出由小到大按顺序排列的数组。我总结了两种方法实现，一种是从头部开始比较，另一种是从尾部开始比较。从头部开始比较：var arr = [5,7,1,2,9,8];for(var i = 0;i<arr.length-1;i++){ for(var j = 0;j<...

2019-03-31 10:43:11 326

转载如何转载CNSD博客

在参考“如何快速转载优快云中的博客”后，由于自己不懂html以及markdown相关知识，所以花了一些时间来弄明白怎么转载博客，以下为转载优快云博客步骤和一些知识小笔记。参考博客原址：http:...

2018-11-30 17:13:55 6753 3

沭瑾