如下图， 如何在 Discourse 中显示子分类。 discourse-sub-col-011207×872 147 KB 你可以在分类的设定中进行设置，这个设定需要在上级目录中设置。...discourse-sub-col-02556×656 76.3 KB 在当前的分类中，选择设定。...discourse-sub-col-03530×632 79.5 KB 你首先需要选择显示子分类列表中，才可以有下面的选择项。 如果你选择 Boxes 就可以在首页中显示子分类的列表了。...如果你不选择上门的选项的话，下面的列表是不会显示的，你可以通过这个自行确定如何显示子项目。 https://www.ossez.com/t/discourse-box/111
这个题很简单的，就是用一个按钮切换二个菜单的显示和隐藏。比昨晚的查找重复字符串要简单的多。...参与写作业的同学们基本都写的不错，思路也都OK，用原生JS，jQuery，ES6都可以，， 暴露出来的问题主要有二个， 一是DOM查找的效率问题，这个大家自己其实都懂，我就提一下不多说了哈，， 二是判断条件的选择...，就是用什么来做为if的判断条件，我个人觉得以下这种用字符串来判断，应该是不太OK的。。...OK，今天的作业很简单，就说这么多了。
$("#shouhou2").hide(); $("#shouhou3").hide(); //给div添加change..."2">折线图 柱状图 表格区域 折线图区域 柱状图区域 原文作者：祈澈姑娘 原文链接：https://www.jianshu.com/u/05f416aefbe1 创作不易...坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
本节会针对flex布局的常用属性，讲解如何将flex布局应用到实际项目中。...1 3 2 4 3 5 通过上面的案例，大家可以看到，默认情况下flex...justify-content justify-content属性可以控制flex项目在容器中的水平排列方式，示例代码如下所示 1 .container{ 2 display: flex; 3...;flex项目在主轴居中展示 此前我们将一个元素居中显示，通常将设置元素设置为固定宽度，然后为其设置属性margin：0 auto;对于宽度不固定的元素，我们只能使用一些奇淫技巧让其居中。...align-items align-items属性可以控制flex项目在容器中的垂直排列方式，示例代码如下所示 1 .container{ 2 display: flex; 3 border
flex-flow 属性，是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布行 (Line)，根据 flex-wrap 属性，弹性项目可以排布在单个行或者多个行中...: green;} a b cflex-grow 属性的默认值为 0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的上面的例子中...cflex-shrink 属性的默认值为 1，如果没有显示定义该属性，将会自动按照默认值 1 在所有子项宽度相加之后计算比率来进行空间收缩上面的例子中 c 定义了 flex-shrink...定义弹性盒子元素的排列方向，flex-wrap 控制 flex 容器是单行或者多行.box { display: flex; width: 220px; margin: 0; padding:...:lightgreen;">order 属性order 属性规定了弹性容器中的可伸缩项目在布局时的顺序，元素按照 order 属性的数值的增序进行布局，数值小的排在前面，可以为负值
导致这个过程被触发的原因有很多：元素位置移动、大小改变、增删节点以及这里要说的display显示与隐藏切换等等。而元素的变动需要页面快速的显示出来，所以在我们看来是“突兀”的。...为“box”的div里面放的就是“原本的页面整体”部分。...（这时候实际上展示的是space占位元素，但是此元素啥样式也没有，故而显示出来的就是下面的同宽度的“第二页面”z_two_page） ★这里需要注意的是：为什么“哈哈哈”所属div在前而“页面”所属div...” 代码中flex的前两个属性值为0，表示在空间增大或缩小时依然保持原状（这是本文的基础！）...那如何将“哈哈哈”展示在视野中？—— js控制“代表页面的元素”整体移动即可。
text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。...white-space: pre即可实现标签的效果 ---- text-overflow text-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。...父亲元素宽度的百分比 10.盒子模型 box-sizing CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。...both：清除左右两侧浮动 ---- 13.flex布局 flex CSS简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。...flex-direction CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。
以下是一个简单的代码案例演示，演示如何使用CSS盒子模型来控制元素的大小和位置： HTML 代码： Hello World!... CSS 代码： .box { width: 200px; /* 控制盒子的宽度 */ height: 100px; /* 控制盒子的高度 */.../* 控制外边距的大小 */ } 在上面的代码中，我们创建了一个包含文本的 元素，并使用CSS盒子模型来控制其大小和位置。...如果需要实现更精确的布局和尺寸控制，可以将box-sizing设置为border-box。 如何将盒子模型从默认的content-box改为border-box？...="box">盒子3 .container { display: flex; flex-wrap: wrap; } .box { flex-basis: 33.33%
界面要求 不论视口大小每行显示6个元素，文字超出长显示省略号（暂定显示一行） 当鼠标悬浮的时候，展示所有文字，卡片向下延展直到能够完全显示文字 先看效果图 分析 第一个要求我们可以用flex...布局实现，css控制文字效果 第二个，我们可以采用外层嵌套div的方式控制，当鼠标悬浮的时候展示内层div 看一下代码实现吧 代码展示 html元素 less控制每行布局 flex: 0 1 auto; (默认值为0 1 auto, 后两个属性可选) 三个参数分别是...: flex-grow(放大比例), flex-shrink(缩小比例) flex-basis(占据主轴的空间) .card_view { display: flex; justify-content...: flex-start; flex-flow: row wrap; align-items: flex-start; &-card { border-radius: 8px;
此属性控制在分解为列时如何平衡元素的内容。...flex-basis : 指定最小值 flex - 弹性布局子元素动态尺寸 描述: flex 属性设置了弹性布局如何增大或缩小以适应其弹性容器中可用的空间，此属性是 flex-grow、flex-shrink...="box3">Three 执行结果: flex-flow - flex 容器中布局及单多行显示 描述: 它是 flex-direction 和 flex-wrap 两个属性的缩写...属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。...属性指定 flex 元素单行显示还是多行显示。
； 工作原理 设置父元素的display属性为flex，则子元素都变成flex item，由此可以控制子元素的排列方式、尺寸、间距等； 兼容性 ?...div class="flex-container"> css: .flex-container{ max-width: 960px; margin: 0 auto; display:flex; } .box...Flex Wrap 如果我们不想在窗口变窄的情况下压缩flex item，而是让超出边界的flex item换行显示那我们可以设置flex container的flex-wrap： .flex-container...顾名思义，grow意味着增长，用于控制flex item的尺寸的伸展。
用来控制元素的盒子模型的解析模式，默认为content-boxcontext-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽border-box...如何居中div-水平居中1：给 div 设置一个宽度，然后添加 margin:0 auto; 属性div{ width: 200px; margin: 0 auto;}-水平居中2：利用 text-align...它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...BFC(block formatting context)，中文为“块级格式化上下文”对BFC的理解？BFC规定了内部的Block Box如何布局。定位方案：内部的Box会在垂直方向上一个接一个放置。...display：none 不显示对应的元素，在文档布局中不再分配空间(回流+重绘)visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间(重绘)即是，使用CSS display:
如想深入了解，可查阅《前端面试题中的“盒模型”是什么？》 2.3、flex - 弹性布局 Flex 是 Flex Box 的简写，意为弹性布局，为盒子提供最大的灵活性。...align-content 定义多根轴线的对齐方式 容器内的子元素增加，布局所占的系数：如： //其样式为 .box{ display:-webkit-flex; display:flex;...不设置其他属性的时候，弹性布局默认水平方向从左排列，还可以通过属性控制垂直方向布局，对齐方式等，可以点击《flex布局制作自适应网页 - 前端人 - 博客园》详细学习。...绝对单位：长度是固定的值，反应物理真实尺寸。如：px像素，一个像素相当于我们屏幕的一个小点，屏幕实际就是由很多个像素点组成的，不同显示器像素大小不同。还有cm、mm、in等等。
在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为 content-box，即标准盒模型； 如果将 box-sizing 设为 border-box 则用的是IE...elem:target 选择当前活动的elem元素。 :not(elem) 选择非elem元素的每个元素。 :enabled 控制表单控件的禁用状态。 :disabled 控制表单控件的禁用状态。...如何居中 div？...说明他们的作用。 block 块类型，默认宽度为父元素宽度，可设置宽高，换行显示。 none 元素不显示，并从文档流中移除。 inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。...以下6个属性设置在容器上： flex-direction属性决定主轴的方向（即项目的排列方向）。 flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-direction属性表示控制主轴的方向，row表示水平方向。 justify-content属性表示项目在主轴上的对齐方式，center表示中间。...二、实现定时跳转案例 1.在现实生活中，用户付款成功后，页面停留几秒钟显示信息，之后，返回到首页。小编带大家一起来学习利用定时器实现跳转的效果！...如果小于0，直接跳转到指定的页面。 效果图如下所示： ? 三、实现改变盒子大小案例 1.在Web项目开发中，用户根据不同操作修改显示的内容、CSS样式是最常见的功能。... 在上面代码中，实现一个宽和高为100px的div，id为box。...对每一个div层进行详解，让读者更好的理解。 2.在JavaScript中，实现限时秒杀、定时跳转案例主要帮助理解定时器的使用，改变盒子大小案例主要是帮助理解如何去修改显示的内容、CSS样式操作。
200px; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2;//显示的第几行加省略号...---一行显示不完的时候换行 */ } .list div { margin: 5px...DDD 2、效果2 //css中设置 .list { display: -webkit-flex...: row wrap; row横向（左向右）显示 column竖向（上向下）显示 wrap一行显示不完的时候换行 */ div{.../study/201012/css-box-pack-demo.html ---- （10）align-items（竖轴上的排列基准） flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
flex在css布局中的是一个经常考察的知识点，虽然垂直居中问题已经问得快烂大街了，flex你虽然总是在用，但是总会有你不知道的盲点 本文是一篇关于flex布局相关的总结笔记，遇到比较刁钻的问题，就当个知识拓展吧...在阅读本文之前，主要从以下几个方向去探讨flex flex布局又称为弹性布局，有何特征 关于flex的一些属性值 flex如何实现垂直居中，如何实现一个对角排列布局 flex特征 当我们对一个元素设置...flex-shrink 当前item的缩小比例，默认的是0 align-self 能控制单个item的排列，这个属性通常不是很常用，面试曾被这个css的属性布局问题给跪了 面试题大概是这样的，3个子...:1; flex-basis: 0%; } 元素垂直居中 以下是一个基本的页面结构 </div...just-content，以及交叉轴排列align-items属性的设置 align-self 这个属性可以单独控制当前元素的位置 flex实现一个垂直居中 本文code example[1] 参考资料
领取专属 10元无门槛券
手把手带您无忧上云
