FLEX

【今日推荐】：为什么一到面试就懵逼！>>> 在我们前端开发过程中，写 css （包括 sass, less, stylus 这样的预处理器）进行设计稿的样式还原是一项重要的工作，而其中，关于页面布局的部分，又是书写样式代码时候的重点和难点，这篇文章就尽可能的去总结常见的一些页面布局实现方案( 并不是全部，布局实现方法太多了 )，希望能够对大家有所帮助。 在开始正题之前，有一点要说明： css 布局中遇到的一个绕不开的问题就是浏览器兼容性，下面方案会遇到类似 transform, flex 等的兼容性问题，且由于 grid 布局兼容性问题，暂不涉及 grid 布局内容，在不同场景，大家选择合适的布局实现方案即可。 1. 居中相关的布局 1.1 水平居中布局 效果图如下： 方案一. inline-block + text-align 分析： display 设置为 inline-block 的元素，具有文本元素的性质，其父元素可以通过设置文本对齐属性 text-align 来控制其在行内的对齐方式， text-align: center 即为水平对齐 注意： text-align 属性是具有继承性的，会导致自己元素内部的文本也是居中显示的，需要自身设置 text-align 覆盖 < style > .wrap { width : 100% ; height : 200px ;

转载请留言。 完整的导图，这里放不下，老规矩，关注公众号 「 前端试炼 」 ，回复 「 简历 」 获取。 1. 前言 本文仅是针对初高级技术岗位哈。 最近是春招季，参与了部门的实习生招聘工作，收到了很多同学的简历。发现有一些同学的简历写得不是很好看。 但是，仔细聊了聊之后发现，这些同学其实技术是很厉害的，只是不知道该如何写在简历上，不知道如何“包装”自己。 在这过程中，也给一些同学的简历提了一些建议，结合自己写简历的经验，在这里写一篇文章聊一聊，如有不足之处还望指出和补充。 本文的主要内容： 为什么要认真写简历 在写简历的时候，我们需要关心什么 如何更好的把自己展现在简历上 在写简历的时候以及简历写好之后，还需要准备什么 ... 造起来 ~ 1.1 简历的重要性 简历有多重要，我们来看看生活中的一个场景。 想想，你和女神第一次约会，是不是会穿上一身帅气西装，将头发梳成大人模样，不停照镜子今天的自己是不是最帅的。 找工作也是一样的道理，简历就是你的 「 门面 」 ，是你的 「 敲门砖 」 。即使你的技术很牛逼，面试准备的很充分，简历如果写的不好，也有可能连面试的机会都没有。 HR 一天可能需要处理几百份甚至上千份简历，停留在一份简历上的时间可能不会超过 「 30 」 秒，有的简历甚至撑不过 「 10 」 秒就被 Pass 了，感兴趣的简历才会多花点时间看看。

需求：创建一个n*n的格子，n是输入框的数字，点击重渲染可以重新画一个n*n的格子，鼠标移入格子中，对应的格子背景设变成红色，点击对应的格子，背景色变成蓝色，再点一次还原颜色。 要造格子有好几种方式，可以用table、ul和li，或者直接使用完全的div 这里为了方便理解，我使用ul和li。 定义html： box用于渲染格子 < div class ="box" ></ div > < div > < input type ="text" value ="10" id ="num" > < input type ="button" onclick ="render()" value ="重渲染" > </ div > css： 这里我们使用ul加flex，让li平分，list-style-type:none;去除li的默认点，li:hover定义鼠标移入时的样式，定义.blue作为样式渲染 .div { height : 100% ; } .box ul { display : flex ; margin : 0 ; } .box ul li { width : 10px ; height : 10px ; border : 1px solid #000 ; list-style-type : none ; } li:hover { background-color : red

iframe跨域通信(postMessage) 前言 ❝ 跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。所谓同源是指相同的域名、协议和端口，只要其中一项不同就为跨域 ❞ 需求背景 在web项目中通过iframe嵌入另一个第三方web项目，第三方web项目里点击某个按钮要实时调用web项目的全局函数打开某个全局弹窗或者进行路由跳转，这时候两个项目存在了数据交互，显然违反了同源策略，在HTML5标准引入的window对象下的postMessage方法，可以允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递 兼容性 可以看出，iframe在各大主流浏览器中，除低版本IE浏览器外,其他浏览器的支持度良好 语法 具体介绍可戳这里前往 MDN ，这里通俗地解释一下每个参数 otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow：目标窗口（你想发送跨域消息的那个窗口），例如：iframe.contentWindow message 将要发送的数据 targetOrigin 目标窗口的地址（URL），或者字符串'*'表示无限制、任何URL都允许发送 transfer：可选参数，高级用法，这里不作讨论

Flex 是 CSS3 推出的一种布局方式，至今有超过十年时间了 要实现 Flex 布局很容易，只需要给一个元素的 display 属性设置为 flex 就行 .box { display: flex; } 咋看之下好像没什么变化，那是因为受到影响的其实是其内部的元素，给这个容器内添加几个元素就可以看到效果 <div class="box"> <div class="item-1">1</div> <div class="item-2">2</div> <div class="item-3">3</div> </div> 可以看到的是默认情况下应该独占一行的 <div> 元素现在全部挤在了一行，这就是 flex 的效果，也就是说只要一行代码就实现了 flex 布局，不愧为大神级理解 flex-direction 简单的说，布局其实就是一个怎么摆放的问题，内部那些元素既然可以摆成一行，当然也可以摆成一列，只需要向容器添加一个 flex-direction 属性，就能改变内部元素的摆放方向 .box { flex-direction: column; } 当其值为 column 的时候即为按列，而之前的默认值是 row ，一旦确定了摆放方向后，则该方向成为 flex 的主轴，用箭头来表示就像这样 flex-direction: row flex-direction: column

感谢平台分享- http://bjbsair.com/2020-04-10/tech-info/53349.html 1.说明： 1.1 推荐指数：★★★★ 1.2 熟悉html的css3相关知识，展现python的强大和matplotlib高级作图法，熟悉相关编程知识和思维。 1.3 本解析通俗易懂，适合任何人士，代码本人亲测过，建议python3.8、微软vscode编辑器和谷歌浏览器使用。 1.4 有点长，适合收藏，慢慢玩。 比较真实的音乐音效动画 2 先说python的matplotlib法 2.1 代码： #---导出模块--- from mpl_toolkits.mplot3d import Axes3D import matplotlib.pyplot as plt import numpy as np #---定义画布大小、颜色、布局--- #fig,ax=plt.subplots() #等同于下面，建议采用下面这种方式 fig = plt.figure(figsize=(22,14),facecolor='black',edgecolor='white') ax=fig.add_subplot(111, projection='3d',facecolor='black') #--定义3d坐标轴的z和x，y--- z=[30] x = np.arange(10)

完整效果演示 首先完成这个伪搜索框 src/components/search/index.vue （通用搜索框组件） <template> <div class="mine-search-box-wrapper"> <i class="iconfont icon-search"></i> <div class="mine-search-box" v- if ="fake">{{placeholder}}</div> < input class ="mine-search-box" type ="text" title ="搜索框" :placeholder ="placeholder" ref ="input" v -model="query" v - if ="!fake" > < i class ="iconfont icon-close" v -show="query" @click ="reset" ></i> </div> </template> <script> import {debounde} from 'assets/js/util' ; export default { name: 'Search' , props:{ // 接收的参数 placeholder:{ type:String, default :'请输入搜索内容' }, fake:{ type

❝ 文章每周持续更新，「三连」让更多人看到是对我最大的肯定。可以微信搜索公众号「 后端技术学堂 」第一时间阅读（一般比博客早更新一到两篇） ❞ 最近在知乎经常被邀请回答类似如何学习C++和C++后台开发应该具体储备哪些基础技能的问题。 本身我从事的的C++后台开发的工作，目前在鹅厂从事软件开发工作，所以写这篇文章，分享自己的C++后台开发学习路径和点过的技能树，希望能给想从事后台开发的同学一点参考，若能帮你少走些弯路就更好。 工欲善其事必先利其器，好的书籍能让学习事半功倍，所以每个技能点之后我会推荐一些书，都是我读过且口碑不错的书，供参考。 文末可以获取学习路线资源，需要的同学自取。 「 分享的是我的学习路径，如果你也能顺着这个学习路径认真学一遍，我想在后台开发技术上你已经有一个很不错的技术积累，加上项目练习通过大部分大厂面试是没有问题的。 」 计算机基础综合 考过CS或者软件工程研究生的同学可能对这个标题不陌生，是的，我说的就是专业课代号408的 「 计算机基础综合 」 。这门专业课包含：数据结构、计算机组成原理、计算机网路、操作系统。 为什么提起这门课程呢，因为基础知识太重要了！这是科班区别于培训班的最大不同，理论知识不一定马上能用于项目上，但当与人讨论起某个技术问题时你能够知道它深层次的原因，看问题的角度会更加全面和系统。 打个比方，你可能听过堆栈的名词

“ 我只给出数据分析和挖掘，不管看多看空，最起码要心里有数。 ” 01 需求侧情况 商品房销售情况 过去三年一年不如一年啊，卖的不好，还是购买力不够？今年的1-2月，惨不忍睹。 办公楼销售情况 已经凉了两年多了，办公楼卖不出去，说明很多需要租用办公楼的微小企业不行了。 商业营业用房销售情况 也凉了两年多了，一个店面养三代人？我看三代人养一个店面差不多。商业店铺卖不出去，说明很多个体户不行了。 02 供给侧情况 销售是房地产利润的来源的，没有利润，就没法扩大生产。利润不行了，必然反应到房企的买地和投资上。 房企土拍情况 一年不如一年，去年一整年房企拿地都很谨慎，买了就必须确保能卖出去，所以土地成交额越来越低。 房企开发资金来源情况 这张图要仔细看下。房企自身上年资金结余增长越来越少了。资金不够，只能去去借钱，国内借钱、国外借钱。国内由于政策，对房企贷款从17年也越来越少。只有外资还能贡献些，然而外资贡献很不稳定，贸易战或者汇率一波动，外资很容易出逃，不可依赖。比如由于疫情，美元失去流动性，大量外资回流美国。 03 房企破产 数量太多了，数了下。 2020 1-3月，大概有110家。2019 年是400多家。 有兴趣的可以到这看看： 最新公告 - 人民法院公告网 ​ rmfygg.court.gov.cn 结论我就不下了，今年的金三银四过半了，不知道四月份表现如何？ 不管要做何决定

3 月，跳不动了？>>> 控件说明 底部工具栏控件。 效果演示 其他效果 该界面为仿淘宝UI制作的一个简单的UI模板，源码获取方式请拉至文章末尾。 特色属性 属性 属性说明 Direction（相对布局） 容器主轴方向。 Flex（相对布局） 比例因子。 Items 工具栏项集合。 SelectBackColor 选中后背景颜色。 SelectedIndex 默认选择项。 SelectForeColor 选中后字体颜色。 FontSize 字体大小。 ForeColor 字体颜色。 事件 事件 事件发生条件 ToolBarItemClick 工具栏项点击时发生。 控件使用 下文的教学内容仅针对【效果演示】中的例子 1. 设置工具栏数据 2. 设置工具栏ToolBarItem消息数 3. 设置默认选中项、选中项背景色和文字颜色 4. 在事件中，用e.Name判断当前点击按钮，来进行对应操作 C#： private void toolBar1_ToolbarItemClick( object sender, ToolbarClickEventArgs e) { switch (e.Name) { case " Work " : // 按钮名称 break ; } } 仿淘宝UI的源码 该源码通过基于.NET的Smobiler移动开发平台开发完成， 该源码适用Smobiler用户。