BFC（Block Formatting Context）格式化上下文，是盒模型的一种渲染布局，简言之可以理解为 一个独立的容器，不受外部影响，不影响外部。
本文将讲述 CSS 中最核心的几个概念，包括：盒模型、position、float等。这些是 CSS 的基础，也是最常用的几个属性，它们之间看似独立却又相辅相成。为了掌握它们，有必要写出来探讨一下，如有错误欢迎指正。
常见的块级元素有：div；p；form；ul；li；ol；dl；hr；table；h1~h6；
一个web应用是离不开html、css与js，其中css充斥的整个web项目中。css它有一个特定，它是全局的。这样的特性导致的结果是，一旦你在不同的地方定义了相同的css命名，那么它们的样式就会相互覆盖，最终导致的style错乱，从而影响整个网页布局。
需求：地图组件打开需要覆盖下面的按钮的样式 存在的问题：按钮样式显示在地图组件的上方，并且改变层级没有用 我的思路：一直在用那个z-index，想改变样式。但是就是改变不了 解决方案：是在按钮添加v-show,里面定义一个变量，接着设置bm-local-search里面的方法，方法里面写与设置的变量相反的值。 思路差异：我一直在纠结的是z-index层级的变化，而不是换一个思维去考虑按钮的显示，还有就是没考虑是这个组件bm-local-search的调用方法，这是我没有想到的一个点，也是我最早排除的一个思维。
问题：我怎么才能收到你们公众号平台的推送文章呢？ 通常我们在学习CSS的时候，感觉语法很容易掌握，实际应用中却碰到各式各样难以填补的“坑”，为避免大家受到同样的困惑与不解，本文详细讲解了CSS中优先级和Stacking Context等高级特性。让你更深入了解CSS。 CSS 优先级 优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。如果给一个P标签增加一个类（Class）,运行后Class 中的部分属性并未发生改变，及CSS选择器存在优先级问题。
通常我们在学习CSS的时候，感觉语法很容易掌握，实际应用中却碰到各式各样难以填补的“坑”，为避免大家受到同样的困惑与不解，本文详细讲解了CSS中优先级和Stacking Context等高级特性。让你更深入了解CSS。 CSS 优先级 优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。如果给一个P标签增加一个类（Class）,运行后Class 中的部分属性并未发生改变，及CSS选择器存在优先级问题。 选择符优先级 常见的选择器种类： 内联样式
解释： 对于非 HTML 标签之间的缩进，比如 script 或 style 标签内容缩进，与 script 或 style 标签的缩进同级。 示例：
（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！） （注2：更多内容请查看我的目录。）
HTML作为描述网页结构的超文本标记语言，在百度一直有着广泛的应用。本文档的目标是使HTML代码风格保持一致，容易被理解和被维护。
大概看一下代码，是有一个Parent的父组件，蓝底白字。还有一个Child的子组件，红底黑字。 那么实际渲染出的样式是什么样子的呢。如下图:
标题是data-,但是这里主要讲伪元素，看明白就知道了 1、jQuery Selectors 获取伪元素的属性值 虽然JS里没有可以直接操作伪元素的选择符，然而获取其CSS属性的方法还是有的。 window.getComputedStyle 利用window.getComputedStyle方法选择到伪元素，然后利用getPropertyValue方法获取对应的属性的值。 根据MDN的文档， window.getComputedStyle(element[, pseudoElt]); 此方法包含两个参数，一
原文链接：https://blog.csdn.net/qq_43624878/article/details/109993036
当 html 元素拥有多个 css 样式时，浏览器会根据优先级规则计算 css，如果对优先级规则不够熟悉，在实际的开发过程中往往会产生很多困扰，本文总结css的优先级规则。
之后再efficiencyView方法中调用stopPropagation方法阻止事件冒泡
写在前面 接着之前的移动端效果讲解，刚好项目中需要使用到这一效果，去饿了么的组件库看了一下效果，发现效果和微信端的cellSwiper还是有点差别的，由于项目中又是使用的React，之前使用的Reac
正如我们今天所知，CSS语言是web的一个重要组成部分。它使我们有能力绘制元素在屏幕、网页或其他媒体中的展示方式。
在 CSS 中，可见性可以通过 visibility 属性来控制。该属性有两个主要的取值：visible 和 hidden。
HTML 语义 HTML5为我们提供了很多旨在精确描述内容的语义元素。确保你可以从它丰富的词汇中获益。 Blog post Published: 21st Feb, 2015 …
Published: 21st Feb, 2015
…
当我们在 input 输入内容时，就会通过 onChange 事件触发请求，将返回结果保存到 resulte 变量并输出到页面上。
一、CSS简介 css概念 CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格
HTML页面在电脑的浏览器显示跟在手机端的浏览器显示效果是不一样的，下面写个div来示例看看。
在布局中，对于每块功能的 DOM 结构，我们一般使用一个带有 wrapper 类元素把它包裹起来，让代码或者网页内容更易于阅读。为此，我们一般使用wrapper 或者 container。在CSS 中使用wrapper可能有多种方式，这些方式中，有些会带来一些问题。
css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。
在CSS中，我们可以使用 background-size 和background-position属性为背景图像设置大小和位置。而 object-fit 和 object-position 属性则允许我们对嵌入的图像（以及其他替代元素，如视频）做类似的操作。在本文中，我们将深入探讨如何使用 object-fit 将图像适应到特定的空间中，以及如何使用 object-position 在该空间中进行精确定位。
CSS引用:直接引用 直接在HTML标签的后面加上style类型声明即可,多个类型请用分号隔开.
我们之前已经介绍过行元素，块元素及行内块元素的属性了，能够知道它们是具有自己默认的显示方式的，即元素会按照文档流 (document flow) 的方式，自上而下，从左到右进行布局，如果你想要改变元素默认的定位行为，就需要设置 position 属性了
随着前端开发越来越关注效率：通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样的预处理器在工作的时候，需要绕的路较长，而直接使用css速度会更快。这里涵盖了20个css技巧来帮助你减少重复规则和复写，在布局中标准化样式流程，不仅可以帮助你高效地创建自己的框架，而且可以解决许多常见的问题。
目录 1. 前言 2. 通用 2.1. DOCTYPE 2.2. 字符编码 2.3. 引入 CSS 和 JavaScript 文件 2.4. head 2.4.1 title 2.4.2 favicon 3. 代码风格 3.1. 缩进与换行 3.2. 命名 3.3. 标签 3.4. 属性 4. 图片 5. 表单 5.1. 控件标题 5.2. 按钮 1. 前言 本文档的目标是使HTML代码风
其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。
一开始，Yandex公司推出的BEM，包括了规范以及其配套构建工具。如今提到的BEM主要是指其中的规范，在BEM最新的推广页中，对其的描述为：
众所周知，前端内容多而杂，经过查阅各种资料，总结了一些知识点，以备后续复习使用。文章分为上（html，css）中(js)下(vue)三部分。
CSS（层叠样式表）是一种强大的用于样式和格式化网页文档的工具。在这份全面的指南中，我们将探讨四个特殊关键词： inherit ， initial ， unset 和 revert 。
前端开发人员在构建网站时需要做出的决定之一就是添加图片的技术。它可以是HTML ，也可以是通过CSS背景生成的图片，也可以是SVG <image>。选择正确的技术很重要，并且可以在性能和可访问性方面发挥巨大作用。
性能优化不单指优化一个页面的打开速度，在开发环境将一个项目的启动时间缩短使开发体验更好也属于性能优化，大文件上传时为其添加分片上传、断点续传也属于性能优化。在项目开发以及用户使用的过程中，能够让任何一个链路快一点，都可以被叫做性能优化。
在前端开发中，编写干净高效的代码可以使程序员变得更优秀。无论是个人项目、合作任务、敏捷开发项目还是求职测试项目，都很重要。开发者通常会忽视一个基本的部分，那就是实施CSS命名规范，有些人会在调试和管理庞大的代码库时才意识到糟糕的CSS代码有多可怕。无论你是否意识到，在编码测试或技术面试中，你的命名习惯都会传达关于你开发实践的信息。它们可以用来评估你的行为和效率。因此，在本文中，我们将展示CSS命名的最佳实践，以提高代码质量。通过阅读本文，读者应该清楚地了解CSS命名规范及其好处，并熟悉不同的样式命名约定。读者的最终目标是为他们提供可操作的见解和实用的建议，以便他们可以将这些规范应用到自己的开发工作流中，以编写更清晰、更高效的代码。
DOM 是表述 HTML 的内部数据结构，它会将 Web 页面和 JavaScript 脚本连接起来，并过滤一些不安全的内容。HTML 解析器 (HTMLParser) 模块负责将 HTML 字节流转换为 DOM 结构。网络进程接收到响应头后会根据响应头中的 content-type 字段来判断文件的类型，若为 text/html，则为该请求创建一个渲染进程。渲染进程准备好后，网络进程和渲染进程之间会建立一个共享数据的管道，HTML 解析器并不是等整个文档加载完成之后再解析，而是网络进程加载了多少数据，HTML 解析器便解析多少数据。
本文介绍了HTML中元素显示方式的控制，包括块级元素、行内元素、行内块级元素、以及display:inline-block、display:block、display:list-item、display:run-in、display:compact、display:marker、display:table、display:inline-table、display:table-row-group、display:table-header-group、display:table-footer-group、display:table-row、display:table-column-group、display:table-column、display:table-cell、display:table-caption、以及none。其中，块级元素、行内元素、行内块级元素、以及display:inline-block、display:block、display:list-item、display:run-in、display:compact、display:marker、display:table、display:inline-table、display:table-row-group、display:table-header-group、display:table-footer-group、display:table-row、display:table-column-group、display:table-column、display:table-cell、display:table-caption、以及none都可以用来控制元素的显示方式，并介绍了CSS中display的常用属性值及其意义。"
自 1994 年以来，设计网站一直是 CSS 的唯一目的，它是一门描述网站外观的语言。
IE，这个令所有网站设计人员讨厌，但又不得不为它工作的浏览器。不论是6、7还是8，它们都有一个共同的渲染标准haslayout，所以haslayout 是一个非常有必要彻底弄清除的概念。大多 数IE下的显示错误，就是源于它。
在浏览器中实现用户界面时，请尽可能减少浏览器带来的差异，以使用户界面具有可预测性。 跟踪所有这些差异很困难，因此，我整理了一些常见问题及其解决方案方便大家查看。
我们在之前的文章中已经掌握了CSS的大部分内容，但仍有一些内容我们没有涉略，这篇文章就是为了补充前面没有涉及的内容，为我们的知识做出补充并且介绍一些布局技巧
快来免费体验ChatGpt plus版本的，我们出的钱 体验地址:https://chat.waixingyun.cn 可以加入网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home
随着 Facebook 和 Twitter 最近的产品部署，我认为一个新的趋势正在缓慢增长:Atomic CSS-in-JS。
1.z-index基础 z-index属性指定了元素及其子元素的[z顺序]，而[z顺序]可以决定 当元素发生覆盖的时候，哪个元素在上面。通常一个较大z-index值的元素会覆盖较低的那一个。 z-index支持的属性值： 1. z-index：auto；默认值，如果不对z-index设置，默认为auto； 2. z-index：<integer>；整数值，z-index：1，z-index：2等 3. z-index：inherit；继承 z-index基本特性： 1. 支持负值； 2. 支持CSS
公司的一个各种依赖比较老的项目，习惯了之前的iview和stylus开发，刚接手还是有很多不习惯的地方。
浮动是CSS布局中的一个重要概念，它可以让元素脱离标准文档流，并且可以让其他元素环绕在其周围。通常情况下，浮动用于创建多列布局或者图像与文字混排的效果。比如，我们可以使用浮动来实现一个左侧导航栏、右侧主体内容的页面布局。
主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
