CodeLin-web-CSDN博客

原创微信小程序上手

微信小程序做项目遇到的一些问题关于标签关于数据绑定关于循环wx-for关于wx-if、wx-else关于事件绑定关于引入外部包字体图标的引入关于动态修改checkbox的disabled属性的问题总体上来说微信小程序给我的感觉很亲切，标签和html大体类似，view相当于div，text相当于span，然后数据绑定和函数之类的和vue的MVVM也很类似，接下来是我初学微信小程序做项目遇到的一些问题关于标签常用的那些html里面的标签微信小程序都有，好像table没有，然后wxss我暂时还没发现和css

2021-04-29 18:07:33 111

原创字节前端一面初体验

前端时间面了字节文章目录1、bootstrap的底层实现2、浏览器的渲染机制3、load事件和DOMContentLoad事件的先后4、说说script标签的几个属性5、说说script标签相关脚本的执行顺序6、请你介绍一下外边距合并的原因以及解决方式7、介绍一下原型链8、说一下实例方法和原型方法的区别9、介绍一下es6新特性10、介绍一下promise 1、bootstrap的底层实现大概的阐述一下整个项目的流程，用到的技术栈，然后被问到bootstrap的底层是怎么实现的，后来一查原来是媒体查询。。

2021-04-03 15:12:39 202

原创移动Web开发01

移动Web开发01rem单位：媒体查询媒体查询+rem实现元素动态大小变化引入资源less基础css的弊端less介绍less变量less运算rem适配方案rem适配方案技术使用（市场主流）第一种方案（rem+媒体查询+less技术） rem单位： rem是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px；非根元素设置width：2rem；则换成px表示就是24px。 rem的优点，可以通过修改h

2021-03-07 19:57:29 127

原创 Flex弹性布局

Flex弹性布局传统布局与flex布局flex布局原理Flex布局父级常见属性1、主轴与侧轴1.1 flex-direction设置主轴的方向2.2 justify-content设置主轴上的子元素排列方式2.3 flex-wrap 设置子元素是否换行2.4 align-items设置侧轴上的子元素排列方式（单行）2.5 align-content设置侧轴上的子元素排列方式（多行）2.6 flex-flowFlex布局子项常见属性1、flex属性2、align-self控制子项自己在侧轴上的排列方式3、or

2021-03-07 19:18:49 92

原创流式布局

流式布局视口移动端主流方案移动端技术解决方案移动端初始化CSS移动端布局1、单独制作移动端页面（主流）2、响应式页面兼容移动端（其次）图片格式视口浏览器显示页面内容的屏幕区域。可以分为布局视口，视觉视口和理想视口布局视口 layout viewport *一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。视觉视口 viewport *是用户正在看到的网站的区域 *我们可以通过缩放在操作视觉视口，布局视口仍保持原来的宽度理想视口 ideal vie

2021-03-07 16:41:46 98

原创 H5C3进阶02

H5C3进阶023D转换三位坐标系3D移动translate3d透视perspective左手准则浏览器私有前缀1、私有前缀2、提倡的写法CSS3总结 3D转换三位坐标系 3D移动translate3d 3D移动在2D移动的基础上多加了一个Z轴方向简写方式，x，y，z不能省略，没有就写0 透视perspective 左手准则 x轴： y轴 z轴和2d的旋转效果差不多综合写法：transform：rotate3d（1，0，0，45deg）；浏览器私有前缀 1、私有前缀提倡先写私有前缀，再

2021-03-07 16:04:49 80

原创 H5C3进阶01

H5C3进阶012D转换（transform）让盒子实现水平垂直居中2D转换之旋转rotate2D转换中心点transform-origin2D转换之缩放scale2D转换综合写法CSS3动画 HTML5新增语义化标签是针对搜索引擎的 2D转换（transform）可以实现元素的位移、旋转和缩放 *移动：translate *旋转：rotate *缩放：scale 语法：重点： *定义2D转换中的移动，沿着x和y轴移动元素 *translate最大的优点：不会影响到其他元素的位置（定位和外边距没有的特

2021-03-07 15:53:09 102

原创 HTML5和CSS3

HTML5和CSS3HTML5的新增特性HTML5新增的语义化标签HTML5新增的多媒体标签一、音频视频双标签HTML5新增的input类型HTML5新增的表单属性CSS3新增特性1、属性选择器 HTML5的新增特性新增了一些新的标签、新的表单和新的表单属性都有浏览器兼容性的问题，基本都是ie9+以上版本才支持 HTML5新增的语义化标签标签名称 header 头部标签 nav 导航标签 article 内容标签 section 定义文档某个区域（大号的div） as

2021-03-07 15:06:57 56

原创 CSS07

CSS07精灵图为什么需要精灵图字体图标如何添加小三角CSS用户界面样式1、更改用户的鼠标样式2、表单轮廓3、防止表单域拖拽vertical-align（只针对于行内元素或者行内块元素有效）溢出的文字用省略号显示1、单行文本溢出显示省略号：2、多行文本溢出LOGO SEO优化精灵图为什么需要精灵图服务器频繁接收和发送请求图片，造成服务器请求压力很大，大大降低页面的加载速度。因此出现css精灵技术（也称CSS Sprites）核心原理：将页面中的一些小的背景图片整合到一张大的图片作用：有效的减

2021-03-06 22:09:24 88

原创 CSS06

CSS06定位staticrelativeabsolutefixedsticky（粘性定位）定位叠放次序z-index绝对定位的盒子居中一、水平居中二、垂直居中三、定位特殊特性：四、脱标的盒子不会触发外边距塌陷五、定位的扩展元素的显示和隐藏一、display显示隐藏定位 1、某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子 2、当滚动窗口的时候，盒子是固定在某个位置，并且可以压住其他盒子浮动可以让多个块级盒子在一行没有缝隙排列显示，经常用于横向排列盒子定位则是让盒子自由的在盒子中移动位置或固

2021-03-06 21:41:54 66

原创 CSS05

CSS05学成在线网页案例css属性书写布局页面布局整体思路导航栏注意点学成在线网页案例 css属性书写布局 1、布局定位：display/position/float 2、自身属性：width/height 3、文本属性：font/color 4、其他属性：box-shadow/border-radius 页面布局整体思路 1、确定页面的版心（可视区） 2、分析页面中的行模块，以及每个行模块中的列模块（页面第一准则） 3、一行中的列模块经常使用浮动布局，先确定每个列的大小，之后确定列的位置（页面布局第

2021-03-06 20:55:02 49

原创 CSS04

css04圆角边框盒子阴影box-shadow：鼠标经过：文字阴影text-shadow：浮动一、标准流二、浮动浮动的特性浮动元素经常和标准流父级搭配使用（第一准则）浮动布局的两个注意点清除浮动一、为什么要清除浮动二、清除浮动的本质三、清除浮动的方法总结新知识点：去掉li前面的项目符号（小圆点） list-style：none；圆角边框（css3新增，有兼容性问题ie9以上） border-radius：值 1、圆形： Border-radius：50%； 2、圆角矩形： border-radiu

2021-03-04 17:48:50 70 1

qq_45077122的博客