1.CSS 实际上如何工作?      当浏览器显示文档时,它必须将文档的内容与其样式信息结合。它分两个阶段处理文档:      1)浏览器将 HTML 和 CSS 转化成 DOM (文档对象模型)。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。      2)浏览器显示 ...

动态效果图: 下面是实现的代码部分: wxml: js代码: 对应的css样式(wxss): 实现的思路: 1、放置一个输入框,隐藏其文字和位置,同时设置支付输入框(表格)样式 2、当点击输入框时设置输入框为聚焦状态,唤起键盘,点击空白处,失去焦点,设为失去焦点样式,因为输入框宽高为0,所以不会显示输入框和光标,实现隐藏。 3、限制输入框最大字数并且监听输入框状态,以输入框值的长度作为输入框(表格...

CSS中的居中

前端开发

  

2019-07-10 02:54:55

一、水平居中 文字水平居中 单行文字水平居中,对于含有inline-*的元素都可以用下面的方法实现水平居中。 块元素水平居中 语法 二、垂直居中 文字的垂直居中 1.单行文字 多行文字的水平居中 行内块元素也用这种方法居中 块元素的垂直居中...

原型链再理解

前端开发

  

2019-12-12 14:52:00

这篇文章带你彻底弄懂 普通构造函数、Object、Function之间的关系!!! 参考原型链那点事儿 一. 普通构造函数 例如: 每一个对象都有一个__proto__属性,这个对象的__proto__指向它的原型对象。 f是一个对象,这个对象的__proto__指向它(F)的构造函数 构造函数也是一个对象,那么它也必然会有一个__proto__属性,这个属性指向它(Function)的原型对象。...

11CSS的三大特性

前端开发

  

2019-12-16 10:57:56

CSS有三个非常重要的特性:层叠性、继承性、优先级 1.层叠性 相同选择器设置了冲突的相同样式时,此时一个样式就会**覆盖(层叠)**另一个冲突的样式。层叠性主要解决样式冲突的问题。 层叠性原则: 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式; 样式不冲突,不会层叠; 2.继承性 CSS中的继承:子标签会继承父标签的某些样式,如文本的颜色和字号。简单的理解就是:子承父业。 恰当...

13CSS的浮动

前端开发

  

2019-12-21 14:06:52

1.为什么需要浮动(float)? 反问1:如何让多个块级盒子div水平排列成一行? 标准流比较难以实现,虽然将块级元素转换为行内块元素可以实现一行显示,但是它们之间会产生大的空白间隙,间隙的宽度很难人为控制。 反问2:如何实现下面两个盒子的左右对齐? 总结:有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。 浮动最典型的应用:可以让多个块级...

媒体查询使用详解

前端开发

  

2019-12-22 16:08:42

一. 媒体查询的历史: 很多朋友认为媒体查询是CSS3新增,事实并非如此。媒体查询在CSS3之前早已存在,只是比较粗放一些,仅用来区分媒体的类型。 看如下简单代码实例: 上述代码分析如下: link元素的media属性用来规定上述CSS代码应用的媒体类型。 screen表示对应CSS文件应用于显示设备。 all表示对应CSS文件应用于所有媒体设备. print表示对应CSS文件应用于打印机。 即便...

先说结论: 我们在打包(本地、开发、测试、生产打包)时,document.ejs入口文件引入的路径不会被webpack打包工具解析,而打包会使得文件结构会发生变化,从而导致相对文件路径引用地址出错!(如果是./在当前目录下一般不会错,因为打包后就是在同一个文件夹下,具体看你是否改动过打包文件结构了,默认是没问题的)   过程: 我用umi.js写了一个react 移动端h5页面,做微信分...

前端问题杂记

前端开发

  

2020-01-03 05:23:16

文章目录 1、dataGrid高度问题 1、dataGrid高度问题 关键字:JavaScript、EasyUI、dataGrid 源码: 问题:出在指定了展开后的显示高度,即在onExpandRow:function()设置了height:100。 解决办法:不设置height高度即可(删除该行即可)...

16CSS中的定位

前端开发

  

2020-01-04 12:11:53

1.为什么需要定位? 引入问题:一些情况使用标准流或浮动能实现吗? 1.某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子。 2.当我们滚动窗口的时候,盒子是固定在屏幕的某个位置。 以上效果,标准流或浮动都无法快速实现,此时需要定位来实现。所以: 浮动可以让多个盒子在一行没有缝隙的排列显示,经常用于横向排列的盒子。 定位则是可以让盒子自由的某个盒子的内部移动位置或者固定在屏幕中的某个位置,并...

1.整体效果 2.案例分析 3.具体实现 大盒子类的命名tb-promo,淘宝广告; 里面放一张图片; 左右两个按钮用链接就可以,左箭头prev,右箭头next; 底侧小圆点用ul来实现,命名为promo-nav。 4.大盒子制作 5.左侧箭头制作 6.右侧箭头制作 因为左右两侧箭头中CSS的代码有很多是相同的,因此建议使用并集选择器可以将重复的代码写在一起,给代码解耦! 注意:如果一个盒子既有l...

20CSS中的高级技巧

前端开发

  

2020-01-07 01:53:31

1.精灵图 1.1 为什么需要精灵图? 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低网页的加载速度。 因此,为了有效地减少服务器接收和发送请求的次数,提高网页的加载速度,出现了CSS精灵技术(也称为CSS Sprites、CSS雪碧)。 核心原理:将网页中的一些小背景图像整合到一张大图片中,这样服务器只...

【前端案例天堂(一)】简约钟表 (源码+注释) 目录 【前端案例天堂(一)】简约钟表 (源码+注释) 0.【效果图】 1.代码-【CSS部分 】 2.代码-【JS部分 】 3.代码-【HTML部分 】  0.【效果图】       1.代码-【CSS部分 】   2.代码-【JS部分 】 3.代码-...

25CSS3中的3D转换

前端开发

  

2020-01-13 00:21:23

技术交流QQ群:1027579432,欢迎你的加入! 1.现实中的3D有什么特点? 近大远小 物体后面遮挡不可见 2.三维坐标系 三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。 x轴:水平向右。注意:x右边是正值,左边是负值 y轴:垂直向下。注意:y下面是正值,上面是负值 z轴:垂直屏幕。注意:向外是正值,向内是负值 3.3D转换主要学习内容 3D转换主要学习工作中最常用的3D位移和...