FLEX

通过从网上看到的面经，总结的一些高频的前端CSS面试题，有很多不会，于是找资料，并通过代码实现，自己提供了一些参考答案。 ####目录 1.怎样会产生浮动？ 2.如何清除浮动？ 3.盒子模型，以及IE和其他浏览器的却别？ 4.CSS3新特性有哪些？ 5.em 和 rem 的区别？ 6.重排和重绘？ 7.行元素和块元素？ 8.border-box 和 content-box 的区别？ 9.伪元素和伪类？ 10.unset? 11.CSS选择器优先级？ 12.水平垂直居中布局？ 13.两列等高布局？ ####1.怎样会产生浮动？ 某一个元素的float属性设置为left或者right，这个元素就会脱离文档流，左右浮动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。 ###2.如何清除浮动？ 方法比较多，这里介绍三种典型的方法： a.在与浮动元素的同级元素中加一个空的div，并将其css属性设置为 .clear1 { clear: both; } 优点：通俗易懂，容易掌握 缺点：添加了太多空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的

###在日常开发工作中，常常会遇到表格相关的各种需求，本文将通过代码实例，实现table的表头thead固定，tbody高度超出时滚动，同时，单元格内容超出宽度时以省略号显示。 以下方法的实现重点是将表单元素转换成行内块（由此tbody可实现超出滚动），并将单元格赋予固定值，可实现单元格内容超出以省略号显示，这样的实际需求决定了此种情况下的table不再是根据内容而响应的。 在设置td的宽度时，有时总和要比100%小些才不会导致一行放不下，应该是因为滚动条有一定的宽度。通常情况下，不是每一个td都需要设置宽度的，只给需要超出以省略号显示的td一个固定宽度即可，剩余的会自动分配其余空间。 优化1： 将如下代码中tr的display: inline-block；改为 display: flex; ，由此，td的宽度总和为100%即可，无需考虑滚动条所占的宽度了。 **优化2：**配合修改浏览器的默认滚动条的css代码，可以使table更美观 **补充1：**当给tr一个background图片时，在低版本google浏览器中，出现了每个td都继承了tr的背景样式的bug，目前没找到比较简单合适的解决方法，通过本文的例子可以比较快速的解决该问题，虽然本质上table已经不具有table属性了。 **补充2：**该方案仅用于纯手写table表格时

最近开发一款产品，要求PC端两列展示： 移动端展示： 使用display：flex布局，在最外面的wrap上添加overflow-y：auto；手机端使用媒体查询将两列宽度设为100%； 出现问题：当表格数据比较大时，PC端与安卓滚动条出现，滚动无问题，但是苹果IOS在表格里滑动无法触发滚动； 解决方法： 在滚动容器内加 -webkit-overflow-scrolling: touch 添加后偶尔会出现滑动不流畅，仔细查了-webkit-overflow-scrolling该属性 -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto : 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 touch : 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。 网上查了许多资料，具体有下面的几个坑： 在safari上，使用了-webkit-overflow-scrolling:touch之后，页面偶尔会卡住不动（本次问题） 通过动态添加内容撑开容器，结果根本不能滑动的bug（本次问题） 在safari上，点击其他区域，再在滚动区域滑动，滚动条无法滚动的bug（本次问题） 手势可穿过其他元素触发元素滚动

HTML 1.浏览器兼容问题 IE6图片有蓝色边框，有背景 解决方案：border:0; background: rgba(0,0,0,0) 盒子模型 html{box-sizing：border-box} 每个浏览器边距和间距显示不一样 解决方案*{margin:0;padding:0} 一个块级元素float，再使用横向margin会有双倍边距，margin：0，0，0，100px，实际会有200px，解决方案：加样式{dispay:inline} IE6,IE7,其他浏览器样式hacker设置使用, 解决方案：div{height:200px; _height:100px; *height:50px} IE6识别 _ * ,IE7识别 * 设置较小高度的标签，IE6，IE7，遨游会超出固定的高度 解决方案overflow：hidden CSS 1. css3新特性 答： 选择器 id选择器，class选择器，标签选择器 圆角和背景 渐变 旋转 动画 2. 写一段动画代码 animation：myDiv 5s infinite @keyframes myDiv{ 　　from{left:0px} 　　to{left: 200px} } 3. 一个div如何水平垂直居中 答：有很多种方法，面试官最想听到的答案是transfrom，display：flex也可以实现

近日，华为应用市场通过AppGallery Connect向开发者及合作归因平台开放移动应用归因查询接口，帮助开发者实现精准营销，提升推广效率。 通过该归因查询接口，开发者可以获取其上架应用的自定义归因参数，包括来自第三方的下载来源、下载量、安装量及下载安装时间等数据。与合作归因平台合作的开发者，还可以通过归因SDK，获取更加精准的归因分析信息。 目前，华为应用市场已经和AppsFlyer、Adjust等全球归因平台建立了合作关系。合作将帮助开发者更好地完成移动归因与营销分析，优化移动应用营销场景，推动应用的可持续增长，实现效益最大化。 点击 阅读原文 ，详细了解归因查询。 感谢授权转载 本文观点不代表我方观点 · END · 往 期 精 选 文 章 回 顾 让体验更流畅，探索应用性能优化之过度绘制 让体验更流畅，探索应用性能优化之软件绘制 应用市场免费推广小诀窍，只需你掌握这几条！ 本文分享自微信公众号 - 软件绿色联盟（sgachina）。 如有侵权，请联系 support@oschina.cn 删除。 本文参与“ OSC源创计划 ”，欢迎正在阅读的你也加入，一起分享。 来源： oschina 链接： https://my.oschina.net/u/3791970/blog/4338659

https://zhuanlan.zhihu.com/p/109176305 红色石头的个人网站： 红色石头的个人博客-机器学习、深度学习之路 ​ www.redstonewill.com 2020 年 2 月 24 日下午，CVPR 2020 终于放榜了！公布了接受论文的 ID，总共有 1470 篇论文被接受。 今年总共有效的投稿数量为 6656 篇，录取率为 22% 。与前两年的数据相比较： 2018 年有效投稿数量 3300 篇，收录 979 篇，录取率为 29%；2019 年有效投稿数量 5160 篇，收录 1300，录取率为 25%。 通过对比可以看出，今年的投稿数量增加了，但是录取率却降低了，说明竞争越来越激烈了。从 2018 年到 2020 年，形成了录取率 二连降 ！ 究竟哪些论文被收录了呢？这里附上录取论文 ID 的列表地址： http:// cvpr2020.thecvf.com/sit es/default/files/2020-02/accepted_list.txt 更多信息可以登陆 CVPR 官网查阅： http:// cvpr2020.thecvf.com/ 本文首发于公众号：AI有道（ID: redstonewill），欢迎关注！ 来源： oschina 链接： https://my.oschina.net/u/4274358/blog

https://zhuanlan.zhihu.com/p/109176305 红色石头的个人网站： 红色石头的个人博客-机器学习、深度学习之路 ​ www.redstonewill.com 2020 年 2 月 24 日下午，CVPR 2020 终于放榜了！公布了接受论文的 ID，总共有 1470 篇论文被接受。 今年总共有效的投稿数量为 6656 篇，录取率为 22% 。与前两年的数据相比较： 2018 年有效投稿数量 3300 篇，收录 979 篇，录取率为 29%；2019 年有效投稿数量 5160 篇，收录 1300，录取率为 25%。 通过对比可以看出，今年的投稿数量增加了，但是录取率却降低了，说明竞争越来越激烈了。从 2018 年到 2020 年，形成了录取率 二连降 ！ 究竟哪些论文被收录了呢？这里附上录取论文 ID 的列表地址： http:// cvpr2020.thecvf.com/sit es/default/files/2020-02/accepted_list.txt 更多信息可以登陆 CVPR 官网查阅： http:// cvpr2020.thecvf.com/ 本文首发于公众号：AI有道（ID: redstonewill），欢迎关注！ 来源： oschina 链接： https://my.oschina.net/u/4267539/blog

vant-weapp介绍 vant-weapp是有赞出品的，前端组件库，既然出自有赞之手，必然是尤其适合于做一个商城项目，它移植于vant-ui，后者有的特性大部分都已经实现。vant-ui找了好久，都没有发现购物车业务组件，我就从自家的有赞精选这个小程序的购物车搬一份过来。 参考目标页 官方文档 https://youzan.github.io/vant-weapp 安装 npm i @vant/weapp -S --production 编译 打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件 引入各组件 1.Card 商品卡片组件 先在自己的购物车页面的cart.json配置文件加上如下代码 "usingComponents": { "van-card": "/miniprogram_npm/@vant/weapp/card/index" } 以此类推，依次引入其他组件 2.引入Stepper 步进器组件 3.引入SubmitBar 提交订单栏组件 4.引入SwipeCell 滑动单元格组件 这里有一个坑，右滑删除按钮没有样式，自己加上 .van-swipe-cell__left, .van-swipe-cell__right { display: inline-block; width: 65px; height:

在这里阅读效果更佳 还记得当年和同桌在草稿纸上下三子棋的时光吗 今天我们就用代码来重温一下年少（假设你有react基础，没有也行，只要你会三大框架的任意一种，上手react不难） 游戏规则 双方各执一子，在九宫格内一方三子连成线则游戏结束 九宫格下满未有三子连线则视为平局 你可以点击这里来体验最终效果，样式有点丑，请见谅 准备阶段 建议先全局安装typescript 和 create-react-app（<strong>安装过请忽略</strong>） npm install typescript create-react-app -g 使用typescript初始化项目 create-react-app demo --typescript 初始化成功后ts环境已经配好了，不需要你手动加ts配置</br> 此时就是tsx语法，我们就可以愉快的写ts了</br> src文件夹就是开发目录，所有代码都写在src文件夹下</br> 我们使用sass来写样式,先安装sass npm install node-sass --save 运行项目 npm run start 删掉初始化界面的一些代码 开发阶段 组件化 开发一个项目其实就是开发组件</br> 把一个项目拆分一个个小组件，方便后期维护以及复用 棋子组件 棋盘组件 游戏规则组件 游戏状态组件 react中组件分为类组件和函数组件<

RN简单来说，就是ReactJs+java+ObjectC混合开发，跨平台App Part1： 1.首先安装RN运行环境需要：JDK,NodeJs,Python2,React-Native-Cli客户端，ANDROID STUDIO(用于安装模拟器),WebStorm(IDE) 2.WS里新建 ReactNative项目，自动生成项目目录结构 Part2: 1.最小组成单位，js文件,入口文件为App.js 2.代码组成： //导入相关组件包 import React,{Component} from "react"; import {View, Image, Text, StyleSheet} from "react-native"; //默认导出的组件 export default class aroundPage extends Component{ //渲染界面函数 render(){ return( //与ReactJs不同这里直接用的是相关的组件 <View style={styles.contain}> <Image source={require("../img/fujing.gif")}></Image> </View> ); } } //样式常量 const styles = StyleSheet.create({ contain:{flex:1