主轴默认情况下水平向右，我们可以通过 flex-direction 指定它的方向，主轴方向确定后，我们进而可以得到交叉轴的方向。 子项目默认沿主轴排列。...主轴水平向右，同时交叉轴垂直向下 image.png row-reverse： 主轴水平向左，同时交叉轴垂直向下 image.png column： 主轴垂直向下，同时交叉轴水平向右 image.png...如果为 0（默认）：即使有剩余空间，子项目也不会去瓜分 如果为整数，举个例子： 父容器宽度 500px，三个子项目的 width 分别为 100px，150px，100px。.../ 6 = 75px 于是三个项目最终的宽度分别为： 100px + 25px = 125px 150px + 50px = 200px 100px + 75px = 175px 如果为小数，那么将不会计算权重之和作为权重率的分母...flex-basis 属性定义了子项目在不伸缩（即没有以上两个属性影响）时的原始尺寸，主轴水平时表示宽度，主轴垂直时表示高度。默认值为 auto。
总结浮动常见的规则内容 元素一旦浮动后, 脱离标准流 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止 定位元素会层叠在浮动元素上面 如果元素是向左（右）...认识flex布局 认识flexbox Flexbox翻译为弹性盒子: 弹性盒子是一种用于按行或按列布局元素的一维布局方法 ; 元素可以膨胀以填充额外的空间, 收缩以适应更小的空间; 通常我们使用Flexbox...; 在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局; 为什么需要flex布局呢?...于是世界就明亮了起来. flexbox在使用时, 我们最担心的是它的兼容性问题: 我们可以在caniuse上查询到具体的兼容性 2.2. flex布局重要的概念 两个重要的概念: 开启了 flex 布局的元素叫...的布局将受flex container属性的设置来进行控制和布局; flex item不再严格区分块级元素和行内级元素; flex item 默认情况下是包裹内容的, 但是可以设置宽度和高度; 设置 display
布局分类: 表格布局: 现在已经不用了，现在都是将表格作为一种数据展现元素，而不是布局方式 定位布局 Flexbox 布局 Grid 布局 浮动 我们已经学会了如何操纵盒子的大小及其周围的空间，在默认情况下...在现代网站中，浮动技术已经被 Flexbox 布局所取代，但并不意味我们不需要清楚这一知识，之前的十多年来，浮动一直是建站的基础，所以很可能会在不经意间遇见它。 浮动的特点 浮动会改变默认文档流。...浮动的元素会从正常文档流中取出来(即浮动元素的父容器不再包含该浮动元素)，然后始终与其父容器的左侧或右侧对齐。也会尽可能的在父容器内向上浮动。...块级元素可以使用 float: left; 或 float: right; 来左右对齐，使用 auto-margins 中间对齐。而行内元素使用 text-align 属性来对齐。...多个浮动元素的情况 如果都是左浮动，则按照在文档流中的先后顺序，从左向右水平排列。如果都是右浮动，则按照在文档流中的先后顺序，从右向左水平排列。
而当添加视图B时，因为视图B的宽度是100，仍然能够被容器视图的宽度容纳(容器视图剩余宽度为420)，所以将视图B浮动到视图A的右边并且上边对齐。我们也可以按同样的方式来处理视图C的浮动。...我们上面说的浮动的规则是在可以容纳新加入视图宽度的情况下新加入的视图的上边和前一个加入的视图的上边对齐，而且新加入的视图的左边必须放置在前一个加入视图的右边。...当某个子视图在加入到布局视图时，可以设定为向左还是向右浮动，这里的向左和向右是不能同时支持的，视图要么向左要么向右。对于视图向右浮动来说，他的机制是和向左浮动是一样的。我们可以看如下的视图： ?...通过上面的例子我们可以看出当一个布局视图中同时存在着向左浮动和向右浮动的子视图时，我们就有浮动布局的将新增规范8的定义如下： 8.当浮动布局中同时存在着向左和向右浮动的子视图时，向左浮动的视图剩余宽度的右边界是在不覆盖掉右边视图的情况下的最小向右浮动的视图的左边界...，而向右浮动的视图的剩余宽度的左边界是在不覆盖掉左边视图的情况下的最大向左浮动的视图的右边界。
而当添加视图B时，因为视图B的宽度是100，仍然能够被容器视图的宽度容纳(容器视图剩余宽度为420)，所以将视图B浮动到视图A的右边并且上边对齐。我们也可以按同样的方式来处理视图C的浮动。...我们上面说的浮动的规则是在可以容纳新加入视图宽度的情况下新加入的视图的上边和前一个加入的视图的上边对齐，而且新加入的视图的左边必须放置在前一个加入视图的右边。...当某个子视图在加入到布局视图时，可以设定为向左还是向右浮动(float属性的值设置为left或者right)，这里的向左和向右是不能同时支持的，视图要么向左要么向右。...通过上面的例子我们可以看出当一个布局视图中同时存在着向左浮动和向右浮动的子视图时，我们就有浮动布局的将新增规范8的定义如下： R8:当浮动布局中同时存在着向左和向右浮动的子视图时，向左浮动的视图剩余宽度的右边界是在不覆盖掉右边视图的情况下的最小向右浮动的视图的左边界...，而向右浮动的视图的剩余宽度的左边界是在不覆盖掉左边视图的情况下的最大向左浮动的视图的右边界。
Day5:html和css 如何实现盒子居中问题，要让盒子实现水平居中，要满足是快级元素，而且盒子的宽度要定义。然后数值为auto即可。....dashu { width: 100px; margin: 0 auto; } 盒子的水平居中为 margin: auto; 而文字的水平居中为: text-align: center; text-align...float浮动:标准流,浮动,定位. float可以让多个div在同一行显示....属性值 说明 left 元素向左浮动 right 元素向右浮动 none 元素不浮动 选择器 {float: 属性值;} <!...(float) 普通流（标准流）、浮动和定位 属性值 描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动（默认值） 推荐 Day1:html和css Day2:html和css
七种垂直居中的方法 设定行高（line-height） 添加伪元素 calc动态计算 使用表格或假装表格 转变 绝对定位 使用Flexbox 1.设定行高（line-height） 设定行高是垂直居中最简单的方式....div0 :: before { content：''; 宽度：0; 高度：100％; 显示：行内块； 位置：相对； 垂直对齐：中间； 背景：＃f00; } 3.calc动态计算 看到这边或许会有疑问...; 高度：40px； 背景：＃00f; 向左飘浮; top：calc（50％-20px）; } 4.使用表格或假装表格 或许有些人会发现，在表格这个HTML里面常用的DOM里头，要实现垂直居中是相当容易的...5.转换 transform是CSS3的新属性，主要掌管元素的变形，旋转和位移，利用transform里头的translateY（更改垂直的位移，如果使用百分比为单位，则以元素本身的长宽为基准），搭配元素本身的...宽度：100px; 高度：50px; 顶：0; 对：0; 底部：0; 左：0; 保证金：自动; 背景：＃f60; } 7.使用Flexbox 使用align-items或align-content
绝对定位垂直居中设置 / 使用圆角矩形设置半圆 / 文字垂直居中 绝对定位垂直居中设置 : 执行下面两个步骤 , 可以将 绝对定位 的子元素设置为 垂直居中 ; 首先 , 走到父容器高度的一半 ; 然后..., 向上走自己高度的一半 ; /* 使用绝对定位 在 相对定位的父容器中任意放置元素 */ position: absolute; /* 垂直居中 */ /* 首先 走到父容器高度一般.../ 使用圆角矩形设置小圆点 绝对定位水平居中设置 : 执行下面两个步骤 , 可以将 绝对定位 的子元素设置为 水平居中 ; 首先 , 走到父容器宽度的一半 ; 然后 , 向左走自己宽度的一半 ;.../* 在 相对定位 父容器中 使用 绝对定位 任意摆放 */ position: absolute; /* 设置底部小圆点容器居中 */ /* 首先 走到父容器宽度的一半 */...left: 50%; /* 然后 向左走自己的一半宽度 */ margin-left: -35px; 使用圆角矩形设置左右两侧半圆 : 圆角矩形容器高度是 13 像素 , 设置其左右两侧为半圆
我在浮动 .box 我在浮动 .box 我在浮动 .box 我在浮动 .box 我在浮动 .box 我在浮动 .after-box 我在使用 clear，所以我不会浮动到上面那堆盒子的旁边。 ...然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。...section class="after-box" 使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。...你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。 *清除浮动(clearfix hack) img { float: right; } ?...在实际项目中，为了让Responsive设计在智能设备中能显示正常，也就是浏览Web页面适应屏幕的大小，显示在屏幕上，可以通过这个可视区域的meta标签进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果
弹性布局:提供一个盒内的子视图可以进行伸缩对齐和换行排列并且满足flex规约的布局能力 CSS:flexbox MyGridLayout 栅格布局:提供了一种基于单元格进行垂直和水平的无限拆分而进行布局的能力...); //A视图的垂直居中位置是B视图顶部位置、100、C视图底部位置这三个值中的最大一个。...就比如下面的这个界面： 流式布局的行对齐自定义 为了支持行内对齐停靠自定义处理，流式布局提供了一个新的属性： /** 单独为某一行定制的水平和垂直停靠对齐属性，默认情况下布局视图的gravity和arrangedGravity...具体的行内对齐停靠的使用可以参考DEMO工程中的FLLTest4ViewController和FLLTest9ViewController 8.流式布局和浮动布局对基线对齐的支持 新版本中对于垂直流式布局以及垂直浮动布局中的每一行子视图之间新增加了对基线对齐的支持...这样整个布局体系中水平线性布局、相对布局、垂直流式布局、垂直浮动布局、弹性布局都可以实现行内基线对齐的能力了。 9.布局动画的支持和扩展 动画的适当使用会增强用户的体验效果。
如果元素是块级元素, 那么就会垂直排版，如果元素是行内元素/行内块级元素, 那么就会水平排版。 2，浮动流 浮动流只有一种排版方式, 就是水平排版。它只能设置某个元素在父元素内左对齐或者右对齐。...div{ float:left;/*规定元素向左浮动*/ /*float:right;规定元素向右浮动*/ } 请注意，浮动float属性没有center取值，并且，如果设置了浮动属性，那么你将不能通过使用....box{ position:relative; top:50px; left:50px; } /*box元素将在原来的位置向下和向右偏移50px，请注意：在定位流中，同一个方向上的定位属性只能使用一次...; } /*这样实现垂直居中的原理是：使父元素以表格的形式呈现，再利用vertical-align属性在表格中是设置单元格内容垂直对齐方式的特性，从而达到块级元素垂直居中的效果。....father{ height:200px; } .son{ height:100px; margin-top:50px 3，水平垂直居中 通过上面的方式组合使用，即可达到元素水平垂直都居中的效果
- 浮动(Floats) 在浮动模型中，盒首先根据常规流布局，然后从常规流中脱离并尽可能地向左或向右位移。内容可以布局在浮动周围。...这些盒子垂直方向的起点从包含块盒子的顶部开始。 摆放这些盒子的时候，它们在水平方向上的 padding、border、margin 所占用的空间都会被考虑在内。...在垂直方向上，这些框可能会以不同形式来对齐（vertical-align）：它们可能会使用底部或顶部对齐，也可能通过其内部的文本基线（baseline）对齐。...能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和存在的浮动来决定。...当一个 inline box 超过 line box 的宽度时，它会被分割成多个boxes，这些 boxes 被分布在多个 line box 里。
浮动和文字环绕 浮动框就是一个框在当前行被向左或向右挪动(偏移)，它不在常规流中，浮动框由浮动元素的框组成。...浮动元素会缩短行框 由于浮动框并不在常规流中，在该浮动框之前或之后创建的非定位框垂直排列，就好象浮动框并不存在一样。然而，浮动框之后创建的行框 会被缩短，比便为浮动元素的 margin 框提供空间。...上面B的宽度为50px，它和浮动元素A的包含块都是C，宽度为200px。浮动元素在放置后，还有足够的空间放置B，所以，B 被紧挨着A 的margin 框被放置。...将B的宽度改为150px的话就会掉下来，但是这种方式与使用 clear 特性清除浮动不同。 适用于哪些元素 可设置给任意元素，但只适用于生成非绝对定位框的元素。对于绝对定位的元素，浮动没有任何效果。...以上两个浮动元素的包含块宽度为200px，无法在一行放置，所以，右浮动元素只好折行显示了。 宽度设置成300px之后，则可以放到一行。 5. 浮动框的顶外边不能高于它包含块的顶部。
格式： 选择器 { float: 属性值 ; } 常用属性值： none ：元素不浮动（默认值） left ：元素向左浮动 right ：元素向右浮动 下面我们使用多个课堂案例...3.3 浮动案例 3.3.1 准备代码 3.3.2 案例 1：左对齐顺序排列 示例 1：要求在一行上，左对齐： 注意：因为从上到下执行代码，红色方块是第一个向左浮动的，自然在最左边 3.3.3 ...案例 2：右对齐顺序排列 示例 2：要求在一行上，右对齐： 注意：因为从上到下执行代码，红色方块是第一个向右浮动的，自然在最右边 3.3.4 案例 3：两端对齐排列 示例 3：要求在一行上，进行如下两端对齐...： 注意：因为从上到下执行代码，绿色方块是第一个向右浮动的，自然在最右边 3.3.5 课堂练习：两端对齐排列 准备代码： 要求的效果： 提示： 左浮动：先红后蓝 右浮动：先绿后黄...清除浮动 4.1 准备代码 4.2 引言 通常情况下，未设置高度的 标准流父元素，在子元素进行浮动时，会导致父元素失去子元素，高 度消失。 进而影响页面排版。
宽和高 在学习FlexBox之前首先要清楚一个概念“宽和高”。一个组件的高度和宽度决定了它在屏幕上的尺寸，也就是大小。 像素无关 在React Native中尺寸是没有单位的，它代表了设备独立像素。...Web CSSS上FlexBox的不同之处，记住这几点，你可以像在Web CSSS上使用FlexBox一样，在React Native中使用FlexBox。...主轴即水平方向的轴线，可以理解成横轴，侧轴垂直于主轴，可以理解为竖轴。...row: 从左向右依次排列 row-reverse: 从右向左依次排列 column(default): 默认的排列方式，从上向下排列 column-reverse: 从下向上排列 Usage: <View...stretch 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。...CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。...两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。...兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。...单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
一，浮动的定义 一个浮动盒会向左或向右移动，直到其外边（outer edge）挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐。...blue; height: 120px; } .box2{ background: pink; } 执行结果 由于box1的高度比box2的高，box3在向下向左移动的时候，遇到了...这里有一篇写行盒(line box)垂直方向的文章链接描述 ? 4.浮动会脱离普通流 普通流中所遵循的规则是块级元素占据一行，行内元素占据内容的宽度。...demo链接描述 /li里面的元素全部浮动的情况下，.navbar的高度为0，所以设置背景色无效 ? 四：清除浮动 (1)clear属性 clear可以用于任何元素，无论是不是浮动元素都可以加。...因用伪元素可以省一个标签，所以就用伪元素 .clearfix::after { content:''; //在父元素的最后生成一个内容为空的元素。
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。...CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。...‘ 两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。...兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。...单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
