ABB 3HAB8101-18/09A 可以包含不同的元素图片在当今紧迫的期限和日益增加的产品复杂性环境中，满足最高质量标准和法规变得更加困难。客户需要完美无瑕的商品。...公司可以使用人工智能来检测生产过程中可能导致质量问题的故障。这些缺陷可大可小，但它们都会对整体性能产生影响，可以及早消除。...它可以与基于云的数据处理平台结合使用以产生自动响应。制造商还可以在产品首次投放市场时收集有关其产品性能的数据，以便他们在未来做出更好的战略决策。
通过上述的描述，可以知道margin-top margin-bottom margin-left margin-right 百分比的长度是由当前元素的包含块的宽度来决定的。...，称为元素的包含块。...因此满足第一种情况，取它最近的祖先元素，也就是包含块为 container....Case3 当前元素为 position:fixed ，此时的包含块为视口。...每一个问题都对应着一个知识块。 ::after 伪元素有什么特殊的魔法吗？ -> 伪元素(Pseudo elements) margin-top:100% 为什么能够自适应宽度？
在这种情况下，这个表单可以是一个块。在 BEM 中，块被写为像 class 的名字一样，如下所示： ?...BEM 使用 .form 而不是 元素的原因是因为 类允许无限的可重用性，而即使是最基本的元素也可能改变样式。 按钮很好地阐释了可以包含不同样式的块。...第二部分（ :not([class*='button__']) ）告诉解析器将包含.button__任何东西排除在外，于是排除了 BEM 元素。...所以，如果你看到一个像那样的名字，比如 form__row ，你将立即知道 .form 块中有一个 row 元素。 ? ? BEM 元素有两个优点 ： 你可以让 CSS 的优先级保持相对扁平。...创建新的块来保存孙元素 在上述情况下，你可以轻松地将 .comments__comment 拆为 .comments 和 .comment ： ? 这更有意义，不是吗？
Python抛出异常【1】 程序运行过程中 Python解释器遇到一个错误 会停止程序的运行 并且提示一些错误信息 这个 就是异常 程序停止并且提示错误信息的动作叫做抛出异常 抛出异常原因 主动捕获异常 可以增加健壮性...ArithmeticError 算术错误的基类 ZeroDivisionError 算数错误的子类，除法或模运算的第二个参数是零 BufferError 缓冲区错误 注意 如果不确定需要打印异常种类 只是单纯不想让程序暂停 可以使用基类...… 是固定的语法格式 打印traceback信息 finally 后的代码不管是否抛出异常都会执行 except 的原理 调用sys中 exc.info 方法返回基本信息 所以抛出异常的第一步拓展可以在这里开始
BEM 可以帮助我们解决这个问题。BEM 是一种命名约定，是英文 Block Element Modifier（块元素修饰符）的缩写。 这种方法可以使我们的代码结构化，并提高模块化和可重用性。...现在让我们说一说什么是块、元素和修饰符。 块 你可以把块视为组件。还记得你小时候玩过乐高积木吗？让我们回忆一下小时候。 如果需要建造一个简单的房子，你会怎么做？...这些就是我们的元素。它们是块的一部分，它们对于建块必不可少。但是，在块外面的时候，它们便无用武之地。...块和元素可以嵌入其他块和元素，但是它们必须是完全独立的。请记住：独立。所以如果你想将把一个按钮放在标题下的话，就不要在按钮上加边距，否则按钮就会与标题绑定。请改用工具类。...是的，你的 HTML 文件会超负荷，但是不用担心，与 BEM 带来的好处相比，这只是个小小的缺点。 示例 以下是一个练习。你可以去你最喜欢或最常用的网站，然后想想看哪些是块、元素和修饰符。
BEM 是 BlockElementModifier 的缩写 ，其中B 表示块（block）、E 表示元素（element）、M 表示修饰符（modifier）。 这三个部分通常使用__ 与--连接。...即： .块__元素--修饰符{} Block：代表了一个独立的块级元素，可以理解为功能组件块。...语义化 BEM 的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的。...这有悖BEM命名规范，BEM的命名中只包含三个部分，元素名只占其中一部分，所以不能出现多个元素名的情况。这样的约定可以防止当层级很深命名过长的问题。...上面我们每个样式都要写一遍 card，如果 card 换成一个比较长的单词，这样也太冗长了，这也是大家不太喜欢 bem 的一个原因，但这个 sass 或 less 是很好的解决的，我们可以用 & 表示根元素
BEM 帮助我们解决该问题。BEM 是一种命名约定，表示“块 元素 修饰符”。 该方案可以使我们的代码更加结构化，更加模块化和更大的可复用性。现在我来解释下什么是块、元素和修饰符。...块 块通常被视为一个组件。还记得小时候玩的乐高吗？好的，让我们回到小时候。 你打算如何建造一座简单的房子？你需要一个窗户，一个屋顶，一扇门，一些墙，就这些东西，这些就是我们需要的块。...这就是我们的元素。它们是“块”的一部分，它们是建造“块“的必需品，但离开了”块“，它们什么都不是。...它们是块或元素的标识，用于更改行为、外观等。 命名: 块元素名称或元素名称+ -- +修饰符名称: .Block__element-modifier，.Block-modifier。...块/元素可以嵌套到其它块/元素中，但它们必须是完全独立的。记住这个词：独立。所以，不要在按钮元素上写margin，因为你想要把按钮放在标题元素下，否则你的按钮将会和标题元素强耦合。
BEM即块(Block)、元素(Element)、修饰符(modifier)，是由著名的俄罗斯搜索引擎团队Yandex提出的一种前端命名方法论。...BEM命名约定更加严格，而且包含更多的信息，一般用于团队开发一个耗时的大项目中。...，如： .myHeader-search{ ... } /* 自定义的某个块 */ .myHeader-search__textElement{ ... } /* 自定义块中的textElement元素...*/ .myHeader-search--full{ ... } /* 自定义块中的full修饰符 */ BEM的关键在于，光凭名字就可以告诉其他开发者某个标记(class)是用来干什么的。...使用BEM我们可以获得更多的描述和更加清晰的结构，并且通过命名我们就可以知道元素之间的关联。代码如下： <!
换句话说，影响块或其元素的位置的属性应该被抽象为一个单独的类用于重复利用。 在CSS中，定位块的行为也称为布局块。 在一般意义上，定位是布局。...响应式排版的付款表单 在上面的设计中，您可以看到该表单包含两行输入元素。 第一行中有两个相等大小的输入框，第二行中有两个不同大小的输入框。 为了区分这三个不同大小的输入框，我选择了布局前缀： ?...仍然被认为是一个对象，因为它不包含对象和组件。 倒计时器的HTML结构如下： ? 注意.o-countdown包含三层HTML元素。虽然它很大了，但它仍然是一个对象，因为它不包含任何其他对象或组件。....你可以选择任何的对象，并把它放在你喜欢的地方，而且并不会破坏你的网站的结构。 这也意味着对象不应该更改外部任何结构。 因此，对象块不能包含任何这些属性/值： absolute 和 fixed 定位。...这被称为BEM混合，它允许我使用组件的类来创建一个对象，而不影响原始按钮。 组件的总结 组件（.c-）是您可以在整个站点中使用的更大的构建块。
块（block）是 BEM 的核心部分，它定义了一个 HTML 元素的基本结构和行为。块可以使用大写字母命名，例如 .Header、.Main、.Footer 等。...元素（element）是块的一个组成部分，它定义了块中特定内容的样式。元素可以使用小写字母命名，例如 .header、.main、.footer等。...使用小写字母命名元素和修饰符。 修饰符必须紧跟着元素或块。 修饰符可以使用中划线（_）或破折号（-）进行命名。...避免样式冲突: BEM 的命名约定避免了样式冲突，每个块和元素都有独立的命名空间，不会受到外部样式的影响。 缺点: 命名冗长: BEM 的命名规范较为严格，可能导致类名过长，增加了代码量和阅读难度。...SMACSS 将 CSS 代码分为五个主要类别: 基础（Base）是 HTML 元素定义默认样式，可以包含属性、伪类等选择器，如 reset.css、normailze.css 之类的格式化元素样式 CSS
BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。...BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。...BEM的命名中包含了模块名，长长的命名会让HTML标签会显得臃肿。...使用BEM的诀窍是，你要知道什么时候哪些东西是应该写成BEM格式的。因为某些东西确实是位于一个块的内部，但这并不意味它就是BEM中所说的元素。...首先，有悖BEM命名规范，BEM的命名中只包含三个部分，元素名只占其中一部分，所以不能出现多个元素名的情况，所以上述每一页的按钮名可以改成：page-btn__btn。
或者他们之间真的有关系吗？ 你应该在 bio 旁边添加 pro-user 吗？ image 和 profile 写在同一部分 CSS 吗？ 可以在其他地方使用 avatar 吗？...你会发现页面里包含的是 logo，搜索栏，导航，照片列表，辅助导航，标签框，视频播放器等。这些是可以网站的任何位置都可以独立使用的内容。它们只是碰巧在这个特定页面以这种方式组合。 3....CSS模块化方案——BEM BEM，三个字母分别代表 Block、Element、Modifier，BEM 也是在 2009 年提出，起源于 Yandex（可以说是俄语版的 Google）。...BEM的核心概念是 —— 块（Block）由子元素（Element）构成，并且可以修改（Modified）。...BEM 命名约定： .block-name__element--modifier 名称以小写字母书写 名称中的单词用连字符（-）分隔 元素由双下划线（__）分隔 修饰符由双连字符（--）分隔 一个 BEM
前言： 最近团队要考虑代码风格统一 1 什么是 BEM 命名规范 Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论...- 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。...__ 双下划线：双下划线用来连接块和块的子元素 _ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态 BEM 是一个简单又非常有用的命名约定。...使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定。...如： .sub-block__element {} .sub-block--modifier {} 1.2 BEM 命名法的好处 BEM的关键是，可以获得更多的描述和更加清晰的结构，从其名字可以知道某个标记的含义
BEM 代表块(block)、元素（element）和修饰符（modifier）。Yandex，在俄罗斯的相当于谷歌的搜索引擎，为了解决他们 CSS 代码库中的缩放问题而提出了它（它指BEM）。...BEM 是一个极其简单——又极其严格——的命名规范。 .block {} .block__element {} .block--modifier {} 块（Blocks）代表高级别的类。...元素（Elements）是块的子模块。修饰符（modifiers）代表不同的状态。...你可以在《深入学习 BEM 语法》、《BEM 101》和《BEM 简介》上看到更多关于 BEM 的信息。想要了解不同的命名规范，参见《OOCSS、ACSS、BEM、SMACSS：这些是什么？...splash 这个类不但包含了本身的样式和逻辑，同时也包含了它的子节点的。为了解决这个问题，我们可以将这段代码分离为两个新的类。
即将在 Chrome 浏览器中实施的 @scope 允许在样式表中对样式进行块级作用域划分，从而进一步提高了 BEM 的性能。这将使样式表更易于维护，同时对 CSS 级联进行更严格的控制。...block 是一个包含 HTML 元素。...，所以： 块为 sample-page 元素是 first-section 修饰词是 first-line BEM 的扩展性很好，尤其是在使用 SASS 将样式分组并使用 & 操作符创建类似内容时：...可以使用 @scope 替换 BEM 样式，使样式定义更小、更易于管理。...通过使用@scope，可以通过紧密限定元素范围来控制层叠的副作用。 文件 no_scope.html 的样式和一些元素定义如下： <!
BEM 是一种前端项目开发的方法学，由 Yandex 公司提出。BEM 的名称来源于该方法学的三个组成部分的英文首字母，分别是块（Block）、元素（Element）和修饰符（Modifier）。...块中封装了组件相关的 JavaScript、CSS 代码和 HTML 模板。由于块是独立的，可以在应用开发中进行复用，从而降低代码重复并提高开发效率。块可以放置在页面上的任何位置，也可以互相嵌套。...同一个块可以在页面上存在多个实例。块的不同实例具有相似的结构。一个典型的块的示例是菜单。一个项目中可以有多个不同的菜单，具体相似的结构和样式。 块的名称应该是全局唯一的。...一个页面可以 元素 元素是块中的组成部分。元素不能离开块来使用。在菜单块中，每个菜单项是块中的元素。 修饰符 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观。...当菜单块出现在页面上的不同位置时，可以有不同的样式。菜单块中的菜单项可以有选中或非选中的状态。
选择器可以匹配 HTML 元素，也可以匹配一个元素的类名、ID, 或者元素拥有的属性。.... */ } 属性 最后，属性决定了规则声明里被选择的元素将得到何种样式。属性以键值对形式存在，一个规则声明可以包含一或多个属性定义。...BEM 最初是由 Yandex 提出的，要知道他们拥有巨大的代码库和可伸缩性，BEM 就是为此而生的，并且可以作为一套遵循 OOCSS 的参考指导规范。....listing-card__title 是一个元素（element），它属于 .listing-card 的一部分，因此块是由元素组成的。...虽然 mixin 可以不接收参数，但要注意，假如你不压缩负载（比如通过 gzip），这样会导致最终的样式包含不必要的代码重复。
todolist作为一个模块，包含了title，image，article等组件，同时还可以加上如.todolist-background-danger等修饰类，在模块内可以使用其名称做前缀任意组织模块结构...BEMCSS BEM 分别代表着：Block（块）、Element（元素/子块/组成部分）、Modifier（修饰符），是一种组件化的 CSS 命名方法和规范，由俄罗斯 Yandex 团队所提出。...[Block 块]__[Element 元素]_[Modifier 修饰符] 不同的命名模式，区别在于BEM之间的连接符号不同，依个人而定： ....同类型的块，在显示上可能会有一定的差异，所以不要定义过多的外观显示样式，主要负责结构的呈现。这样就能确保块在不同地方复用和嵌套时，增加其扩展性。综上所述，最终我们可以把BEM规则最终定义成： ....情景 search 组件中包含 input 和 button，是列表中的一个子元素。
BEM 是 Block（块） Element（元素） Modifier（修饰器）的简称 使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰（弊端主要是名字会稍长...） 如何使用BEM 一个独立的（语义上或视觉上），可以复用而不依赖其它组件的部分，可作为一个块（Block） 属于块的某部分，可作为一个元素（Element） 用于修饰块或元素，体现出外形行为状态等特征的...，可作为一个修饰器（Modifier） 在本规范中，以双下划线 __ 来作为块和元素的间隔，以单下划线 _ 来作为块和修饰器 或 元素和修饰器 的间隔，以中划线 - 来作为 块|元素|修饰器 名称中多个单词的间隔...，如果非常有必要，可以嵌套写样式 */ .search-form { .my-img { &__logo {} } } /* 但一般来说，不建议，因为这破坏了块的独立性。...可转换成设置对应的 元素来表现，如 */ .search-form {} .my-img { &__search-form-logo {} } BEM 规范虽然结构比较清晰，但有时候会产生代码冗余
BEM代表“块（block），元素（element），修饰符（modifier）”，开发组件的过程中经常使用这三个实体，而在选择器中，这三个实体由以下符号来表示扩展关系： - 中划线：仅作为连字符使用...，表示某个块或者某个子元素的多单词之间的连接记号。...__ 双下划线：双下划线用来连接块和块的子元素。 _ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态。...type-block__element_modifier 以上的描述是从腾讯的前端规范库中找到的，简单的来说理解了块、元素、修饰符三个分类之后，就能大致理解BEM代码是什么样的结构了，可是了解结构是一方面...利用刚刚介绍的函数，以及块、元素、修饰符的实现代码，在sass中已经能非常高效率并且优雅的基于BEM规范的代码了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
