这是我参与「第四届青训营」笔记创作活动的第3天

本堂课重点内容：

• css权重
• 样式继承
• 布局技术
• display属性
• 常规流（Normal Flow）
• 行级排版上下文（IFC：Inline Formatting Context）
• 块级排版上下文（BFC：Block Formatting Context）

详细知识点介绍：

在本文开始之前，不妨先思考一个问题：下面哪条CSS属性规则生效？

<article>
  <h1 class="title">拉森火山国家公园</h1>
</article>

<style>
  .title {
    color: blue;
  }
  
  article h1 {
    color: red;
  }
</style>

什么是CSS权重

• CSS权重又称CSS特异度（Specificity）
• 如果有多个属性或者选择器，同时指向同一元素的CSS冲突，那么悠闲使用什么样式规则。那么便有了特异度的概念。
• 简单来说： CSS特异度就是CSS样式选择器的权重计算，从而让权重更高的样式应用到元素上。

举个栗子： 此时“主要按钮” 的权重就比“普通按钮”权重更高。

再回到上面的问题，现在知道那两条CSS属性，哪条生效了吗？

答案是<h1>标签内的文字颜色呈蓝色。

因为类选择器的权重比标签选择器的权重更大，故显示为蓝色。

样式继承

• 某些属性会自动继承其父元素的计算值，除非显式指定一个值

举个栗子： 因未给<strong>标签添加样式属性，故其继承<p>标签样式。

• 显示继承

* {
    box-sizing: inherit;     
}                        
html {                   
    box-sizing: border-box;  
}                                    
.some-widget {           
    box-sizing: content-box; 
}

布局（Layout）是什么？

• 确定内容的大小和位置的算法
• 依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

display属性

• block：块级盒子
• inline：行级盒子
• inline-block：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
• none：排版时完全被忽略

常规流（Normal Flow）

• 根元素、浮动和绝对定位的元素会脱离常规流
• 其它元素都在常规流之内（in-flow）
• 常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文（IFC：Inline Formatting Context）

• Inline Formatting Context (IFC)
• 只包含行级盒子的容器会创建一个IFC
• IFC 内的排版规则
  • 盒子在一行内水平摆放
  • 一行放不下时，换行显示
  • text-align 决定一行内盒子的水平对齐
  • vertical-align 决定一个盒子在行内的垂直对齐
  • 避开浮动(float)元素*

举个栗子： 可以看见此时p标签内的文字已经超出了盒子宽度。

当取消div中css的注释样式（/* overflow-wrap: break-word; */）后，结果如图：

块级排版上下文（BFC：Block Formatting Context）

• Block Formatting Context (BFC)
• 某些容器会创建一个BFC
  • 根元素
  • 浮动、绝对定位、inline-block
  • Flex子项和Grid子项
  • overflow 值不是 visible 的块盒
  • display: flow-root;

BFC内的排版规则：

• 盒子从上到下摆放
• 垂直 margin 合并
• BFC 内盒子的 margin 不会与外面的合并
• BFC 不会和浮动元素重叠

举个栗子： 可以看到，<span>标签所包含的第1行代码块上下、左侧有border属性，第3行代码块上下、右侧有border属性，而第二行代码块却没有。

课后个人总结：

• CSS所涵盖的知识点远不止以上所罗列的内容，若想要更深层次地学习CSS，官方文档是一份很好的学习教案，所以要充分利用MDN和W3CCSS规范。
• 与此同时要保持一颗好奇心，善于发现身边的精彩事物，去思考他人是怎么将如此精美的动画 / 页面做出来的，要善用浏览器的开发者工具。
• 保持学习，CSS新特性还在持续不断出现，只要我们保持热爱、持续学习，我们就一定可以创造一个属于自己的蓝海。