CSS基础

盒模型

CSS盒模型本质上就是一个盒子,盒子包裹着HTML元素,目前一共有两个盒模型,一种是W3C盒子模型 (标准盒模型),一种是IE盒子模型(怪异盒模型)。

W3C盒子模型(标准盒模型)

在开发中,元素默认就是标准盒,也可以通过box-sizing:content-box设置元素为标准盒模型。

标准盒模型的宽高计算方式:

css 复制代码
width = content-width
height = content-height 

IE盒子模型(怪异盒模型)

通过box-sizing;border-box来设置元素为怪异盒模型。

怪异盒模型的宽高计算方式:

css 复制代码
width = content-width + padding-width + border-width
height = content-height + padding-height + border-height

外边距合并问题

相邻两个块级元素会发生外边距合并的情况,MDN中的定义:

块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距,这种行为称为外边距合并。

BFC(Block Formatting Context 块级格式化上下文)

BFC是一个完全独立的空间(布局环境),让空间里的子元素不会影响到外面的布局。

触发BFC几种方式:

  • overflow: hidden
  • display: inline-block
  • position: absolute
  • position: fixed
  • display: table-cell
  • display: flex

使用BFC能够使元素避免外边距合并和元素高度塌陷的问题。

选择器优先级

选择器权重有四个等级:

第一等级:代表内联样式,如style="",权值为 1000

第二等级:代表id选择器,如#content,权值为100

第三等级:代表类, 伪类和属性选择器,如.content,权值为10

第四等级:代表标签选择器和伪元素选择器,如div p,权值为1

一个元素中权重相同的不同选择器对同一属性进行了设置,后面的选择器会覆盖前面选择器相同的属性。选择器的权重也可以相加,例如:

span的权值为 = id选择器100+类选择器10+元素选择器1 = 111

注意 :有11个元素选择器和1个类选择器同时选中同一元素时,权级高的选择器的样式会生效。因为权值不能跃迁,也就意味着无论有多少个0级的选择器,生效的仍然是1级选择器,因为选择器的权级无法跃迁

!important会覆盖任何其他声明,当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。 一些经验法则:

  1. 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
  2. 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
  3. 永远不要在你的插件中使用 !important
  4. 永远不要在全站范围的 CSS 代码中使用 !important

CSS新特性

CSS3新增了哪些新特性 - 掘金 (juejin.cn)

CSS 动画的两种做法(transition 和 animation) - 掘金 (juejin.cn)

相关推荐
遂心_1 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒1 小时前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
岛风风1 小时前
关于手机的设备信息
前端
ReturnTrue8682 小时前
nginx性能优化之Gzip
前端
w_y_fan2 小时前
Flutter 滚动组件总结
前端·flutter
wuli金居哇2 小时前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端
Asort2 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手2 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码2 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码2 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js