如下图， 如何在 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">折线图 柱状图 div...id="shouhou1" style>表格区域div> div id="shouhou2" style>折线图区域div> div id="shouhou3..." style>柱状图区域div> 原文作者：祈澈姑娘 原文链接：https://www.jianshu.com/u/05f416aefbe1 创作不易...坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
本节会针对flex布局的常用属性，讲解如何将flex布局应用到实际项目中。...1div> 3 div class="box">2div> 4 div class="box">3div> 5 div> 通过上面的案例，大家可以看到，默认情况下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;}flex"> a b cflex-grow 属性的默认值为 0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的上面的例子中...cflex-shrink 属性的默认值为 1，如果没有显示定义该属性，将会自动按照默认值 1 在所有子项宽度相加之后计算比率来进行空间收缩上面的例子中 c 定义了 flex-shrink...定义弹性盒子元素的排列方向，flex-wrap 控制 flex 容器是单行或者多行.box { display: flex; width: 220px; margin: 0; padding:...:lightgreen;">div>div>order 属性order 属性规定了弹性容器中的可伸缩项目在布局时的顺序，元素按照 order 属性的数值的增序进行布局，数值小的排在前面，可以为负值
导致这个过程被触发的原因有很多：元素位置移动、大小改变、增删节点以及这里要说的display显示与隐藏切换等等。而元素的变动需要页面快速的显示出来，所以在我们看来是“突兀”的。...为“box”的div里面放的就是“原本的页面整体”部分。...（这时候实际上展示的是space占位元素，但是此元素啥样式也没有，故而显示出来的就是下面的同宽度的“第二页面”z_two_page） ★这里需要注意的是：为什么“哈哈哈”所属div在前而“页面”所属div...” 代码中flex的前两个属性值为0，表示在空间增大或缩小时依然保持原状（这是本文的基础！）...那如何将“哈哈哈”展示在视野中？—— js控制“代表页面的元素”整体移动即可。
不同类型的 Box， 会参与不同的 Formatting Context （一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。...它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...class="parent"> div class="box1">div> div> div class="box2">div>在上述代码中...div class="flex-item">3div> div>在上述代码中，.flex-container 作为弹性容器创建了 FFC，内部的 .flex-item...对齐方式：和 FFC 类似，在网格布局中也有多种对齐方式来控制元素在网格单元格内以及整个网格容器内的对齐情况，比如 justify-items（控制元素在单元格内水平方向的对齐）、align-items
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 容器中布局的，定义了主轴的方向(正方向或反方向)。
透明背景div> div> 背景图片 background-image: url(...); 比 image 更方便控制位置(图片在盒子中的位置) 注意: url 不要遗漏. url 可以是绝对路径...此处的修改不会影响代码, 刷新就还原了~ 如果 CSS 样式写错了, 也会在这里有提示. (黄色感叹号) 元素显示模式 在 CSS 中, HTML 的标签的显示模式有很多....任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局. flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式....主要的 Flexbox 属性 容器属性 以下属性应用于 Flex 容器，用于控制项目如何布局： flex-direction：定义主轴的方向（项目的排列方向）。 row：从左到右排列（默认）。....container { flex-wrap: wrap; } 项目属性 这些属性用于控制 Flex 项目如何在容器内分布： flex：综合属性，定义项目的增长、缩小和基础尺寸。
以下是一个简单的代码案例演示，演示如何使用CSS盒子模型来控制元素的大小和位置： HTML 代码： div class="box"> Hello World!... div> CSS 代码： .box { width: 200px; /* 控制盒子的宽度 */ height: 100px; /* 控制盒子的高度 */.../* 控制外边距的大小 */ } 在上面的代码中，我们创建了一个包含文本的 div> 元素，并使用CSS盒子模型来控制其大小和位置。...如果需要实现更精确的布局和尺寸控制，可以将box-sizing设置为border-box。 如何将盒子模型从默认的content-box改为border-box？...="box">盒子3div> div> .container { display: flex; flex-wrap: wrap; } .box { flex-basis: 33.33%
界面要求 不论视口大小每行显示6个元素，文字超出长显示省略号（暂定显示一行） 当鼠标悬浮的时候，展示所有文字，卡片向下延展直到能够完全显示文字 先看效果图 分析 第一个要求我们可以用flex...布局实现，css控制文字效果 第二个，我们可以采用外层嵌套div的方式控制，当鼠标悬浮的时候展示内层div 看一下代码实现吧 代码展示 html元素 div class="card_view..."{name:card.name}"> div> div> 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">Threediv> div> 执行结果: flex-flow - flex 容器中布局及单多行显示 描述: 它是 flex-direction 和 flex-wrap 两个属性的缩写...属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。...属性指定 flex 元素单行显示还是多行显示。
； 工作原理 设置父元素的display属性为flex，则子元素都变成flex item，由此可以控制子元素的排列方式、尺寸、间距等； 兼容性 ?...div class="flex-container"> div class="box one">div> div class="box two">div> div class=..."box three">div> div> 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:
在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属性定义，如果一条轴线排不下，如何换行。
如想深入了解，可查阅《前端面试题中的“盒模型”是什么？》 2.3、flex - 弹性布局 Flex 是 Flex Box 的简写，意为弹性布局，为盒子提供最大的灵活性。...align-content 定义多根轴线的对齐方式 容器内的子元素增加，布局所占的系数：如： div class="box"> div class="child">div> div class...="child">div> div class="child">div> div> //其样式为 .box{ display:-webkit-flex; display:flex;...不设置其他属性的时候，弹性布局默认水平方向从左排列，还可以通过属性控制垂直方向布局，对齐方式等，可以点击《flex布局制作自适应网页 - 前端人 - 博客园》详细学习。...绝对单位：长度是固定的值，反应物理真实尺寸。如：px像素，一个像素相当于我们屏幕的一个小点，屏幕实际就是由很多个像素点组成的，不同显示器像素大小不同。还有cm、mm、in等等。
200px; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2;//显示的第几行加省略号...---一行显示不完的时候换行 */ } .list div { margin: 5px...div>DDDdiv> div> 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：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
