FLEX

BFC是什么？ 对于刚学习html、css的小白来说，这个概念很模糊，在一些前端的面试题中经常被提起，为什么人们经常理解不了？ 从名字中，只能看出“块”、“格式化”、“上下文”，那么它到底有扫描作用，我们还是一无所知的，格式化上下文？可能是对上下文起作用的吧。 从名字中我们，我们只能知道是一个功能，对html文档起作用。 官方解释 MDN： 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 下列方式会创建块格式化上下文： 根元素（） 浮动元素（元素的 float 不是 none） 绝对定位元素（元素的 position 为 absolute 或 fixed） 行内块元素（元素的 display 为 inline-block） 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值） 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值） 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody

目录介绍 01.遇到问题汇总 02.关于布局设置 03.基础语法总结 04.关于交互问题 06.关于回传数据 07.关于网络请求 08.关于页面刷新 09.关于注意问题 10.待解决和思考 01.遇到问题汇总 在我的页面，给item设置分割线时，定义view的class为line出现问题，但是把名称修改成cell-line就可以。猜想可能是设置class名称时，用line有冲突。 从A页面跳转B页面，关闭B返回到A，如何回传数据？看了往上方案，发现都有问题，最后用存取值替代。 比如切换页面布局视图刷新时，我的页面登陆，未登陆，会员，使用v-if替代v-show方式刷新页面。 网络请求，在学员信息页面，使用post提交数据，需要设置header请求头，否则会出现请求异常 数据绑定，比如动态改变view的背景颜色，建议用class设置替代style设置 在data中给字段赋值，建议赋值方式是''字符串，即使是整型。比如使用sex : "3"替代sex : 3 当父，子等多层控件都有点击事件的时候，为了避免冒泡事件冲突，可以加上@tap.stop阻止冒泡事件 图片引入，设置相对路径有时不生效，这是为什么？根据柯佳的规范文档，建议url的引入规则使用绝对路径 在省市区地区控件中，即使给scroll-view的父view设置了高度，仍然要给scroll-view设置高度，不然会撑满页面 02

垂直居中的方案 弹性盒 display:flex align-items:center justify-content:center translate position: absolute top: 50% left: 50% transform: translate(-50%,-50%) 相对定位 position: absolute top/right/bottom/left:0 margin:auto table+vertical-align display: table-cell vertical-align: middle 清除浮动和BFC 清除浮动原理 清除浮动代码 .clearfix:after{ content: '' ; diaplay:block; clear:both } //兼容ie低版本 .clearfix{ *zoom:1 } 复制代码 主要属性=> clear:both 规定在左右两侧不允许浮动元素 display:block clear只能在块级元素上起作用 visibility:hidden/height:0 只要content的值为空，写不写都无所谓 BFC定义 块级格式化上下文，是一个独立的渲染区域 让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 触发BFC条件 根元素 position: absolute

老孟导读：Flutter中有这么一类组件，用于定位、装饰、控制子组件，比如 Container (定位、装饰)、 Expanded (扩展)、 SizedBox (固定尺寸)、 AspectRatio (宽高比)、 FractionallySizedBox (占父组件比例)。这些组件的使用频率非常高，下面一一介绍，最后给出项目中实际案例熟悉其用法。 【Flutter实战】系列文章地址： http://laomengit.com/guide/introduction/mobile_system.html Container Container 是最常用的组件之一，它是单容器类组件，即仅能包含一个子组件，用于装饰和定位子组件，例如设置背景颜色、形状等。 最简单的用法如下： Container( child: Text('老孟'), ) 子组件不会发生任何外观上的变化： 设置背景颜色： Container( color: Colors.blue, child: Text('老孟'), ) 设置内边距( padding ) 和 外边距( margin ) Container( color: Colors.blue, child: Container( margin: EdgeInsets.all(10), padding: EdgeInsets.all(20), color: Colors

原文地址： canvas图形编辑器 使用canvas进行开发项目，我们离不开各种线段，曲线，图形，但每次都必须用代码一步一步去实现，显得非常麻烦。有没有一种类似于PS，CAD之类的可视化工具，绘制出基本的图形，然后输出代码。之后我们就可以在这个生成的图形场景的基础上去实现功能，那将是多么的美妙的事啊。话不多说，我们来实现一个图形编辑器吧😂。 主要实现如下的功能： 直线(实线、虚线) 贝塞尔曲线(2次，3次) 多边形(三角形、矩形、任意边形) 多角星(3角星、4角星、5角星...) 圆形、椭圆 实际效果: drawboard(推荐在chrome或safari下运行) 功能点包括： 所有的图形都可以拖拽位置，直线和曲线需要拖拽中点(黄色圆点)，其他图形只需要把鼠标放于图形内部拖拽即可； 所有的图形只要把鼠标放于中心点或图形内部，然后按delete键即可删除； 线段可以实现拉伸减少长度，旋转角度； 贝塞尔曲线可以通过拖拽控制点实现任意形状的变化； 多边形可以拖拽控制点控制多边形的旋转角度和大小变化，所有顶点都可以拖拽； 多角星除了多边形的功能外，拖拽第二控制点可以实现图形的饱满程度； 是否填充图形，是否显示控制线，是否显示背景格； 生成代码。 使用方式： 选中工具栏中的图形选项，是否填充，颜色等，然后在画板拖动鼠标，同时选中的工具栏中的选项复位，此时为绘图模式； 完成绘制图形后

flex布局 任何一个容器都可以指定为flex布局 当父盒子设为flex布局后，子元素的float、clear、vertical-align属性将失效 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 采用flex的元素，称为Flex容器（flex container）简称”容器“。 它的所有子元素自动成为容器成员，成为Flex项目（flex item）简称“项目” 启用flex布局：给标签加上样式：display:flex; 如果没有设置，是没有flex布局的！！！！！ 常见的父项属性： 1、flex-direction设置主轴方向 flex布局，分为主轴和侧轴方向也称行和列、x轴和y轴 默认主轴方向就是x方向，水平向右 默认侧轴方向就是y方向，水平向下 元素跟着主轴排列 属性值：row：默认，为水平方向,相当于float:left row-reverse：水平反方向，相当于float:right，即从右到左 column：垂直方向，即从上到下 column-reverse：垂直反方向，即从下到上 2、justify-content 设置主轴上的子元素排列方式 使用该属性之前一定要确定好主轴方向 属性值：flex-start：默认值，从头部开始，如果主轴是x轴，则从左到右；如果主轴是Y轴，则从上到下 flex-end：从尾部开始排列，如果主轴是x轴，则子元素贴着右边

// pages/test/test.js Page({ /* * * 页面的初始数据 */ data: { headerList: [{ name: '表头一' , number: 'A201' , type: "标准间" }, { name: '表头二' , number: 'A202' , type: "大床" }, { name: '表头三' , number: 'A203' , type: "标准间" }, { name: '表头四' , number: 'A204' , type: "大床" }, { name: '表头五' , number: 'A205' , type: "标准间" }, { name: '表头六' , number: 'A206' , type: "大床" }], list: [ { date: "05-12" , num: 4 , week: '周一' , children: [{ number: 'A201' , name: '测试' , money: '360' }, { number: 'A202' , name: '测试' , money: '360' }, { number: 'A203' , name: '测试' , money: '360' }, { number: 'A204' , name: '测试' , money: '360

Python爬取网页信息的步骤 以爬取英文名字网站（https://nameberry.com/）中每个名字的评论内容，包括英文名，用户名，评论的时间和评论的内容为例。 1、确认网址 在浏览器中输入初始网址，逐层查找链接，直到找到需要获取的内容。 在打开的界面中，点击鼠标右键，在弹出的对话框中，选择“检查”，则在界面会显示该网页的源代码，在具体内容处点击查找，可以定位到需要查找的内容的源码。 注意：代码显示的方式与浏览器有关，有些浏览器不支持显示源代码功能（360浏览器，谷歌浏览器，火狐浏览器等是支持显示源代码功能） 步骤图： 1)首页，获取A~Z的页面链接 2)名字链接页，获取每个字母中的名字链接（存在翻页情况） 3)名字内容页，获取每个名字的评论信息 2、编写测试代码 1)获取A~Z链接，在爬取网页信息时，为了减少网页的响应时间，可以根据已知的信息，自动生成对应的链接，这里采取自动生成A~Z之间的连接，以pandas的二维数组形式存储 1 def get_url1(): 2 urls= [] 3 # A,'B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z' 4 a=[ ' A ' , ' B ' , ' C ' , ' D ' , '

作者 | 好学习吧丶 责编 | 郭芮 手机市场日渐丰富的同时，给我们前端开发人员带来的 “网页内容自适应屏幕尺寸进行显示的问题” 也日渐凸显出来，接下来我们就要细说移动端适配的前世今生及方案。 为什么要移动端适配？ 一般情况下设计稿的设计师按照 375 的尺寸设计，然而，在现在移动终端（就是手机）快速更新的时代，每个品牌的手机都有着不同的物理分辨率，这样就会导致，每台设备的逻辑分辨率也不尽相同，此时 375 的设计稿，如果想要还原那基本是不可能了，因为如果一个左右布局，左边如果写死，右边自适应的话，每个设备的右边所展示的内容大小就不尽相同，这时移动端适配就显得尤其重要。 既然要了解前世今生，我们就从几个概念说起，先上一张图。 下面我们一个个解析。 1.1 屏幕尺寸 屏幕尺寸是以屏幕对角线的长度来计量，计量单位为英寸。 如图所示两个对角线的长度就是这个屏幕的尺寸： 1.2 像素 我们看到上图 320x480 叫分辨率，而这个所谓的分辨率说白了就是横向320个像素纵向480个像素组成 1.2.1 什么叫像素呢？ 像素（Pel, pixel, pictureelement），为组成一幅图像的全部亮度和色度的最小图像单元。电视的图像是由按一定间隔排列的亮度不同的像点构成的，形成像点的单位也就是像素，组成图像的最小单位就是像素。从计算机技术的角度来解释，像素是硬件和软件所能控制的最小单位

发现了一个之前未留意的知识点，做个笔记。 当一个块级元素的父元素开启了flex布局后，我们可以很轻松的将这个元素居中对齐，可以在父元素上加 justify-content: center; align-items: center;/*单行下的居中对齐*/ 　或 justify-content: center; align-content: center; flex-wrap: wrap;/*多行下的居中对齐*/ 　然而，这种对齐方式是基于父元素开启了flex布局方式，假设该子元素开启了固定定位后，这种对齐方式便会失效，因为固定定位脱离了文档流，不受父元素的影响，父元素内对子元素的定位方式自然就不起作用了，那么问题来了：能否将这个固定定位的盒子居中显示呢？ 方法是人想出来的。 在这里，我们可以结合css3和百分比定位达到目的： .search_box { position: fixed; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100%; max-width: 540px; min-width: 320px; /* 固定定位，脱离文档流 */ height: 44px; /* 通过与left配合，使这个div居中显示 */ } 　　第一步