如果是两个值,那么 top-left和bottom-right相等,为第一个值,top-right和bottom-left值相等,为第二个值。...如果是三个值,那么第一个值是设置top-left,而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。...: //右下角 border-bottom-left-radius: //左下角 分别是水平方向和竖直方向半径,第二值省略的情况下,水平方向和竖直方向的半径相等 文本属性 white-space:空格、...对象中的内容在水平方向上从左向右流入,后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的(IE) tb-rl:上-下,右-左。对象中的内容在垂直方向上从上向下流入,自右向左。...后一竖行在前一竖行的左面。全角字符是竖直向上的,半角字符如拉丁字母或片假名顺时针旋转90度。
在wxss中首先用display:flex 将view容器变成一个弹性盒子,但是弹性盒子默认的主轴方向是从左往右所以每个元素都是从左往右的放置。根据自己的需要修改主轴的方向。...这里以从上往下的主轴方向,垂直方向上均匀分布,元素在水平方向上居中显示为例。在wxss用flex-direction:column来实现从上到下的布局。...下面是用两个弹性盒子(一个是垂直方向,另一个是水平方向)布局的案例代码: 表3.1.wxml代码 ...wrap:换行,第一行在上方 wrap-reverse:换行,第一行在下方。...flex-end:与交叉轴的终点对齐。 center:与交叉轴的中点对齐。 space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。 space-around:每根轴线两侧的间隔都相等。
因此,最常见的清除浮动的hack方案是:在容器内添加一个CSS伪元素,并将其clear属性设置为both: 「效果如下:」 可以看到红色的div向上偏移了50px,但它原本所占的空间不会改变,所以可以看到有50px的空白部分。...space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 stretch(默认值):轴线占满整个交叉轴。 4.4项目的属性 以下6个属性设置在项目上。...上图中,1号项目后面的位置是空的,这是因为3号项目默认跟着2号项目,所以会排在2号项目后面。 现在修改设置,设为row dense,表示"先行后列",并且尽可能紧密填满,尽量不出现空格。
Flex 布局有时候会用到,但是始终分不清楚其中的部分属性及其含义,所以用这篇博客专门总结一下 Flex 布局。...属性名 作用 nowrap(默认) 不换行 wrap 换行,第一行在上方 wrap-reverse 换行,第一行在下方 图示说明 CSS代码 .box { flex-wrap: nowrap...每根轴线两侧的间隔都相等。...当给子元素的 flex-grow 属性值设置为一样时,表示平均分配这个方向上的宽度(高度),可以利用这点来给元素做等宽布局。...简单应用 其中最直观的应用就是将一个元素进行垂直水平方向的居中,且不管页面变化,依然能够生效。
column-reverse:从下到上的垂直方向为主轴 设置元素在横向上的布局方向,需要设置 justify-content 属性,它有5个值可选: flex-start:主轴起点对齐(默认值) flex-end...:主轴结束点对齐 center:在主轴中居中对齐 space-between:两端对齐,除了两端的子元素分别靠向两端的容器之外,其他子元素之间的间隔都相等 space-around:每个子元素之间的距离相等...,两端的子元素距离容器的距离也和其它子元素之间的距离相同 设置元素在纵向上的布局方向,需要设置 align-items 属性,它有5个值可选: stretch 填充整个容器(默认值) flex-start...侧轴的起点对齐 (这里我们手动设置下子 view 的高度,来看的明显一些) flex-end 侧轴的终点对齐 center 在侧轴中居中对齐 baseline 以子元素的第一行文字对齐 子 View...(默认) wrap:换行 wrap-reverse:换行,第一行在最下面 还有子 View 有个 order 属性,可以控制子元素的排列顺序,默认为0。
大家好,又见面了,我是你们的朋友全栈君。 查看API文档,我们就知道GridBagConstraints有十一个属性!...现在,提供本人对这些属性的理解: 1, gridx: 表示组件的左边缘与网格左部之间的距离,如果学过HTML的话,那么gridx就 相当于HTML 里面的leftmargin属性。...3, ipadx: 表示组件在默认的大小上,往水平方向上再加上多少像素的大小! 4, ipady: 表示组件在默认的大小上,往垂直方向上再加上多少像素的大小!...所以,我们在设计这种布局方式前,可以先在纸上画一下每个组件的大概位置,然后保证每一行的长度(即每一行的gridwidth之和)都相等,且每一列的长度(即每一列的gridheight之和)也相等,这样,就能按我们要的蓝图而得到实现...另外,有些属性是要跟另外一些属性搭配着用的,只有把相联系的属性都做了相应的修改,我们才能看到变化!比如说上面所说到的gridwidth与gridheight必须与fill属性联合起来用才能看到结果!
主轴由 flex-direction 定义,另一根轴垂直于它。 flexbox 的特性是沿着主轴或者交叉轴对齐之中的元素。 flexbox 不会对文档的书写模式提供假设。 1.3.1....第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。 flex-end:所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。...center:所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。...space-between:所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。 space-around:所有行在容器中平均分布,相邻两行间距相等。...容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 stretch:拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。
(2)wrap:换行,第一行在上方。 ? (3)wrap-reverse:换行,第一行在下方。 ?...所以,项目之间的间隔比项目与边框的间隔大一倍。 3.5 align-items属性 align-items属性定义项目在交叉轴上如何对齐。...space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 stretch(默认值):轴线占满整个交叉轴。 四、项目的属性 以下6个属性设置在项目上。...如果有多个项目,就要添加多个span元素,以此类推。 1.1 单项目 首先,只有左上角1个点的情况。Flex布局默认就是首行左对齐,所以一行代码就够了。 ?.../*column,主轴垂直,方向向下*/ /*flex-direction: column;*/ /*column,主轴垂直,方向向上*/ /*flex-direction: column-reverse
,其中的间隔相等 space-around 组件会平均分配在主轴方向上,两端保留一定的位置空间 alignItems 该属性确定了组件在侧轴方向上的对齐方式。...属性名 说明 nowrap(默认) 不换行 wrap 换行,第一行在上方 wrap-reverse 换行,第一行在下方 代码示例 <View style={ {flexDirection:'row-reverse...Android上时,View的长和宽被解释成:100dp 100dp单位是dp,字体被解释成16sp 单位是sp,运行在iOS上时尺寸单位被解释称了pt,这些单位确保了布局在任何不同dpi的手机屏幕上显示不会发生改变...RN的FlexBox和css的FlexBox的异同 虽然React Native中的FlexBox 和Web CSSS上FlexBox工作方式是一样的。...flex 该属性定义了一个可伸缩元素的能力,默认为0。类似于比重这么一个概念(因其位于父视图下面,所以比重相当于所占的百分比)。
大家好,又见面了,我是你们的朋友全栈君。...现在,提供本人对这些属性的理解: 1, gridx: 表示组件的左边缘与网格左部之间的距离,如果学过HTML的话,那么gridx就 相当于HTML 里面的leftmargin属性。...3, ipadx: 表示组件在默认的大小上,往水平方向上再加上多少像素的大小! 4, ipady: 表示组件在默认的大小上,往垂直方向上再加上多少像素的大小!...所以,我们在设计这种布局方式前,可以先在纸上画一下每个组件的大概位置,然后保证每一行的长度(即每一行的gridwidth之和)都相等,且每一列的长度(即每一列的gridheight之和)也相等,这样,就能按我们要的蓝图而得到实现...另外,有些属性是要跟另外一些属性搭配着用的,只有把相联系的属性都做了相应的修改,我们才能看到变化!
作战内容 JavaScript 深拷贝 深拷贝可以说是一个老生重谈的问题,几乎每一个前端面试都可能会问这样的问题。Js 中的对象都是引用,所以浅拷贝时,修改拷贝后的对象会影响原对象。...原仓库中其实讲的并不是很深入,我反倒是觉得评论里面的一篇文章深入剖析 JavaScript 的深复制讲得更好。 有很多第三方库实现了对于对象的深拷贝。...nowrap(默认):不换行 wrap:换行,第一行在上面 wrap-reverse:换行,第一行在下面 flex-flow flex-flow 属性是 flex-direction 和 flex-wrap...所以,item 之间的间隔是 item 和边框之间的两倍 align-items align-items 属性定义 items 在交叉轴上如何对齐。...:每根轴线两侧的间隔相等 stretch(默认值):轴线占满整个交叉轴 Item 的属性: order flex-grow flex-shrink flex-basis flex align-self
2.2概念间垂直方向上的区隔方法和方法之间,可以通过空行隔开,方法内部,也可以根据具体的业务逻辑通过空行隔开看一个例子public class BoldWidget extends ParentWidget...= new StringBuffer(""); html.append(childHtml()).append(""); return html.tostring();}}2.3 垂直方向上的靠近如果说空白行隔开了概念...所以,紧密相关的代码应该互相靠近。注意代码清单5—3中的注释是如何割断两个实体变量间的联系的。...横向格式一行代码字符上限是1203.1水平向上的区隔与靠近参数之间通过空格隔开、另一方面,我不在函数名和左圆括号之间加空格。这是因为函数与其参数密切相关,如果隔开,就会显得互无关系。...乘法因子之间没加空格,因为它们具有较高优先级。加减法运算项之间用空格隔开,因为加法和减法优先级较低。不幸的是,多数代码格式化工具都会漠视运算符优先级,从头到尾采用同样的空格方式。
flex布局因为是比较新的标准,所以在设计之初就着重解决了纵向排布的问题。而之前的css布局方式,对于纵向布局做的比较少。诸如纵向居中对齐、纵向铺满都是需要花费不少力气来处理。...当前的现代浏览器中 flex layout支持度已经超过98% Flexible box - Can I use ---- CSS 弹性盒子布局是 CSS 的模块之一,定义了一种针对用户界面设计而优化的...在弹性布局模型中,弹性容器的子元素可以在任何方向上排布,也可以“弹性伸缩”其尺寸,既可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。...space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。...space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。 space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
只有在输入搜索模式并且打开 ‘ignorecase’ 选项时才会使用 set autowrite 自动把内容写回文件也就是自动保存 set autoindent 设置自动对齐(缩进):即每行的缩进值与上一行相等...set tabstop=2 按下 Tab 键时,Vim 显示的空格数 set shiftwidth=4 在文本上按下 >(增加一级缩进)、<(取消一级缩进)或者==(取消全部缩进)时,每一级的字符数。...默认情况下,文件保存时,会额外创建一个备份文件,它的文件名是在原文件名的末尾,再添加一个波浪号(〜) set noswapfile 不创建交换文件。交换文件主要用于系统崩溃时恢复文件,文件名的开头是....撤消文件是跟原文件保存在一起的隐藏文件,文件名以.un~开头 set autochdir 自动切换工作目录。这主要用在一个 Vim 会话之中打开多个文件的情况,默认的工作目录是打开的第一个文件的目录。...; 默认快捷键 含义 ctp + p 查找文件 ctp + j 向上选择查找结果 ctp + k 向下选择查找结果 ctp + x 在当前窗口水平分屏打开文件 ctp + v 在当前窗口垂直分屏打开文件
默认值是nowrap,还有一个值是wrap-reverse flex-direction:规定主轴的方向(水平与垂直) row:主轴与行内轴方向作为默认的书写模式。即横向从左到右排列(左对齐)。...(如果剩下的空间是负数,则各行会向两个方向溢出的相等距离。) space-between:各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于'flex-start'。...space-around:各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于'center'。...在其它情况下,各行会按一定方式在弹性盒容器中排列,以保持两两之间的空间相等,同时第一行前面及最后一行后面的空间是其他空间的一半。 stretch:各行将会伸展以占用剩余的空间。...该行的子元素将相互对齐并在行中居中对齐,同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距(如果剩余空间是负数,则保持两端相等长度的溢出)。
CSS 定位详解 内容为整理摘录自阮一峰文档 一. display 弹性布局flex 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis) 1....column:主轴为垂直方向,起点在上沿。 column-reverse:主轴为垂直方向,起点在下沿。 flex-wrap: 换行行为 nowrap(默认):不换行。 wrap:换行,第一行在上方。...wrap-reverse:换行,第一行在下方。...space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 align-items: 交叉轴上的对齐方式 flex-start:交叉轴的起点对齐。...space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。 space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
布局、排列、散布item变得更加高效, 尽管它们的尺寸是未知或者是动态的(所以是flex可伸缩的)。...更为重要的是,与常规的相比(block基于垂直,inline基于水平), Flexbox Layout 是方向不可知的。...container 上,从 main-start 开始一直到 main-end. main size - 主轴方向上的大小 cross axis - 垂直于主轴方向的轴被称为纵轴....不管是第一个或是最后一个。 align-items 这定义了如何在当前轴上沿纵向对齐的方式。 把它看作是纵轴轴(垂直于主轴)的 justify-content 版本。...align-content 这种对齐方式是用于多行对齐,类似于’段落对齐’,与justify-content类似,不过这里是每一行在纵轴方向 注意:只有一行items时,此属性不起作用。
1.5 链接伪类选择器(重点) 伪类选择器: 为了和我们刚才学的类选择器相区别 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{} 伪娘 作用: 用于向某些选择器添加特殊的效果...标签的类型(分类) HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。...上距离和下距离总是相等的,因此文字看上去是垂直居中的。 行高和高度的三种关系 如果 行高 等 高度 文字会 垂直居中 如果行高 大于 高度 文字会 偏下 如果行高小于高度 文字会 偏上 4....如果position 后面是精确坐标, 那么第一个,肯定是 x 第二的一定是y 如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中 如果指定的两个值是 精确单位和方位名字混合使用,则第一个值是...因为是CSS3 ,所以 低于 ie9 的版本是不支持的。
:面向连接的可靠传输 TCP的拥塞控制 传输服务和相关协议 ** 为运行在不同主机上的应 用进程提供逻辑通信 ** ** 传输协议运行在端系统 ** 发送方:将应用层的报 文分成报文段,然后传 递给网络层...每个数据报有源IP地址和目标地 址 每个数据报承载一个传输层报 文段 每个报文段有一个源端口号和 目标端口号 (特定应用有著名的端口号) ip之间的传输说的是主机之间的信息传输, 如果想要实现进程之间的信息传输就需要加上端口号...(port) TCP绑定的是四元组的信息。...端: client接收到对方的ip打包传输过来的信息后, 先检查报文段的目标端口号 , 然后 用该端口号将报文段定位给 套接字 IP解析之后向上交的是 UDP datagram、源ip和目标ip等信息...和字段的内容是否相等: 不相等––检测到差错 相等––没有检测到差错 ,但也许还是 Such as(不太懂) 注意:当数字相加时,在最高位的进位要回卷,再加 到结果上 目标端:校验范围+校验和=1111111111111111
领取专属 10元无门槛券
手把手带您无忧上云