* 早期以table为主(简单) * 之后 以技巧性的布局为主(难) * 现在有flexbox/grid(偏简单) * 响应式布局 在移动端大行其道的时代 是必备的 * table表格布局 * float...Flexbox * flexbox是有弹性的，可伸缩的 * flexbox本身就是 可以并列的 * 可以指定 宽度 使用float布局 * 元素设置float后，元素就脱离了文档流，但是不会脱离文本流。...float+margin 实现两列布局 1. div1 左浮动：给出左侧的空间 2. div2 的margin-left留出 div1 的宽度. + overflow: hidden;也变为BFC块，和...float+margin 实现三列布局 1. div1 左浮动：给出左侧的空间 2. div2 右浮动：给出右侧的空间 3. div3 的margin-left margin-right 分别留出 div1...* 让页面 在不同的设备上 能正常的使用 * 主要处理的是 屏幕大小的问题(严格来讲 还涉及到 是否有鼠标 是否是读屏软件 是否支持一些样式) * 在具体的方法上 涉及到 设计 和 实现 两方面。
版权声明：如需转载本文章，请保留出处！...https://blog.csdn.net/xc_zhou/article/details/88992599 理论上来说， MySQL 已经被Oracle 收购， 这两者之间的Migrate 应该比较容易...， 但实际的迁移还是有一些问题 使用工具Navicat Preminum 进行导入（我使用的是12版本的） 方法1： 在MySQL里Ctrl +C 复制一张表，到orcale里 Ctrl+ V 复制，
缺点就是，容器脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，这就导致了这种方法的有效性和可使用性是比较差的。 3.flexbox 布局 <!...通过设置父容器的 padding-left 和 padding-right，让左右两边留出间隙。 ? 通过设置相对定位，让 left 和 right 部分移动到两边。 ?...1.利用背景图片 这种方法是我们实现等高列最早使用的一种方法，就是使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假象。...在制作样式之前需要一张类似下面的背景图： ?...这种方法是使用边框和绝对定位来实现一个假的高度相等列的效果。
先在caniuse上查查兼容性，兼容性如下图(2021-11)： display:flow-root 如果不需要考虑 IE 浏览器，那么可以在项目中使用。...注意：在元素上使用 target="_blank" 隐式提供了与使用 rel="noopener" 相同的 rel行为，即不会设置 window.opener。...flex 的基本概念 Note 组件中使用了flex-none的样式，这里参考MDN文档整理下flex的基本概念。 Flexible Box模型，通常被称为flexbox，是一种一维的布局模型。...这也是为什么flexbox的很多属性都是使用的start和end，而不是左和右。 flex容器中的直系子元素就会变为 flex 元素。...包括以下几个属性： 「stretch」（默认值） flex-start flex-end center 零宽字符 在骨架组件中，使用了来填充div元素。经查，该字符表示零宽字符。
css3 Grid Layout 表格布局是在css中强大的难以置信的布局模块。它是二维空间的，所以它可以处理行和列 它有些类似于Flexbox，但是又有本质的差别。...Flexbox同样很强大，但是它主要是一维空间的。Flexbox可以处理列或者行，Grid可以同时处理两者。...综合运用它们，可以帮助我们在css中实现在之前无法想象的布局 基础知识 1、定义表格容器 Grid 布局的开始都是开始于创建一个布局容器，可以通过在父元素声明display:grid;。...如果我们想要在表格子元素之间插入一些空格，我们应该怎么做呢？grid-gap就是做这个的。...使用auto-fill，Grid 创建尽可能多的子元素放置在容器内。所以当没有这么多元素的时候，会在后面留下一块空白。这在某一方面很实用，但是有时候我们并不想留下这么多空白，比如card布局。
如果团队没有一套统一的编码规范，在项目的后期维护上会消耗巨大的人力和时间等资源。...注释规范：块状注释、单行注释、行内注释 块状注释要统一缩进，并且标注在特定对象的上方；单行注释的文字两端需要留出空格（防止注释编码导致注释关闭符失效），也要标注在特定对象的上方；行内注释的文字两端需要留出空格...书写规范：单行多行、空格分号、属性顺序、Hack 方式、值格式 单行多行，CSS 的单行多行各有利弊；空格分号，CSS 多行书写必须缩进，单行书写在属性名冒号和结尾分号之后加入空格，每一条规则都要以分号结尾...；属性顺序，先写显示顺序，后写盒模型相关属性，文本属性，修饰属性；Hack 方式：统一各种浏览器的 Hack 方式；值格式：比如 color 属性的取值使用十六进制格式，url 属性的值是否带单引号或双引号...其他规范：HTML 规范、图片规范 HTML 的文档声明，使用 H5 的标准声明，遵循 XHTML 规范闭合标签，标签属性名用双引号还是单引号；标签缩进，正确的分层；标签和属性均小写；资源文件具有语义性
代码地址：https://github.com/hjptriplebee/Chinese_poem_generator， 欢迎fork， star 机器人命名MC胖虎，目前只是最简单粗暴的方法，使用tensorflow...LSTM的原理网上资料很多，不了解的可以看这里：http://www.jianshu.com/p/9dc9f41f0b29 本文以讲解写诗机器人实现为主，不会讲太多理论和tensorflow使用方法，好下面开始...训练数据预处理 采用3w首唐诗作为训练数据，在github上dataset文件夹下可以看到，唐诗格式为”题目：诗句“，如下所示： ?...排序后的ID从一定程度上表示了字的出现频率，两者之间有一定关系，比不排序直接映射更容易使模型学出规律。 添加空格字符，因为诗的长度不一致，需要用空格填补，所以留出空格的ID。...因为补的都是空格，所以模型可以学出这样一个规律：空格后面都是接着空格。X和Y分别表示输入和输出，输出为输入的错位，即模型看到字得到的输出应该为下一个字。 这里注意一定要用np.copy，坑死我了！
在小写字母中，底部的符号通常是通过点击该键获得的，而顶部的符号通常是通过按住Shift键获得的(也就是说，首先按下Shift键，然后点击相应的键)。...1.在输入中文之前，您必须先选择法语输入法。2.不要使用中文特有的标点符号，如暂停(，)等。不要使用中文句号。。...3、).3.标点和空格a)句号、逗号、感叹号和问号后面留有空格；b)句尾的句号、感叹号和问号也应该是空的，这样可以避免修改过程中的错误；c)在括号和引号前后留出一个空格；在冒号前后留一个空格。...但是，办公室会自动留出冒号前的空间，所以操作时只需要注意冒号后的空间；e)保存不带空格的注释和连字符；f)输入文本时，打开“显示/隐藏编辑标记”功能，可立即检查空格、制表位等。...(如果在外语内容中使用“宋式”或“仿宋式”，这是奇怪和不自然的，例如：CETE大学。)4.合理使用标尺、制表位、对齐、项目符号、多级列表等工具。以达到压痕、对齐和居中的效果。
不像 flexbox 那样的一维系统，它是一个二维系统，可以同时处理列和行。您可以通过将规则应用到父元素来使用 Grid Layout。...跟 Flexbox 相似，网格项的顺序无关紧要。您的 CSS 可以将它们任意排序，使用媒体查询来重排布局也非常容易。...您可以使用任意数量的相邻句点来声明单个空单元格。只要它们之间没有空格，它们就代表一个单元格。 请注意，您没有使用此语法命名行，而只是命名了区域。使用此语法时，区域两端的线条实际上会自动命名。...，在远端放置半个大小的空格 space-between - 在每个网格项之间放置一个偶数空间，在远端没有空格 space-evenly - 在每个网格项之间放置一个均匀的空间，包括远端 .container...，在两端放置半个大小的空格 space-between - 在每个行网格项之间放置一个均匀的空间，两端没有空格 space-evenly - 在每个行网格项之间和两端放置一个均匀的空间 .container
由于flexbox是单维度布局，所以在进行反转时，项目从下到上进行排列（对于行方向），但保持左右结构，只改变了交叉轴。...但是如果你希望在子div 之间有一个间隙，它们就不会按照你想的那样换行： ? 这个小麻烦这可以通过 CSS 函数 calc()来解决： ? ? 为了消除容器边缘的空间，可以在容器上使用负边距： ?...在Flexbox中，沿着轴的项目对齐和空间分布可以受到四个属性的控制： justify-content: 对齐主轴中的所有项目 align-items: 对齐交叉轴中的所有项目 align-self:...这是作用在 flex 容器的四个属性中的最后一个，align-content在交叉轴中的弹性线之间分配空格。...使用 Gulp能够替你自动执行这些任务。 为了能够使用Gulp，我们必须将它作为依赖添加到项目当中。 这项工作是在 package.json文件中完成的，它负责跟踪项目依赖及其版本。
（必须承认，网格布局正在大多数现代浏览器中快速得到支持，不过对flexbox的支持仍然更为广泛，所以如果你想让你的布局在稍微老旧的浏览器中也生效，使用flexbox作为网格布局的降级方案是很容易的）。...因此，你可能需要把三个元素都设置为统一的高度，或者使用某种黑科技。 让flexbox来救场吧。 让我们Flex flexbox的要点是出现在display属性上的flex值，它需要被设置在容器元素上。...例子flexbox-demo-4.html。 如果想要容器中所有的元素有统一的对齐方式，你可以在容器上使用align-items。...例如，在之前你一直使用的简单HTML模板里，你可以在里找到三个元素：，.content和。之前，它们都被挤在页面的左边。...例子在flexbox-demo-6。
在整理的过程中，竟然发现以前理解的一些东西是错误的。 写给自己的flex笔记 关于flex是我之前一直用的布局，由于浏览器的限制，我每次写都要查询兼容模式。...另外，注意flex换行之后，如果设置了justify-content:space-between;，元素之间就会自动留出相同的空隙，并且头尾紧贴。...代码链接点击这里~ 可以参考的flex文章： 阮一峰老师的 a guide to flexbox CSS 伸缩盒布局模组(W3C) rem的计算方式 搞定了布局，我开始思考用什么单位。...他的原理，简单的说就是在html上设置字体，然后整个页面的字体基准就是来自于html的字体大小，也就是说所有的参照物都是一个，这样方便计算。...当然在使用之前，我还是先查了一波canIuse，发现支持率还不错，可以放心地用了。 ? 这个语法很简单，但是可以有很多玩法。
标题和段落会另起新的一行，单词组成句子时，它们之间有一个空格。标记是用来格式化的，像 em 不会破坏句子的流。 句子会表现标准流，或块流布局。...在MDN上，您可以深入了解 盒对齐 及其在Grid，Flexbox，多列和块布局中的实现方式。...在Smashing Magazine上，我有一篇文章专门介绍Flexbox中的对齐方式：你需要知道的有关Flexbox中对齐的所有内容。...尺寸 我在2018年花了很多时间讨论了内部和外部尺寸规范，特别是它与Grid和Flexbox的关系。在web上，我们习惯于设置尺寸为长度或百分比，这就是我们如何使用浮动来制作网格类型布局的方法。...使用速查表作为回忆，而不是学习工具 当我提到Grid或Flexbox资源时，我经常看到回复说，如果没有特定的速查表，他们就不能使用Flexbox。
RN布局与样式 布局 一款好的App离不开漂亮的布局，RN中的布局方式采⽤的是FlexBox(弹性布局) 。...经典资料参考：阮一峰flex 布局语法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html FlexBox提供了在不同尺⼨设备上都能保持一致的布局...在移动端，在这里不必担心兼容问题。...SafeAreaView 会自动根据系统的各种导航栏、工具栏等预留出空间来渲染内部内容。更重要的 是，它还会考虑到设备屏幕的局限，比如屏幕四周的圆⻆角或是顶部中间不可显示的“非安全”区域。...在Text内部的元素不再使⽤flexbox布局，而是采⽤用文本布局。这意味着内部的元素不再是】一个个矩 形，而可能会在行末进⾏折叠。
这种行和列的思路完美对应了 CSS 中两种布局技术：Flexbox 和 Grid。 当然了，我们的示例布局并不是中规中矩的行列。它有一张图片镶嵌在左侧，其他元素排列在右侧。... 其实，每个 HTML 元素的名称都有其特定含义，在不同场景中恰如其分地使用语义上与它们所表示的内容匹配的元素，是很好的语义化实践。...（之所有没有出现两个空行，是因为 HTML 合并了相邻的空行，与相邻空格同理。）...有些情况你甚至会同时使用二者 —— 例如 Grid 布局排布整体页面，而 Flexbox 布局调控页面中的一个表单。...在 Flexbox 布局中，你可以用 justify-content 属性来实现对齐。
甚至苹果官方在iOS9的时候推出的UIStackView，采用的也是FlexBox思路来实现布局的。...Flexbox比AutoLayout提供了更多、更规范的布局方法，且更容易使用，而且苹果推出的使用Flexbox布局思路的UIStackView，我们也是需要去了解一下的。...在现在跨端方案越来越火热的时刻，势必要使用一种通用的布局思想。...目前我的工程还是纯原生开发，因此不能使用ReactNative或者Weex来体验Flexbox布局，不过倒是可以使用Texture来通过flexbox思路进行页面布局。...基于以上几点，本人倾向于在项目中使用Flexbox布局。 2，如果你目前使用的是RN、Weex等，那么恭喜你已经在使用Flexbox布局。
元素内的行内元素 在元素上加 text-align:center; 宽度固定的块级元素 在元素上加 width: 宽度值; margin-left: auto; margin-right: auto;...这样做是为了去除子元素间的空格的占位 子元素设置display:inline-block; 方法2 需要通过以下几个步骤 让元素的宽度变为所包含元素的内容。可以用浮动或绝对定位。...样式为 #no-sure-width-2 { list-style: none; position: absolute; left: 50%; /* 用下面的两个样式 和使用...还可以使用CSS3的flexbox，transform等方式来实现水平居中。但使用这些CSS3特性来做居中时，要注意下兼容性。 详细描述和更多实现见六种实现元素水平居中
flexbox是什么 即使不知道视窗大小或者未知元素情况之下都可以智能的、灵活的调整和分配元素和空间两者之间的关系。简单的理解，就是可以自动调整，计算元素在容器空间中的大小。...使用flexbox 要开始使用flexbox，必须先让父元素变成一个flex容器，而此时子元素就变成了flex项目。...可以在父元素中设置display:flex或者display:inline-flex。这样一个flexbox格式上下文就启动了。 html结构 <!...flex-wrap || flex-flow || justify-content || align-items || align-content 当父元素设置为一个flex容器后，这几个属性可以直接使用在...可以看出flex项目的宽度就是由内容撑开，而使用flex-basis: 150px;这样flex的宽度就被设置为了固定的150px; flex连写 flex是flex-grow、flex-shrink、
所以今儿前来总结一个精华干货贴，回顾那些楼主在项目里用过的flexbox，来谈谈那些不用苦恼“兼容”的flexbox最佳实例（本文只聊移动端）。...Part1 先聊聊历史： 在2009年最早版本的Flexbox规范中，我们编写为“display:box;”， 中期版本的Flexbox；我们编写为“display:flexbox;” 而目前的规范版本...flexbox规范的制定可谓是艰辛百 变， 但目前使用的最新版本草案已于今年3-1日正式进入W3C的候选推荐标准（Candidate Recommendation）阶段，这也就意味着关于flexbox的最终规范即将落地...★重点兼容TIPS: 在旧版的规范中，使用比例伸缩布局时，子元素的内容长短不同会导致无法“等分”，这个时候，我们需要给子元素设置一个“width:0%”来解决问题。 ...使用传统的flxed写法总是会给一些安卓机带来无法避免的烦人bug。其实只要巧妙利用flexbox的转换方向的属性，就可以轻松实现这个结构模型了。
领取专属 10元无门槛券
手把手带您无忧上云
