深入CSS

哪条规则生效

涉及选择器的优先级问题，看选择器的特异度（即计算其id、类、标签个数）

CSS中与文字相关的属性可以继承，但与模型相关的不行。

若想让不可继承的值从父级继承，我们可以使用显式继承。

若从元素父级往上找还是没有找到，会用到初始值。

CSS求值过程（复杂）

布局

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

三种布局方式

常规流：行级、块级、表格布局、FlexBox、Grid布局
浮动、绝对定位

盒模型

高度与宽度

padding

border（边框）

当四条边框颜色不同时，边框呈倒梯形，即连接处斜着。
当高度宽度都设置为0时，可做各种各样的现状

margin

overflow

若文字超出容器框，可使用overflow。

块级 VS 行级

属性

排版

如果一个盒子里全是行级，那块级对应的div创建了一个行级上下文。 处理过长不换行的单词（即超出逻辑与范围），使用overflow-wrap将其换行。

BFC内的排版规则

若不想让两个盒子合并，则可以将盒子分散在两个不同的盒子里。

在常规流内，子级盒子内只能都是块级（从上到下）或都是行级（从左到右）。若行级和块级都存在，因为父级不允许块级和行级并存，所以会创建两个匿名的盒子来包裹这两段文字以方便排版。

Flex Box

因为行级和块级不能实现更高级或更灵活的布局方式，所以CSS提出了新的排版方式也就是Flex Box。

根据内容确定排版位置，有时不能对齐，引入主轴与侧轴的概念。

两种方式 第一种在主轴

第二种侧轴基线对齐

Flexibility

flex属性表示语法

Grid布局

Flex Box单一、一维的布局，而Grid布局是二维的。

划分网格

确定列与行的划分后，将子元素放入网格线指定的网格。

可通过浏览器开发工具检查网格线

float浮动

实现文字环绕的效果

position

学习CSS的几点建议

  充分利用MDN和W3C CSS规范
  保持好奇心，善用浏览器的开发者工具
  持续学习，CSS新特性还在不断出现