我希望实现一个左中右三列的布局，其中左右部分固定宽度，中间部分自适应： 实现起来很简单，代码如下： left<...但遇到中间部分内容很长的时候，UI 就变形了： 为了固定住左右部分的宽度，需要给 left 和 right 加上flex-shrink: 0。...-- 宽度为800px的内容--> long right ...codepen 在这里 flex-basis（默认值 auto） flex-basis指定项目占据主轴的空间，如果不设置，则等于内容本身的空间： 四、总结 本文从问题出发，讲解了Flex布局在实战中的应用...，并深入到flex-grow，flex-shrink和flex-basis的细节，描述了项目空间在填充和溢出情况下的计算方式，希望对你有所帮助。
但不要忘记了我们给它设置了浮动 —— 浮动元素具有包裹性，在不显式设置宽度的情况下由内容撑开。这里如果不设置 100% 宽度，且里面没有足够的内容，那么会导致布局崩坏。...3.1.3 缺点； 如果其中一列内容高度拉长，其他两列的背景并不会自动填充（后面介绍的等高布局可以解决这个问题） 3.2 双飞翼布局： 双飞翼布局在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离...对于圣杯布局，它是利用父盒子的左右 padding 确保将主列内容挤到中间，在效果上表现为三个独立列；对于双飞翼布局，它是在主列里放置一个子盒子，利用子盒子的左右 margin 确保内容位于中间，在效果上表现为左右两列在主列上面...给各个子元素设置一个大数值的 padding-bottom，再设置相同数值的负的 margin-bottom，并给总的父盒子设置 overflow:hidden，把溢出背景切掉。...假设某一列高度最大，则父盒子的高度会等于这一列高度，而其他列本来的留白部分由带背景色的 padding 补偿。
：规定当文本溢出时，显示省略符号来代表被修剪的文本 white-space：设置文字在一行显示，不能换行 overflow：文字长度超出限定宽度，则隐藏超出的内容 overflow设为hidden，...需要注意的是，如果文本为一段很长的英文或者数字，则需要添加word-wrap: break-word属性。 2.flexbox（弹性盒布局模型）是什么，适用什么场景？...border box）的左边相接触（从右向左的格式的话，则相反），即使存在浮动 浮动盒的区域不会和 BFC 重叠 计算 BFC 的高度时，浮动元素也会参与计算 应用 自适应两列布局 防止外边距（margin...但是，如果CSS支持了父选择器，那就必须要页面所有子元素加载完毕才能渲染HTML文档，因为所谓“父选择器”，就是后代元素影响祖先元素，如果后代元素还没加载处理，如何影响祖先元素的样式？...但是，如果支持父选择器，则整个文档不能有阻塞，页面的可访问性则要大大降低。 有人可能会说，要不采取加载到哪里就渲染到哪里的策略？
语义：无明确的含义，通常就是代表“盒子”；应用：根据布局的需要，可以使用到任何地方，可以用id和class来对进行定义或区分。...A：如果父元素只包含浮动元素，那么在未设置高度的同时，则父元素高度坍塌为零。 解决“塌陷”的办法： step 1. 创建一个用来清除浮动的CSS样式类（.clearfix） step 2....针对包裹的全是浮动元素的父级容器使用（.clearfix） 如下：相当于在父元素中补一个内容，然后再做清除。...（默认值） hidden 溢出的内容被隐藏，无法查看 scroll 无论内容是否溢出，容器都被添加滚动条。（溢出才激活） auto 当内容溢出时，容器边缘（纵向）出现滚动条。...如果同时定义了类型和图像，则图像优先。 实际应用原则： 1. 使用盒子模型属性来精确控制列表 2.
例如，在父内容里面垂直居中一个块内容;使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同等场景下使用浮动和定位可能难以实现。...{ /* 选择第一个div，首先使用 flex: 1 100px; 简单的给它一个最小的高度 100px，溢出则换行 */ flex: 1 100px; display: flex...auto : 如果该网格轨道为最大时，该属性等同于 ，为最小时，则等同于 。...，如果内容尺寸大于 100 像素则会根据内容自动调整。...（column）相关的尺寸和位置，跨度或不添加任何内容（自动），从而指定其 grid area。
content="width=device-width,initial-scale=1"/> CSS媒体查询 如果您不熟悉响应式Web设计，则媒体查询是第一个要学习的最重要的CSS功能。...下面是移动优先样式的常见用例示例，其中对于较小的设备，列的宽度为100%，但在较大的视口中，列的宽度为50%。...我们设置main标签设置为flex-wrap: wrap，这个设置为允许其内部子节点在父节点中换行， flex-basis: 100% 是指我们的div节点的宽度是相对于父节点宽度的100％（图1）。...使用内容溢出滚动条进行水平滚动 可能会有这样一种情况：您的内容会溢出界面，而没有一种优雅的处理方式去解决。没关系，内容溢出滚动条可以为你解决这个问题。 此技术的常见用途包括可滚动菜单和表格。...最后，宽度和高度为100％会使子级iframe元素成为其父级的100％。父级.videoWrapper完全控制建立此宽高比布局。
两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式 1.float+overflow:hidden 如果是普通的两列布局，浮动+普通元素的margin便可以实现，但如果是自适应的两列布局，...③ 缺点 center部分的最小宽度不能小于left部分的宽度，否则会left部分掉到下一行 如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。...两种布局方式的不同之处在于如何处理中间主列的位置： 圣杯布局是利用父容器的左、右内边距+两个从列相对定位； 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整 四、等高布局 等高布局是指子元素在父元素中高度相等的布局方式...，再设置相同数值的负的 margin-bottom，并在所有列外面加上一个容器，并设置 overflow:hidden 把溢出背景切掉。...这也是为了防止负 margin 导致 footer 覆盖任何实际内容。 于2019.1.2重新修改，如果觉得文章对你有些许帮助，欢迎在我的GitHub博客点赞和关注，感激不尽！
在很多时候都需要处理文字的溢出，尤其是对单行网格处理时，需要避免文字过长导致容器撑坏的情况。...html 1 2 3 一个标题很长的标签...一个标题很长的标签 一个标题很长的标签 5 一个标题很长的标签 7 8 × 9 COPY 确定好外层容器的宽高后，可以对 span 的父元素设置 mask。...，那么可以用 @supports 查询，是否支持这个属性，如果支持才使用，不支持就使用 text-overflow: ellipsis;。 修改一下，span 的父级样式。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 注意：负值对该属性无效。 ?...假定：这5个子项的比例为1:1:1:1:2，则多出来的400px要被分为6份，于是我们可以计算子项将被移除的溢出量是多少： flex-basis为400px的，被移除溢出量：400/6*2，即约等于133.33px...默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。...，类似于border，区别是不占用任何空间，因此设了column-rule不会导致列宽的变化。...默认值auto各列的高度随内容自动调整，balance所有列高都设为最高的列高 下一篇内容预告： web在线字体 css3兼容处理 移动web开发基础
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 > 注意：负值对该属性无效。...假定：这5个子项的比例为1:1:1:1:2，则多出来的400px要被分为6份，于是我们可以计算子项将被移除的溢出量是多少： flex-basis为400px的，被移除溢出量：400/6*2，即约等于133.33px...默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。...，类似于border，区别是不占用任何空间，因此设了column-rule不会导致列宽的变化。...默认值auto各列的高度随内容自动调整，balance所有列高都设为最高的列高 下一篇内容预告： web在线字体 css3兼容处理 移动web开发基础 联系老马 对应视频地址：https://qtxh.ke.qq.com
但如果认真阅读一下css规范，会发现overflow:hidden其实并不一定隐藏溢出内容。...overflow:hidden并不隐藏所有溢出的子元素 对于overflow:hidden的最大误解时：当一个具有高度和宽度中至少一项的容器应用了overflow:hidden时，其内部的任何溢出的内容都将被剪裁...但如果后代元素的包含块是整个视区（通常指浏览器内容可视区域，可以理解为body）或者是该容器（定义了overflow的元素）的父级元素时，则不受影响。 即使是我重新整理过的语言，还是感觉有点绕。...这个大家其实比较熟悉，一个绝对定位的元素，其包含块是最近的拥有relative或者absolute定位属性的祖先元素，如果任何一级祖先元素都不符合，则其包含块是body元素（更正：浏览器内容区域）。...（2012-09-05: 如果给body元素指定宽高且不指定position:relative，则body也不是绝对定位子元素的包含块。
两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式 1.float+overflow:hidden 如果是普通的两列布局，浮动+普通元素的 margin便可以实现，但如果是自适应的两列布局...当内容溢出时会自动撑开父元素。...③ 缺点 center 部分的最小宽度不能小于 left 部分的宽度，否则会 left 部分掉到下一行 如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。...两种布局方式的不同之处在于如何处理中间主列的位置： 圣杯布局是利用父容器的左、右内边距+两个从列相对定位; 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整 四、等高列布局 等高布局是指子元素在父元素中高度相等的布局方式...这也是为了防止负 margin 导致 footer 覆盖任何实际内容。
基于这套工具集，我们可以很容易的搭建和 MD 风格相统一的界面。 极简的 API Angular Material 的官方文档可能稍微不太友好，总感觉内容很多，看不进去。... 最后可以根据自己的需求调整一下样式。...表格 Angular Material 的表格是我见过最特殊的表格，结构简洁，通过定义动态列渲染数据，以下是一个官网例子： <table mat-table [dataSource]="dataSource...mat-table 对表格列宽的首选操控方式是 CSS，起初我对这种方式也存在疑虑，但是在我亲自封装了 ng-zorro-antd 的表格组件之后，我发现一切都很自然。...任何组件库都无法满足所有业务需求，如果你无法在 Angular Material 中找到可用的组件，你可以尝试第三方组件，或者可以将 ng-zorro-antd 按模块单独引入。
单行文本溢出省略 核心 CSS 语句 overflow: hidden; 文字长度超出限定宽度，则截断超出的内容 white-space: nowrap; 规定段落中的文本不进行换行 text-overflow...: ellipsis; 文本溢出时，用省略号来代替 Demo div { width: 150px; height: 50px; border: 1px solid red;...这是一段很长的文本这是一段很长的文本 效果图 多行文本溢出省略 核心语句 -webkit-line-clamp: 2; 限制在一个块元素显示的文本的行数，2 表示最多显示两行...; 和 1 结合使用，将对象作为弹性伸缩盒子模型显示 overflow: hidden; 文字长度超出限定宽度，则截断超出的内容 text-overflow: ellipsis; 文本溢出时，用省略号来代替...> 这是一段很长的文本这是一段很长的文本这是一段很长的文本 效果图 这样就很容易的实现了多行文本溢出显示省略号的效果，不过这个方案有个不好的点就是兼容性不好
比如，我们可以使用浮动来实现一个左侧导航栏、右侧主体内容的页面布局。 浮动的工作原理很简单。当一个元素设置为浮动后，它会尝试尽可能地向左或者向右移动，直到遇到包含它的容器边界或者其他浮动元素。...这样可以强制容器元素包含浮动元素，并且不会出现溢出的情况。...，但是需要注意的是如果网页中存在大量浮动元素，使用JavaScript来清除浮动可能会对性能产生影响。...需要注意的是，浮动元素只会影响其后的同级元素。 举个例子，你可以为一个图片元素设置 float: left，这会使图片沿父容器左侧浮动，同时后面的文本会环绕这个图片。...这会使该元素不允许出现在浮动元素的旁边，从而实现清除浮动的效果。 使用伪元素：这是一种常用的自动清除浮动的方法。
，默认第一个参数控制上下，第二个参数控制左右，如果写三个参数则第一个控制上，第二个控制左右，第三个控制下，如果四个全写则控制顺序为上、右、下、左（顺时针）。...浮动常用的三种方式：l left 向左浮动 right 向有浮动 none 默认值，不浮动 1.8.1浮动带来的影响 会使浮动框的父标签塌陷，就是当边框是父标签的时，如果子标签设置为浮动，则外边框就会塌陷成一条线...溢出属性 溢出发生的原因是标签的文本内容太多，标签的尺寸放不下这么多内容，导致标签文本内容的溢出。...auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。...已经定位过指的是这个标签的position不是static状态。 重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。
第一层比较：找第一等级选择器 ，如果有以这个样式为主 ，如果没有，则看第二等级选择器 第二层比较：找第二等级选择器 ，个数多的权重最高，如果都没有，则看第三等级选择器。...第三层比较：找第三等级选择器 ，个数多的权重最高，如果都没有，则看第四等级选择器。 第四层比较：找第四等级选择器 ，个数多的权重最高，如果都没有，则看第五等级选择器。...第五层比较：找五等级选择器 ，个数多的权重最高，如果都没有，则看第六等级选择器 第六层比较：找六等级选择器 ，个数多的权重最高，如果都没有，看是否继承父元素样式。...并且只要父元素隐藏，子孙没有任何办法可见 子孙元素全部不可见，但是给子孙加上 visibility: visible;时，子孙可见。 事件触发 不触发 不触发 9、伪元素与伪类的区别和作用？...这3层结构的计算规则具体如下 （1）如果没有CSS尺寸和HTML尺寸，则使用固有尺寸作为最终的宽高。 （2）如果没有CSS尺寸，则使用HTML尺寸作为最终的宽高。
先来点基础的，单行文本溢出省略 核心 CSS 语句 overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容） white-space: nowrap；（设置文字在一行显示，不能换行）...: hidden; text-overflow: ellipsis; } 这是一段很长的文本这是一段很长的文本 复制代码运行代码 示例图片 ○ 基于 JavaScript 的实现方案 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号...class='demo'> 这是一段很长的文本 复制代码运行代码 示例图片 原理讲解 有 A、B...如果 B 盒子文本过多，高度超过了 A 盒子，则 C 盒子不会停留在右下方，而是掉到了 A 盒子下。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
