也就是说，所有的卡位顶多只会在高度方面不一样，同一列的卡位的宽度都是一样的。那么，如果需求是五花八门的网格布局，每个卡位都有可能占据多行的情况下又占据多列，用这个就没法实现了。...下面以两者都设置为竖直方向多列的样式来区分： 网格样式每一行中的所有 item 高度是一致的，不同行可以不一样，但同行的都是一样的，因此它就实现不了瀑布流的样式了；瀑布流所有的 item 高度都允许不一样...网格样式支持 item 占据多列的宽度；瀑布流支持 item 占据总列数的宽度，不支持只占据其中几列。 当设置为水平方向样式时，以上结论中行列对调，宽度高度对调。...setFullSpan() 该方法是 StaggeredGridLayoutManager 内部类 LayoutParams 的方法，用这个方法可以设置 item 是否要占据总宽度或总高度，当瀑布流中有某个...首先需要明确，RecyclerView 的回收机制在工作时，会先将移出屏幕的 ViewHolder 放进一级缓存中，当一级缓存空间已满时，才会考虑将一级缓存中已有的 ViewHolder 移到 RecyclerViewPool
如果这些项目的高度不一致，它们将会伸展到最高的那个高度 flex-basis默认为 auto（项目宽度将由其内容决定） flex-wrap默认为nowrap（如果容器的宽度不足以适合这些项目，它们不会换行...此属性可视地重新分配项目，但在交互时保持其原始源位置，例如使用Tab键遍历它们。 如果物品订购对可访问性有影响，则可以考虑这一点。 flex-direction也是如此。 ? 对齐 ?...下图显示了把项目的 flex-grow属性值设置为其内容对应的数字时的情形。 ? flex-shrink 当没有足够的可用空间来容纳所有容器时，用 flex-shrink处理项目大小。...这告诉浏览器：如果在理想状态下，有足够的空间来放置所有的项目，就遵循它们的160px宽度，并且没有正/负可用空间；如果没有足够的空间的话，那么 flex-shrink默认为1，所有项目均匀收缩； 如果有额外的空间...flex-basis也接受值 content，此时无论其宽度是否被设置，计算自由空间时所考虑的宽度依据是项目中的内容。
但是在构建对象时必须指定行或者列，这样就导致内容超过屏幕宽度或者高度时，并不会主动换行——而是优先适配行数或列数，然后滚动显示。...所以，在这中方式下，如果我们想要实现超过宽度或者高度就主动换行的效果就做不到了。...假设我们要实现一个宽度满屏之后自动换行的流式标签列表，我们将span总数设置为屏幕宽度，那么，每一个条目所占的span即为该条目的宽度（含marign、padding). ...，那么我们就设置为屏幕宽度。...，那么我们就设置为屏幕宽度。
flex-basis 默认值为 auto(项目宽度将取决于其自身的内容) flex-wrap 默认值为 nowrap（如果容器的宽度不足以囊括所有的项目，则项目不会换行，只会溢出） 出于可视化的目的，我们拉伸容器以占据整个高度...弹性换行 当容器空间不足以容纳全部弹性项目时，利用 flex-wrap 属性处理弹性项目 [3]。....flex-container { flex-flow : column wrap; } 项目之间的空隙 回到主轴方向为 row 且进行换行的情况。...下图中，项目的 flex-grow 属性设置为自身的内容值。 ? flex-shrink 当容器没有足够空间来容纳所有项目时，使用 flex-shrink 处理项目大小。...此时，无论有没有设置 width，自由空间计算都只会基于项目内容去计算宽度。如果你不打算在计算时考虑项目宽度，则将其设置为 0。
25.1.0 (>=21)及以上使用Prefetch 功能，也就是预取功能，嵌套时且使用的是LinearLayoutManager，子RecyclerView可通过setInitialPrefatchItemCount...设置预取个数 加大RecyclerView缓存，比如cacheview大小默认为2，可以设置大点，用空间来换取时间，提高流畅度 如果高度固定，可以设置setHasFixedSize(true)来避免requestLayout...浪费资源，否则每次更新数据都会重新测量高度。...这种情况就可以通过设置额外的缓存空间，重写getExtraLayoutSpace方法即可。...这样就减少了对象创建所造成的消耗 用notifyDataSetChange时，适配器不知道整个数据集中的那些内容以及存在，再重新匹配ViewHolder时会花生闪烁。
上报时机 回调实现 刚进入页面时（可见且>50%:上报可见） 第一次onScroll 手指拖动滑动时（ 不停的：不可见或50%:上报可见 onScroll、且SCROLL_STATE_TOUCH_SCROLL.../** * 为 逻辑上可见的view设置 可见性回调 * 说明：逻辑上可见--可见且可见高度（宽度）>view高度（宽度）的50% * @param view 可见item...（宽度）>view高度（宽度）50%才行 boolean visibleHeightEnough = orientation == OrientationHelper.VERTICAL...如果item内部 是 可滑动的recyclerView，那么就item可见时 子列表也做滚定监听就可以了，即内部的recyclerView也是用setRecyclerItemExposeListener...逻辑上可见的view设置 可见性回调 * 说明：逻辑上可见--可见且可见高度（宽度）>view高度（宽度）的50% * @param view 可见item的view *
因为在阅读本书 CSS 的 “流” 相关内容时让我有了一种恍然大悟的感觉，所以才有了此篇读书笔记。...如果不指定宽高，默认会继承父元素的宽度，并且独占一行，即使宽度有剩余也会独占一行。例子中，宽度继承于父元素 body。 2. 高度一般以子元素撑开的高度为准，当然也可以自己设置宽度和高度。...外在盒子负责让元素可以一行显示，还是只能换行显示；内在盒子负责宽高、内容呈现什么的，也叫容器盒子。...之前讨论的块级元素和内联元素，当我们在谈论它们是在一行还是换行显示时，实际上是谈论的外在盒子。而内在盒子实际是负责了元素的宽高和内容。...如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为 auto，所以高度计算出来是 'auto' * 100 / 100 = NaN。
同时，由于有了额外的横向空间，导航元素从底部移至侧边也显得更加自然。...只有在给定的窗格宽度下仍然有足够的空间时，SlidingPaneLayout 才会同时将两者显示出来。我们分别为会议列表和详情窗格分配了 400dp 和 600dp 的宽度。...经过一些实验，我们发现即使是在大屏幕的平板上，竖屏模式同时显示出双窗格内容会使得信息的显示过于密集，所以这两个宽度值可以保证只在横屏模式下才同时展现全部窗格的内容。...更多关于使用 SlidingPaneLayout 的信息，请参阅: 创建双窗格布局。 资源限定符的局限 搜索应用栏也在不同屏幕内容下显示不同内容。...转换内容 Codelabs 功能与设置功能有相似的结构。但我们想要充分利用额外的屏幕空间，而不是限制显示内容的宽度。在窄屏幕设备上，您会看到一列项目，它们会在点击时展开或折叠。
弹性布局 Flex 长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 float 和 position。...以下简单的布局需求是难以或不可能用这样的工具（float 和 position）方便且灵活的实现的： 在父内容里面垂直居中一个块内容。...使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。...flex-wrap： 控制 Flex 容器内的项目是否换行。nowrap 默认值，不换行、wrap 换行、wrap-reverse反向换行。...flex-basis: 设置 Flex 项在主轴上的默认宽度或高度。值可以是长度值、百分比值或 auto。 order: 设置 Flex 项在主轴上的顺序。值可以是 1 到 65535 之间的整数。
，但是前者内容过长会溢出，后者会换行），再设置 margin 达到水平居中。...该属性默认为 0，表示即使该行有额外空间也不会占满，设置为 1 表示右元素占满额外空间。...但不要忘记了我们给它设置了浮动 —— 浮动元素具有包裹性，在不显式设置宽度的情况下由内容撑开。这里如果不设置 100% 宽度，且里面没有足够的内容，那么会导致布局崩坏。...flex 只有一个值时，设置的是 flex-grow，代表弹性子元素对父元素剩余空间的分配，因为不设置的时候默认是 0，所以这里只有设置了 1 的主列参与分配剩余空间，从而实现宽度自适应。...flex 有三个值时，设置的是 flex-grow，flex-shrink，flex-basis。这里左右两列的 flex-basis 都是 100px，实际上为它们设置了固定宽度。
即使存在浮动也是如此。 BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度时，浮动元素也参与计算。...当 inline-level boxes 的总宽度少于包含它们的 line box 时，其水平渲染规则由 text-align 属性来确定，如果取值为 justify，那么浏览器会对 inline-boxes...当一个 inline box 超过 line box 的宽度时，它会被分割成多个boxes，这些 boxes 被分布在多个 line box 里。...垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。...FFC -- Flex Formatting Contexts 触发条件 当 display 的值为 flex 或 inline-flex 时，将生成弹性容器（Flex Containers）, 一个弹性容器为其内容建立了一个新的弹性格式化上下文环境
，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成 margin，即外边距，在元素外创建额外的「空白」，空白通常指不能放其他元素的区域 标准盒模型 盒子总宽度 = width...) text-overflow:ellipsis：当文本溢出时，显示省略符号来代表被修剪的文本 white-space:nowrap:设置文本不换行 overflow:hidden：当子元素内容超过容器宽度高度限制的时候...「每个元素的左外边距与包含块的左边界相接触」（页面布局方向从左到右），即使浮动元素也是如此 BFC的区域不会与float的元素区域重叠 「计算BFC的高度时，浮动子元素也参与计算」 BFC就是页面上的一个...的值为absolute或fixed 应用场景 防止margin重叠 将位于同一个BFC的元素，分割到不同的BFC中 高度塌陷 --- 「计算BFC的高度时，浮动子元素也参与计算」 子元素浮动 父元素...如果所有项目的flex-shrink属性都为1，当空间不足时，都将「等比例缩小」。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
原理示意图 RecyclerView控件的高度我们定义为h1，如下图所示： ?...: " + recyclerViewHeight); RecyclerView内容的高度我们定义为h2，如下图所示： ?...Item设置偏移，为onDraw和onDrawOver方法中的绘制预留空间。...如果我们重写了ItemDecoration#getItemOffsets方法，该方法就会在现有Item空间的基础上新增空间，所以这个操作也会修改我们RecyclerView内容高度。...幸运的是，即使超出Item上方区域，onDrawOver的内容也是正常显示的。
因此文字也是内联元素。图片、按钮、输入框、下拉框等替换元素也是内联元素。内联盒模型是指内联元素包含的几个盒子，理解记忆下面的几个概念对css的深入学习极其重要。 内容区域：本质上是字符盒子。...尽管如此还是有些需要注意的地方： 大部分情况下我们会将元素重置为box-sizing: border-box，宽高的计算是包含了padding的，给人一种padding也是content box一部分的感觉...即使存在浮动也是如此，除非子盒子形成了一个新的BFC。...并且由于float box高度坍塌，main占据了body全部空间并且和BFC盒子左边缘相接触（特性3“即使存在浮动也是如此”）。 特性 4 正是BFC存在的意义。...特性 5 BFC计算高度时包含浮动元素的高度。可以利用BFC此特性解决浮动元素高度坍塌的问题。 特性 6 ：利用特性6实现自适应两栏布局。此时main宽度是自适应的。 ?
虽说如此，弹性布局往往会有些潜在的问题，且改动后，要立即查看页面也需要不少时间，因此我把项目中使用弹性布局过程中遇到的问题稍作整理，为大家以后使用时，可以有效规避这些麻烦。...解决方法： 设子容器width:0;可能出在于子容器没有设置宽度，省略符可能需要对父元素设置宽度，设置为100%无效，当设置为0的时候，子容器恢复到设定的宽度，省略号也出现了。...设置为0时，不会自动增长/缩小，防止固定大小的元素宽度发生变化。...弹性布局默认不改变项目的宽度，但是它默认改变项目的高度，align-self属性可以改变这种行为，默认值是stretch。...flex只是比例，但不会换行，可以设置子容器的宽度的百分比，来达到换行的效果，或者使用flex-wrap进行换行。
flexbox是什么 即使不知道视窗大小或者未知元素情况之下都可以智能的、灵活的调整和分配元素和空间两者之间的关系。简单的理解，就是可以自动调整，计算元素在容器空间中的大小。...flex-wrap flex-wrap属性有三个属性值，分别是换行、不换行、反向换行 wrap || nowrap(默认) || wrap-reverse flex的默认行为会在一行内容纳所有的flex...项目，即使浏览器出现滚动条(当flex项目的总体宽度大于浏览器窗口宽度)。...如果希望flex容器在其flex项目达到一定数量能换行，将flex-wrap设置为wrap即可。当一行再不能包含所有列表项的默认宽度，就会多行排列。 除此之外，还有一个值wrap-reverse。...如果像是这样flex项目的宽度多出了flex容器，那么就需要将flex-shrink: 1;，这样会压缩flex项目的宽度，让其平均分配flex容器的空间，数值也是flex的占比。
line-height 会把 文本盒 撑起来，也就是 会撑起来文本所在的inline-box的高度，但是并不影响 文本所占空间的高度 和 布局的高度。...span默认是inline的 也是没有定高的，给span规定高度也是没有用的(因为span是inline的)。...line-height 大于 font-size时，会导致多余的空间 分布到文字的上下两侧，从而导致 文字垂直居中。因此，想要垂直居中时 可以通过line-height来做。...另外 解码base64也是会有 额外开销的。 * 多分辨率的适配 * 背景缩小 用在什么场景呢？...左右边框设置为透明，内容宽度设置为0。 非布局样式 - 滚动 什么时候 会产生 滚动？ 内容比容易多的时候。
当 flex-basis 值为 0 % 时，是把该项目视为零尺寸的，故即使声明该尺寸为 140px，也并没有什么用。...，且子项宽度和不及父容器宽度时，flex-grow 会起作用，子项会根据 flex-grow 设定的值放大（为0的项不放大） 当 flex-wrap 为 wrap | wrap-reverse，且子项宽度和超过父容器宽度时...则剩余空间保留，若当前行存在一个子项的 flex-grow 不为0，则剩余空间会被 flex-grow 不为0的子项占据 当 flex-wrap 为 nowrap，且子项宽度和不及父容器宽度时，flex-grow...会起作用，子项会根据 flex-grow 设定的值放大（为0的项不放大） 当 flex-wrap 为 nowrap，且子项宽度和超过父容器宽度时，flex-shrink 会起作用，子项会根据 flex-shrink...当然，flex-wrap 的值为 wrap | wrap-reverse 时，表明可以换行，既然可以换行，一般情况下空间就总是足够的，flex-shrink 当然就不会起作用 6. align-self
:collapse可以合并表格的相邻边框> 边框会影响盒子的实际大小；增加盒子大小，盒子的总大小为宽度或高度加上两个边框的大小；- 内边距> padding用于设置内边距，即盒子边框和内容的距离.默认是...0> 语法 padding : 上 右 下 左> padding也会影响盒子的大小；如果盒子已有宽度和高度，内边距会撑大盒子的大小> 如果盒子没有指定高度和宽度，那么padding不会撑开盒子；只有指定宽度才会撑大宽度...或者是百分比> 原理：盒子矩形边框和圆形的交集> border-radius是复合属性，最多可以有四个值，表示四个角；左上、右上、右下，坐下盒子阴影> box-shadow，属性如下图：> 盒子阴影不占空间...，且没有设置宽度，那它的大小根据内容而定；---**为了约束浮动元素位置，网页布局时，先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右的位置**浮动布局要点- 先父元素上下布局，后浮动元素左右布局...- 父级添加overflow属性，设置为auto,hidden 或scroll- 父元素添加：after伪类； 不需要添加额外标签，- 给父元素添加 双伪元素；before和after; 原理是在父盒子中的第一个元素和最后一个元素添加一个块级元素
二、知识点 2.1 标准模型和IE模型的区别 计算宽度和高度的不同。 标准盒模型：盒子总宽度/高度 = width/height + padding + border + margin。...（ 即 width/height 只是内容高度，不包含 padding 和 border 值 ） IE盒子模型：盒子总宽度/高度 = width/height + margin = (内容区宽度/高度...如以上代码：父元素不加 overflow: hidden，则父元素的实际高度为 100px；如加上 overflow: hidden 父元素高度为 110px，给父元素创建了 BFC，块级格式化上下文。...即使存在浮动也是如此； （4）BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。...内容不会被修剪，会呈现在元素框之外（overflow 不为 visible） 2.5.4 BFC作用（使用场景） 1、自适应两（三）栏布局（避免多列布局由于宽度计算四舍五入而自动换行） 2、避免元素被浮动元素覆盖
领取专属 10元无门槛券
手把手带您无忧上云
