3-1-2019更新：使用flex布局，align-items:flex-start即可。 ---- 设想这样一个情况：一个父元素有两个子元素，父元素的高度不确定，用子元素撑起来。...但是这会导致一个问题：各个子元素的高度不一致，为子元素添加height:100%是无效的。这种方式需要父元素高度确定，然而父元素的高度由子元素确定。...你可以 为父元素设置固定高度 配合height:100%，两个子元素都能撑满父元素 利用span元素与布局 如果span的定位是absolute类型，那么它的高度可以等于父元素的高度。...这种方法需要避免span元素与其他元素重合，需要留出span的位置，将span放到位置上。...这种方法下，父元素的高度仍然由最高的相对定位的子元素确定，其它元素放到span中，所以需要知道最高的子元素。 使用同色背景 虽然很简单，却很实用的方法。子元素的高度虽然不都是100%，但效果一样。
超链接伪类：如何在svg元素上使用超链接伪类a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;} a:visited 单击访问后超链接样式 a:visited {color...LVHA 这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 (:link, :hover,和:active)。...可以给所有元素添加。...在svg上使用超连接伪类 使用svg 在:visited中的样式将使用元素的非:visited 访问状态的 αlpha 分量， 如果该分量为0，这个样式将被完全忽略。
在浏览器版本越来越高的情况下，很多以前顾及到兼容问题不敢使用的html以及css属性现在已经很普遍的在使用了。比如一些伪类和伪元素。这里稍微提一下在实际工作中用到的一些小技巧，算是笔记。...1.focus，chenked伪类的使用。....checkbox-wrap input:checked + label span{background-position: 0 -20px;} 在input的checked状态下改变span元素的背景图片...2.还有after一个这么强大的伪对象，在以前竟然只是被用作清除浮动，实在是大材小用暴殄天物。看下面这个demo，就是使用after和befor这对好基友，来实现切换标签的current状态小尖角。...原理非常简单，利用border的展示特性制造两个实心尖角，嵌套之后得来一个空心（其实是实心的只是前景色与背景色一样。）
超链接伪类：如何在svg元素上使用超链接伪类?...可以给所有元素添加。...在svg上使用超连接伪类 使用svg 在:visited中的样式将使用元素的非:visited 访问状态的 αlpha 分量， 如果该分量为0，这个样式将被完全忽略。...最佳实践 在使用超链接伪类时，按照LVHA的顺序依次定义伪类样式，注意能够使用的样式属性，三个颜色，以及alpha的受限。
- 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。...__ 双下划线：双下划线用来连接块和块的子元素 _ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态 BEM 是一个简单又非常有用的命名约定。...使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定。..."button-primary">button> button> div> 复制代码 这种写法从 DOM 结构和类命名上可以了解每个元素的意义...important; } 2.2 在 CSS 预处理器中使用 BEM 格式 BEM 的一个槽点是，命名方式长而难看，书写不雅。相比 BEM 格式带来的便利来说，我们应客观看待。
BEM 使用 .form 而不是 元素的原因是因为 类允许无限的可重用性，而即使是最基本的元素也可能改变样式。 按钮很好地阐释了可以包含不同样式的块。...如果设置了一个 .button 类的按钮，则可以在任何 元素上选择是否使用 .button 类。...（BEM 元素具有 .block__element 语法）。 在这一点上，你仍然可能不喜欢 BEM 丑陋的 --modifier 语法。我知道为什么，但我爱上这个语法是因为我很讨厌命名。...所以，如果你看到一个像那样的名字，比如 form__row ，你将立即知道 .form 块中有一个 row 元素。 ? ? BEM 元素有两个优点 ： 你可以让 CSS 的优先级保持相对扁平。...你能立即知道哪些东西是一个子元素。 为了解释以上两点，考虑使用两个单独的 class 的替代方法（许多框架这么做的）。你可能会用这样的东西： ? ?
我们只需要设置了一个 .button 类的按钮，然后可以在任何按钮上使用该类，就可以生成该组件的传统样式。...使用.button而不是用button的原因是因为类允许无限的可重用性，而即使是最基本的元素也可能改变样式。...但是在实际的项目使用中，我们会发现一个按钮可能是大按钮，可能是小按钮，也可能是红色的，或者黄色的。于是就引申出了BEM的modifier。 什么是修饰符 修饰符是改变某个块的外观的标志。...元素有两个优点 ： 你可以让 CSS 的优先级保持相对扁平。...你能立即知道哪些东西是一个子元素。
如果使用 BEM 命名规范的话，这些元素的类名都可以通过在两条下划线后加上元素名称来产生。...在现实场景里，这可能是一个 red 或者 blue 的按钮。这就是之前在讲的组件当中的限定修饰。 如果使用 BEM 的话，这些修饰符的类名都可以通过在两条连字符后加上元素名来产生。...假如我们这个火柴人拥有另一个不一样的头部大小呢？ 一次元素被加上了修饰符。记住，元素指一个整体封装区块中的一个子组件。...这就是 BEM 的基本用法。 个人来说，我在小项目中一般只用连字符分割法来写类名，在用户界面更复杂的项目中使用 BEM 方法。 为何要使用命名规范？...使用 js- 类名 一种减少这类 bug 的方法是使用 js- 的类名命名方法。用这种方法来表明这个 DOM 元素和 JavaScript 代码的关联。
但是，如果只是“看起来有点怪”而事实上是一种有效的手段，那么我们在开发之前当然应该充分考虑它。是，BEM看上去确实怪怪的，但是它的好处远远超过它外观上的那点瑕疵。...这个例子中，网站logo完全是恰巧在.header的内部，它也有可能在侧边栏或是页脚里面。一个元素的范围可能开始于任何上下文，因此你要确定只在你需要用到BEM的地方你才使用它。...如果它是后者（即恰巧在.content的内部，而不总是在）我们就不需要使用BEM。 然而，一切都有可能潜在地用到BEM。...关于原子类(短类)与BEM BEM可以不需要用到原子类，但是如果已经引入了类似Bootstrap的框架，也没必要强制避免使用原子类，比如pull-right、ellipsis、clearfix等等类，这些类非常实用...如果我们用的是BEM，要覆盖样式很简单：找到要覆盖样式的元素，得知它的类名，在媒体查询中，用它的类名作为选择器，写下覆盖样式，样式就覆盖成功了，不需要担心前面样式的权重过大。
以前看过一些CSS的编码规范，也照着规范编写代码，但是还是觉得自己的CSS编码风格不是很好，在平时开发中使用各个知名的组件库的时候，发现现在挺多组件库都是BEM的命名风格了，于是找了比较知名的element...BEM代表“块（block），元素（element），修饰符（modifier）”，开发组件的过程中经常使用这三个实体，而在选择器中，这三个实体由以下符号来表示扩展关系： - 中划线：仅作为连字符使用...，表示某个块或者某个子元素的多单词之间的连接记号。...，我们应该把关注点放在if和eles分支上，为什么会出现hitAllSpecialNestRule函数判断的分支，原因是在修饰符或者其他mixin中嵌套一个元素element，会出现修饰符在前，而元素在后的编译结果...利用刚刚介绍的函数，以及块、元素、修饰符的实现代码，在sass中已经能非常高效率并且优雅的基于BEM规范的代码了。
题目要求 实现一个特殊的栈，在栈的基本功能的基础上，增加一个功能：返回栈中最小元素 要求： pop()，push()，getMin()操作的复杂度都为O(1) 设计的栈类型可以使用现成的栈结构 2....思路2 思路2对思路1进行了空间上的优化，在思路1中可能会压入重复的元素，优化思路如下： ? 5....} else if(element <= getMin()) { minStack.push(element); } // 只有当push的元素小于...minStack的栈顶元素时才minStack才push dataStack.push(element); } public int pop()...; } int value = dataStack.pop(); // 只有dataStack的栈顶元素=minStack的栈顶元素时
块（Block）：一个块是视觉上或者语义上的一个整体，它是一个具体且唯一的一个元素，例如，页面上的一个弹窗，或者是一个搜索框； 元素（Element）：一般认为是块的组成部分，元素比较用它父级的块名称做为前缀...通过上面的示例可以看出，块与元素是通过两个下划线（__）连接的，而元素和修饰符之间是通过两个短横线（--）连接的。...，修饰符名称同样使用小驼峰规则来命名，并且和组件名直接需要用两个短横线（--）进行连接，这与 BEM 表现一致。...SUIT CSS 可以说在 BEM 的基础上进行了改进，特别是去除了双下划线的设计，在观感上就比 BEM 美观了许多，而且各种名称都是通过驼峰的方式命名，省略了部分短横线，这让 SUIT CSS 的类名的长度上也会比...状态规则 状态是用来描述模块在不同状态下的外观，使用 is- 前缀，这有助于我们在 HTML 中区分元素的状态。
规则 BEM的命名模式在社区中有着不同方式，以下为 Yandex 团队所提出的命名规则为（本文中的代码使用该规则）： ....每个块名前应增加一个前缀，这前缀在 CSS 中有命名空间（如：m-、u-、分别代表：mod 模块、ui 元件）。每个块在逻辑上和功能上都相互独立。...同类型的块，在显示上可能会有一定的差异，所以不要定义过多的外观显示样式，主要负责结构的呈现。这样就能确保块在不同地方复用和嵌套时，增加其扩展性。综上所述，最终我们可以把BEM规则最终定义成： ....例：header title、menu item、list item 规则 元素名需能简单的描述出，其结构、布局或意义，并且在语义上与块相关联。块与元素之间用__连接。不能与块分开单独使用。...情景 search 组件中包含 input 和 button，是列表中的一个子元素。
块（block）是 BEM 的核心部分，它定义了一个 HTML 元素的基本结构和行为。块可以使用大写字母命名，例如 .Header、.Main、.Footer 等。...缺点: 不适合小项目: 小型项目不一定需要可扩展性、可读性和可维护性。 增加类的数量: 您可能需要将多个类添加到一个元素以说明所有样式元素。...这可能会给不熟悉 OOCSS 的人带来一些困惑，并且会使您的标记变得混乱。 学习成本: 如果您正在使用 OOCSS 而您的同事不熟悉它，这将需要他们在继续之前学习如何使用它，这需要时间。...无语义化的类名: 根据两个核心的分离原则，我们代码中不可能会出现 .btn 这样一个类名搞定样式的情况，我们只会拆分的很细，但同时我们又需要 .btn 这样的业务类名。...命名规则 SMACSS 推荐使用前缀来区分不同部件: 基础规则是直接作用于元素的，因此不需要前缀，一般使用元素、属性、伪类等选择器。不应该出: class、ID、!important 等。
反思BEM 在“学习爱BEM”中，我要表明我对BEM语法的新感受。 我很高兴地报告说，经过2年以上，我仍然对我的选择感到满意。 当我们在项目中选择代码风格时，我们使用BEM和ITCSS的组合。...怎么处理孙子元素 第一个是“孙子”的概念，它不是“标准BEM”的一部分（如果有这样的话）： .component /* Component */ .component...我的经验告诉我，这导致不必要的长类名（BEM已经有错，并且没有必要尝试在CSS中反映HTML的结构。 解决这个问题花了我很长一段时间。 在CSS中反映HTML的底层结构似乎是一个干净的想法。...如果你发现你的结构太深，你可能需要定义一个新的组件。 缩短修饰符长度 在BEM中，修饰符类用两个连接符表示。 例如，我们有一个带有基类c-button的按钮。...举个例子：如果你的类命名为c-button--large，如果你想去除它，你可以在项目中包括javascript,html, css中搜索使用到这个字符串的地方。 使用这种方法，你能寻找到什么？
通常我们会认为浏览器是这样工作的：找到唯一ID元素ul-id —> 把样式应用到li元素上。...事实上: 从右到左进行匹配，遍历页面上每个 li元素并确定其父元素 #ul-id li {} 所以不要让你的css超过三层。...button-primary"> 这种写法从 DOM 结构和类命名上可以了解每个元素的意义...这有悖BEM命名规范，BEM的命名中只包含三个部分，元素名只占其中一部分，所以不能出现多个元素名的情况。这样的约定可以防止当层级很深命名过长的问题。....Component { display: block; } 总结 BEM 最难的部分之一是明确作用域是从哪开始和到哪结束的，以及什么时候使用或不使用它。
而 BEM 就不一样了，虽然看上去很丑，但我们能清晰地看到有个叫 .site-search 的块，它内部是 .site-search__field 和 site-search__button 两个元素。...AM 是一种使用 HTML 属性及其值而非样式元素的类的技术。这样每个属性都可以有效地声明一个单独的命名空间来封装样式信息，从而使 HTML 和 CSS 更具可读性和可维护性。...使用 Tailwind CSS 后的代码就像下面这样，每个块元素上通过很多的 CSS 类来定义样式，基本不需要我们自己定义，即使有，也只需要写很少一部分额外的 CSS 代码，当然，也可以对 Tailwind...而 CSS Modules 则会将两个 class 名字通过 JS 手段编译最终生成两个不同的 class 名附加到元素上从而避免样式冲突，相当于为 CSS 搞了一个作用域。...So，我想说的是，如果你的团队 CSS 问题如上，那就赶紧行动起来吧，在现代的 CSS 模块化方案之上再使用一些像 BEM、ACSS 等约束来把 CSS 规范起来，简单省事，利大于弊。
Peergrade.io 处理CSS的方式 法则一：（给类名）加上前缀 在Peergrade.io我们在所有类名中用了前缀 .pg 。在CSS代码库里不使用前缀是自找麻烦。...在你写它的时候你可能认为在.profile-description里只会有一个列表，但一两个月后你发现不得不需要另外一个列表，页面结构很快超出你的设想。...法则三：采用BEM命名来开发组件 在构建可隔离组件时，尽可能采用BEM命名方案给类命名。...这就允许我们只要指定区块的修饰符——也就是正在编辑的内容—— 不用在区块内的所有子元素上重复修饰符（BEM中的E）。...为了更好地理解类似BEM的命名方式，前往查看Harry Roberts的CSS指南的类BEM命名部分。（需要提到的是，我们发现Harry实际上建立了一套跟我们类似的命名方案。）
BEM即块(Block)、元素(Element)、修饰符(modifier)，是由著名的俄罗斯搜索引擎团队Yandex提出的一种前端命名方法论。...hand是在表示指针（英文hand有钟表指针的含义）还是一只正在玩指纸牌的手呢？使用BEM我们可以获得更多的描述和更加清晰的结构，并且通过命名我们就可以知道元素之间的关联。代码如下： 使用BEM记号法后就是下面的代码： 使用两个横线（--） --> 元素使用两个下划线（__） --> BEM看上去有些怪怪的，但是它的好处远远超过外观上的瑕疵BEM有可能导致输入更长的文本，但是大部分编辑器都有代码自动补全的功能，而且gzip压缩将会让我们消除对文件体积的担忧 更多干货笔记关注微信公众号
BEM 是 Block（块） Element（元素） Modifier（修饰器）的简称 使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰（弊端主要是名字会稍长...） 如何使用BEM 一个独立的（语义上或视觉上），可以复用而不依赖其它组件的部分，可作为一个块（Block） 属于块的某部分，可作为一个元素（Element） 用于修饰块或元素，体现出外形行为状态等特征的...，可作为一个修饰器（Modifier） 在本规范中，以双下划线 __ 来作为块和元素的间隔，以单下划线 _ 来作为块和修饰器 或 元素和修饰器 的间隔，以中划线 - 来作为 块|元素|修饰器 名称中多个单词的间隔...保证各个部分只有一级 B__E_M ，修饰器需要和对应的块或元素一起使用，避免单独使用 类名作为选择器，不使用ID或标签名来约束选择器，且CSS（或者SCSS编译后的CSS）中的选择器嵌套不超过2层，增加效率和复用性，减少选择器之间的耦合度 比较常见的嵌套情景：需要通过块状态对内部元素进行调整时
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
