BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。...我们在 p 的上方和下方看不到任何灰色。 ? 防止 margin 折叠 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。...产生折叠的必备条件 再一次，BFC 的工作是把东西装在盒子里，防止它们从盒子里跑出来。 BFC 可以阻止元素被浮动元素覆盖 你将熟悉 BFC 的这种行为，因为使用浮动的任何列类型布局都是这样工作的。...在多列布局中使用 BFC 如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。...但如果我们在多列布局中的最后一列里创建一个新的BFC，它将总是占据其他列先占位完毕后剩下的空间。
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。...这是因为当我们浮动一个元素时，文本所在的框的宽度保持不变，为给浮动元素腾出空间而缩短的是文本的行框。这就是为什么背景和边框会出现在浮动后面的原因。 我们通常有两种方法来解决这个布局问题。...BFC 还会导致一些其他有用的行为。 BFC 可以防止 margin 折叠 了解边距合并是另一个被低估的 CSS 技能。在下一个示例中，假设有一个背景颜色为灰色的 div。...查看演示 在多列布局中使用 BFC 如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。...但如果我们在多列布局中的最后一列里创建一个新的BFC，它将总是占据其他列先占位完毕后剩下的空间。
否则，该列的宽度有第一行中'width'属性值不是'auto'的单元格确定。如果该单元格跨越多个列，则宽度分散到各个列。...该值导致整个行或列从显示中移除，并且由行或列正常占据的空间将用于其他内容。与折叠的列或行相交的跨行和列的内容会被剪切。但是，对行或列的抑制不会影响表格的布局。...下表显示了表格的宽度，边框的宽度，填充和单元格宽度如何相互作用。它们的关系由以下等式给出，该等式适用于表的每一行： ?...UA必须通过检查表格第一行中的第一个和最后一个单元格来计算表格的初始左边界和右边界宽度。表格的左边框宽度是第一个单元格的折叠左边框的一半，并且该表格的右边框宽度是最后一个单元格的折叠右边框的一半。...表格的顶部边框宽度等于最大折叠顶部边框的一半。通过检查底部边界与表底部折叠的所有单元格计算底部边框宽度。底部边框宽度等于最大折叠底部边框的一半。
15)onRestore:当窗体恢复到原来大小时激活。 16)onMinimize:当窗体最小化后激活。...10)resize:设置面板的大小和布局。该options对象包括下面属性: width：新的面板宽度。...top：新的面板顶部位置。 11)move:移动面板到一个新的位置。...16)singleSelect:当true时仅仅同意当前选择一行。 默认false。 17)fit:当true时，设置大小以适应它的父容器。...属性例如以下： 1)width:容器宽度，自己主动列宽。 2)treeWidth:该树形下拉框的宽度。
DOCTYPE 的作用：DOCTYPE声明在文档的最前面， 位于根元素 HTML 的起始标签之前 ，这样一来，在浏览器解析 HTML 文档正文之前就可以确定当前文档的类型，以决定其需要采用的渲染模式，不同的渲染模式会影响到浏览器对于...**与 Standards 模式的区别：**总体会有布局、样式解析和脚本执行三个方面的区别： 盒模型：在W3C标准中，如果设置了一个元素的高度和宽度，指的是元素内容的宽度和高度，而在Quirks模式下，...9、请写出多种等高布局 假等高布局：使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假象 给容器div使用单独的背景色（固定布局、流体布局）：用元素中的最大高度撑大其他的容器高度...（带单位、纯数字、百分比） **带单位：**px不用计算，em则会使元素以其父元素font-size值为参考来计算自己的行高； **纯数字：**把比例传递给后代，例如父级行高为1.5，子元素字体为18px...这种合并外边距的方式称为折叠，并且因而所结合成的外边距称为折叠外边距； 折叠结果计算规则： 两个相邻的外边距都是正数时，折叠结果是他们两者之间较大的值； 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
ReplaceIcon：用一个新的图标代替一个图标 ReplaceMasked：用一个新的掩模码来代替一个掩模码 ResInstLoad：从资源文件中获取一个图片到图像列表中 ResourceLoad...属性指定右击按钮所选的节点 RowSelect：为真时可整个行以高度显示。...事件 OnAddition：添加一个新节点时触发 OnAdvancedCustomDraw：在绘制树状视图组件期间不同阶段触发 OnAdvancedCustomDrawItem：在绘制树状视图的新节点期间的不同阶段触发...：当列拖动一个新的位置时触发 OnColumnRightClick：当用户右击列时触发 OnCompare：当两项目需要进行比较排列列表的时候触发 OnCustomDraw：当必须绘制列表视图时触发...TCoolBands Bitmap：在TcoolBand区后显示的图像 Constraints：指定组件宽度和高度的最大值和最小值，组件重新调整大小时，不能违反这些约束 DockSite：指定组件是否成为拖动停放操作的目标
如何编写响应式网页 (重点) (1). 必须声明视口(已解决) (2)....允许在容器中放置若干行 div.row 每行中最多等分为 12 列 ③. 行中放置 div.col 即列，每列都需要指定宽度 1/12、2/12 ? ④....列排序数量,控制某列向右或向左移动，并不影响其它的列,主要作用是在特定的屏幕下临时调整列的出现位置 A、col-lg-push-n: 在 lg下，当前列向右移动n 列的距离 B、col-lg-pull-n...行：div.form-group /(正常情况div.row) C. 列：div.col-*-* ? (4). checkbox及radio表单的特殊写法(H5规范) ? 17....Bootstrap 组件－巨幕.jumbotron，如果想让巨幕组件的宽度与浏览器宽度一致并且没 有 圆 角 ， 请 把 此 组 件 放 在 所 有 .container 元 素 的 外 面 ， 并 在
另一个与边距折叠相关的例子是子节点和父节点。...网格中，可以使用 grid-gap 属性轻松在列和行之间添加间距。...这是行和列间距的简写。 ?....element { display: flex; flex-wrap: wrap; } 当视口尺寸较小时，它们的确以新行结尾。见下文： ?...这将最终导致一个令人毛骨悚然的代码。 间隔组件的挑战 现在你了解了间隔组件的概念，让我们深入研究使用它们时遇到的一些挑战。这是我想到的一些问题： 间隔组件如何在父级内部取其宽度或高度？
CSS 网格中，可以使用 grid-gap 属性轻松地在列和行之间添加间距。...因此，导航项的宽度取决于它们的内容。 以下是解决方案： 设置导航项的最小宽度 增加水平填充 在分隔符的左侧添加额外的边距 最简单更好的解决方案是第三种，即添加一个margin-left。...editors=0100 网格系统中的间距 - Flexbox 网格是间距最常用的情况之一，考虑以下示例： 间距应该在列和行之间，考虑以下 HTML 标记： ....element { display: flex; flex-wrap: wrap; } 当视口尺寸较小时，它们确实会在新行中结束， 见下图： 需要解决的是in-between设计状态，两个item...以下是我想到的一些问题： 间隔组件如何在父组件中获取其宽度或高度？它将如何在水平和垂直布局中工作？例如：堆栈内的间隔符与添加左侧空间的间隔符。
1.2 参数 1.2.1 容器参数 参数名称 参数类型 描述 默认值 width 数字 可折叠标签的宽度。 auto height 数字 可折叠标签的高度。...当面板调整大小之后触发width: 新的宽度;height: 新的高度 onMove left,top 当面板移动之后触发left: 新的左侧位置top: 新的顶部位置 onMaximize none...当窗口最大化的时候被触发 onRestore none 当窗口恢复到原来的大小时被触发 onMinimize none 当窗口最小化的时候被触发 10.4 方法 名字 参数 描述 options none...刷新面板来加载远程数据 resize options 设置面板的大小和布局，这些选项包含以下的属性：width: 新面板的宽度; height: 新面板的高度; left: 新面板的左侧位置; top:...新面板的顶部位置 move options 移动面板到一个新的位置，这些选项包含以下属性: left: 新面板的左侧位置;top: 新面板的顶部位置 11 Tabs（标签） 11.1 实例 11.1.1
容器里面子元素不会影响到外部，外部的元素也不会影响到容器里面的子元素。 ? 规范 BFC 内部的盒子会从上至下一个接着一个顺序排列。...主要作用 创建独立的渲染环境 防止因浮动导致的高度塌陷 防止上下相邻的外边距折叠 如何创建 BFC html 元素本身就是 BFC display === flow-root/inline-block/...规范 行内元素从包含块顶端水平方向上逐一排列，水平方向上的 margin/border/padding 生效。...水平方向上，当行内元素的总宽度比行盒要小，那么行内元素在水平方向上的分部由 text-align 决定。...水平方向上，当行内元素的总宽度超过了行盒，那么行内元素会被分配到多个行盒中去，如果设置了不可折行等属性，那么行内元素会溢出行盒。
内容会填满视口的宽度，然后在必要的时候折行。因此，容器的高度由内容天然地决定，而不是容器自己决定。 普通文档流——指的是网页元素的默认布局行为。...当内容在限定区域放不下，渲染到父元素外面时，就会发生这种现象。...容器里面的内容只有一行文字吗？ 设置一个大的行高，让它等于理想的容器高度。这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为inline-block。 不知道内部元素的高度？...负外边距并不常用，但是在某些场景下很实用，尤其是当创建列布局的时候。不过应当避免频繁使用，不然网页的样式就会失控。 # 外边距折叠 当顶部和/或底部的外边距相邻时，就会重叠，产生单个外边距。...，防止它们折叠 使用 overflow:auto 防止内部元素的外边距跟容器外部的外边距折叠，这种方式副作用最小 如果容器为浮动元素、内联块、绝对定位或固定定位时，外边距不会在它外面折叠 当元素显示为
这一节我们将讲解美食页下半部分内容制作： 一、完善店铺推荐 接下来继续制作以下内容： 1.1 满减信息 现在咱们在对应的商家行中添加一个行，命名为满减，并且对应的更改高度为包裹： 随后更改其背景色...商家推荐内容制作 接着制作商家推荐内容： 我们接着在商家行之下创建一个行，命名为商品，并且设置其背景色和高度属性： 接着其内部的每个信息都是一块内容，并且是列存在的形式：：...我们在此创建一个列，命名为信息： 商家推荐内容分为3个，并且较为平均的占据了宽度，我们设置这个列的宽度为 33% 则可以刚好较为平均的占据整个行，并且设置背景色为透明： 接下来在信息列中添加一个图片...，这个分类是列的形式存在： 我们创建一个列，若这个列需要在一行中要显示5个，那么每个列的宽度需要设置为 20%： 随后添加对应的图片和文本： 在此需要注意，图片宽度需要设置为...，在属性中设置隐藏滚动条开启： 2.2 标签 其标签内容制作也非常简单： 添加一个行命名为推荐内容，然后在其中添加对应的文本即可，文本设置对应的内边距即可解决： 2.3 推荐商家
gravity和layout_gravity的区别 为什么 XML 资源文件要从文本格式编译成二进制格式 Android 资源管理框架又是如何快速定位到最匹配资源的 LinearLayout(线性布局...TableLayout(表格布局) // 特点 Shrinkable : 该列的宽度可以进行收缩，以使表格能够适应父容器的大小 Stretchable : 该列可以进行拉伸，以填满表格中空闲的空间...shrinkColumns 为设置被收缩的列的序号，收缩是用于在一行中列太多或者某列的内容文本过长，会导致某列的内容会被挤出屏幕，这个属性是可以帮助某列的内容进行收缩，用于防止被挤出的。...// GridLayout Android4.0之后新加的布局管理器 能够把整个容器划分为rows*columns的网格，每个网格可以放置一个组件 可以设置一个组件横跨多少列或者纵跨多少行 当单元格大小大于组件大小时...Android 资源管理框架又是如何快速定位到最匹配资源的 // 主要基于两个文件： 资源 ID 文件 R.java：赋予每一个非 assets 资源一个 ID 值，这些 ID 值以常量的形式定义在
如何解决？问题描述： 两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。...例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px百分比：将计算后的值传递给后代三栏布局的实现三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局...父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边...在中间⼈攻击中，攻击者可以拦截通讯双⽅的通话并插⼊新的内容。攻击过程如下:客户端发送请求到服务端，请求被中间⼈截获服务器向客户端发送公钥中间⼈截获公钥，保留在⾃⼰⼿上。...缺点：在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。
【网格系统】 .row 定义一行 .col 均分列数，最多一行12列。...每列左右间隙各15px .col-{1到12} 定义在所有屏幕下的列宽 .col-{sm|md|lg|xl}-{1到12} 定义在指定屏幕下该列占据的列宽，sm:屏幕>=576px、md:屏幕>=720px...、lg:屏幕>=960px、xl:屏幕>=1200px .offset-{1到11} 在所有屏幕下的列偏移 .offset-{sm|md|lg|xl}-{1到11} 在指定屏幕下的列偏移 【显示隐藏】...="#id" 属性来实现父元素下，某一个折叠选项显示时其他选项就隐藏。...-- 或者 --> 折叠 宽度百分比样式： .w-25 宽度25% .w-50 宽度50% .w-75 宽度75%
对于桌面版显示的线框，我们还剩下三列的博客文章。这一次，我们不会为接下来的三列创建单独的行。相反，我们将直接将这些列附加到现有的行中。你可能想知道我们怎么能有24列(6列在每一行中跨越4个引导列)。...嗯,Bootstrap只允许在一行中使用12个引导列。如果我们试着超过这个，剩下的这些列将被调整到下一行。这条新线将再次出现12个引导列的容量。这样，我们就可以将所有的博客文章列绑定到单个行中。...这里，我们希望每个博客文章的列占据所有12个引导列，这样我们就可以每一行只有一篇博客文章。...嵌套列 你可以在布局中任意列中创建一套新的12格Bootstrap网格。这可以通过在一个现有的列中构建一个新的行元素来完成，然后用自定义的列填充这一行。...由于我们在这里启动了一个新行，其中的任何列都可以跨12格，但是这一行的宽度将被限制到它的父类的宽度。 让我们用一个例子来说明这个问题。
3、一键找不同 操作方法：选取两列数据，按Ctrl+ 一秒找出不同的值 ? 4、两表快速核对 操作方法：复制其中一个表格数据，选中另一个表格 - 选择性粘贴 - 减 ?...5、身份证里提取生日 步骤1、复制身份证号码到生日列 步骤2、数据 - 分列。第1步选固定宽度，第3步保留代表生日的8位数字并设置成日期格式。搞定！ 动画演示： ? 提取结果： ?...7、数字拆分 操作方法：先输入一行内容，然后按Ctrl + E 快速拆分 ? 8、快速制作工资条 操作方法：在旁边列输入序号，复制两次，再复制标题行到最下面，然后按序号排序。 ?...一个妹子的美团面试经历，历经 4 轮 2 小时，成功拿到 Offer 面试吹牛用：Mybatis 中用到的 9 种设计模式！ 9个让你爱不释手的Json工具 史上最全的数据库面试题，面试前刷一刷！...由于微信公众号近期改变了推送规则，如果你想如常看到我们的文章，可以时常点击文末右下角的「在看」；或者将 趣学程序 星标。 这样操作后，我们每次新的推送才能第一时间出现在你的订阅列表中～
collapsable 当浏览器的宽度小于940像素（对于在较小的触摸屏设备上查看很有用）时，自动将导航元素折叠为菜单。...固定系统默认占用940像素的固定宽度，当引导响应式布局启动时（例如在平板电脑上），可能会假定其他宽度。 以下部分是官方Bootstrap 3网格系统文档的翻译，其中HTML代码被 R 代码取代。...行可以嵌套，但应始终包括一组列，这些列加起来等于其父列的列数（而不是像在流动网格中那样，在每个嵌套级别上重置为12）。...(10, "main" ) ) ) 列嵌套 在固定网格中，每个嵌套列的宽度必须与其父列的数量相加。...(6, "Level 2" ), column(3, "Level 2" ) ) ) ) 注意，嵌套列的总大小是9，与它们的父列相同
有三种常用方式可以达到两列自适应布局 float + BFC： 左元素在没有固定宽度的情况下设置浮动，因此宽度由内容撑开；右元素激活 BFC（这里采用 overflow:hidden）后，可以防止被浮动元素盖住...，且正是为了防止被盖住，右元素宽度才会由默认的撑满屏幕变为撑满剩余部分。...两种布局的对比： 优先加载主列。 三列浮动，配合负外边距形成三列布局 两种布局方式的主要区别在于如何处理主列，从而让其内容不被覆盖。...对于圣杯布局，它是利用父盒子的左右 padding 确保将主列内容挤到中间，在效果上表现为三个独立列；对于双飞翼布局，它是在主列里放置一个子盒子，利用子盒子的左右 margin 确保内容位于中间，在效果上表现为左右两列在主列上面...4.2 利用背景图片： 这种方法是我们实现等高列最早使用的一种方法，就是使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假象。
领取专属 10元无门槛券
手把手带您无忧上云
