哪个样式生效？
CSS 里面可以有多条选择器，这些选择器有可能会选择到同样的一个元素，比如说在这个例子里面，这两个选择器多设置了颜色，比如说这样的一个样式在页面实际展示出来会是什么样的一个效果呢？
它到底是蓝色呢还是红色呢？这就涉及到选择器优先级的问题，那么怎么在多个选择器都匹配到一个元素的时候去决定一个元素的时候去决定这个选择器最终会采取哪个选择器里面的样式呢？
它其实是根据一个特异度这样的一个值来绝地的，所谓的这个特异度也就是选择器它的特殊程度。越特殊的选择器，它的优先级越高。
比如说我们看两个具体的例子：
特异度
第一个是它有ID、有类、标签有各种各样的，那么我们怎么去计算它选择器的特异度呢？我们可以把他分一下类，比如ID的、类或者伪类有几个，再算一下标签有几个。我们得到一个数1、2、2那同样。对第二个选择器，这个选择器也可以算一下，它有0个ID，有两个类，有两个标签。那么我们可以进行一个比较，ID的优先级最高。第一个选择器里有ID那么它的特异度就是比较高的。所以这样的一个选择器呢，它里面定义的优先级会高一点。
你也可以简单的把这三个数放在一块 122 就表示一百二十二，022就表示22这样一比也能很快的得出一个结果。这是选择器的一个特异度，或者叫特殊的程度。那么接下来我们再看对于如果说我们有了这样的一个特异度之后我们怎么样去算出来，或者去决定出来我们页面中的样式到底该长什么样。
注意这里覆盖了样式 在这个例子里.btn是一个基础的样式.primary是btn底下的一个特殊按钮。 这是实现复用的一个比较好的方法。
继承
CSS中的一些属性会自动基础父元素的计算值。
在这个案例中：
body 元素上设置了字体大小为 20px，这个设置会被子元素继承。因此，整个段落的文本将以20px的大小显示，无需为段落中的子元素单独设置字体大小。
p 元素上设置了文本颜色为蓝色，这个设置也会被子元素继承。因此，整个段落的文本将以蓝色显示，无需为段落中的子元素单独设置文本颜色。
em 元素上设置了文本颜色为红色，这个设置同样会被子元素继承。因此，标签内的文本将以红色显示。
通过这种继承机制，我们可以在父元素上设置一些共享的样式属性，然后让子元素自动继承这些属性，从而实现样式的统一和简化。这种方式能够提高代码的可维护性，减少样式冗余，并确保样式的一致性。
显式继承
刚刚上文讲了，在css内很多属性都是无法被自动继承的，所以我们就需要进行显示的继承。
比如这个bizing,我们就可以用*讲所有元素的默认box-sizing 都指定为inherit。 哪个这个属性就变为可继承的了。
初始值
- CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为O
- 可以使用initial关键字显式重置为初始值
- background-color: initial
在CSS中，每个属性都有一个默认的初始值。这意味着如果没有为属性设置任何值，它将采用其默认的初始值。
例如，background-color 属性的初始值是 transparent，这意味着如果没有为一个元素设置背景颜色，它将默认为透明。
另外，margin-left 属性的初始值是 0，这意味着如果没有为一个元素设置左边距，它将默认为零。
如果我们想要明确地将属性的值重置为初始值，我们可以使用 initial 关键字。例如，background-color: initial 将会将元素的背景颜色重置为初始值，即使之前已经设置了其他的背景颜色。这样可以方便地回到元素的默认样式。
CSS求值过程
CSS的求值过程是指浏览器如何解析和计算CSS样式规则，以确定最终应用到元素上的样式。
首先，浏览器会根据HTML文档中的元素和CSS样式表中的选择器，确定哪些样式规则适用于哪些元素。它会从上到下地读取CSS样式表，并匹配选择器与元素进行匹配。
一旦匹配到适用的样式规则，浏览器会计算这些样式规则中的属性值。这包括解析长度单位（如像素、百分比等）、颜色值（如十六进制、RGB值等）和其他属性值。有些属性值可能会相对于其他属性进行计算，例如使用百分比来设置宽度或高度。
在计算属性值时，浏览器还会考虑到继承和层叠的规则。继承是指某些属性值可以从父元素继承到子元素，例如字体样式。层叠是指多个样式规则可能应用于同一个元素，浏览器会根据层叠规则确定最终的样式。
最后，浏览器会将计算后的样式应用到匹配的元素上，使其呈现出最终的外观。这包括设置元素的尺寸、颜色、字体、边框等。
CSS的求值过程是一个复杂的过程，涉及到选择器匹配、属性值计算、继承和层叠等多个步骤。通过这个过程，浏览器能够根据CSS样式规则来渲染网页，并展示出我们所期望的样式效果。
布局是什么
确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算
CSS中的布局是指通过设置元素的位置、大小和对齐方式来安排网页内容的方式。它是为了创建有组织、易读和美观的页面而进行的。通过使用不同的技术和属性，我们可以实现各种不同的布局效果，例如将元素放在一行或一列、居中对齐、创建网格结构等。布局的目的是使页面看起来整洁、直观，并提供良好的用户体验。我们可以使用CSS来控制元素的盒模型、浮动、定位等属性来实现所需的布局效果。布局在网页设计中起着重要的作用，可以帮助我们有效地组织和展示页面内容，使用户更容易理解和导航。
布局相关技术
CSS的布局的常规流是指元素在文档流中按照其在HTML中出现的顺序依次排列的方式。在常规流中，元素的位置由其前面的元素和父元素的大小和位置决定，如果没有设置任何定位或浮动属性，元素将按照默认的块级或行内级元素排列方式进行布局。块级元素独占一行，行内级元素则按照宽度自适应排列。
常规流中的元素可以通过设置margin、padding、width、height等属性来控制其尺寸和间距，从而实现基本的布局效果。如果需要更精确的布局，可以使用定位、浮动、弹性布局或网格布局等技术进行调整。但是，使用这些技术可能会影响常规流的布局，需要谨慎使用。
常规流是CSS布局中最基本的布局方式，也是最常用的布局方式。它可以使元素按照自然的顺序排列，使页面具有良好的可读性和可维护性。
CSS中的margin属性用于控制元素的外边距，即元素与周围元素之间的距离。通过设置margin属性的值，可以调整元素的上、下、左、右四个方向的外边距大小，从而改变元素在页面中的位置和间距。
Width
- 指定content box宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其它属性确定
- 百分数相对于容器的content box宽度
width属性用于设置元素的宽度。可以使用像素、百分比或其他单位来指定宽度值。通过设置width属性，可以控制元素在水平方向上的尺寸大小。
height
指定content box高度
取值为长度、百分数、auto
auto 取值由内容计算得来
百分数相对于容器的content box高度
容器有指定的高度时，百分数才生效
height属性用于设置元素的高度。和width属性类似，可以使用像素、百分比或其他单位来指定高度值。通过设置height属性，可以控制元素在垂直方向上的尺寸大小。
padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
padding属性用于控制元素的内边距，即元素内容与边框之间的距离。通过设置padding属性的值，可以调整元素的上、下、左、右四个方向的内边距大小，从而改变元素内容与边框之间的间距。
bodder
CSS中的border属性用于设置元素的边框样式，包括宽度、样式和颜色。通过调整border的值，可以改变元素的边框效果，增加装饰效果，使页面更美观。 CSS中的border属性用于设置元素的边框样式。边框是围绕元素内容和内边距的线条，可以通过border属性来控制其样式、宽度和颜色。
border属性可以分为三个部分：border-width、border-style和border-color。
border-width用于设置边框的宽度，可以使用像素、百分比或其他单位来指定宽度值。可以分别设置上、下、左、右四个方向的宽度，也可以使用简写形式同时设置四个方向的宽度。
border-style用于设置边框的样式，常见的样式包括实线、虚线、点线等。可以分别设置上、下、左、右四个方向的样式，也可以使用简写形式同时设置四个方向的样式。
border-color用于设置边框的颜色，可以使用具体的颜色值或预定义的颜色名称来指定颜色。同样，可以分别设置上、下、左、右四个方向的颜色，也可以使用简写形式同时设置四个方向的颜色。
通过合理设置border属性的值，可以改变元素边框的样式、宽度和颜色，从而为元素增加装饰效果，使页面看起来更加美观和有层次感。
当四条边框不同颜色时
如果边框颜色不一样，它在连接的地方是这样斜着切过来的，这里有一个常规的技巧就是，当我们把这个容器的宽度和高度都设置为0的时候就只剩下边框了。
这时候把其他三角形影藏，我们就只剩下一个三角形。
margin 外边距
CSS的margin属性用于设置元素的外边距，即元素与周围元素之间的距离。通过调整margin的值，可以控制元素的上、下、左、右四个方向的外边距大小，从而改变元素在页面中的位置和间距。margin可以使用像素、百分比或其他单位来指定数值，也可以使用负值来创建重叠效果。合理使用margin属性可以实现元素的布局调整和页面的美化。
水平居中
在一个容器里，左右边距都是auto，那么浏览器会取一个平均值。
collapse 边距折叠
页面中两个元素，一个下边距100，一个上边距100，那么他们中间的距离只有100
CSS的margin-collapse属性用于控制相邻元素之间的外边距合并行为。当两个相邻元素具有相同的方向的外边距时，margin-collapse属性可以决定它们之间的外边距是合并为一个外边距，还是保持各自的外边距。margin-collapse属性有三个取值：collapse（合并外边距）、separate（保持各自外边距）和inherit（继承父元素的设置）。默认情况下，大多数浏览器会将margin-collapse设置为collapse，即合并外边距。合理使用margin-collapse属性可以避免外边距合并带来的布局问题。
border-box
使用border后width会更智能。
border-box是CSS中的一个盒模型属性，用于指定元素的尺寸计算方式。当将元素的box-sizing属性设置为border-box时，元素的宽度和高度将包括其边框和内边距，而不会受到边框和内边距的增加而改变。
通常情况下，元素的尺寸计算是基于内容区域的，即宽度和高度只包括内容的宽度和高度。但是当设置为border-box时，元素的宽度和高度会包括边框和内边距的宽度，内容区域会自动缩小以适应。
使用border-box可以更方便地控制元素的尺寸，特别是在处理响应式布局和盒子模型的复杂情况下。同时，它也可以避免由于边框和内边距的增加而导致的元素尺寸溢出的问题。
overflow 显示异常内容处理
overflow属性用于控制元素内容溢出时的处理方式。可以将其设置为以下几个值之一：visible（默认值，内容会溢出元素边界）、hidden（溢出内容会被隐藏）、scroll（显示滚动条以便查看溢出内容）和auto（根据需要自动显示滚动条）。
简化overflow的描述：overflow属性用于控制元素内容溢出时的处理方式，可设为visible（默认，溢出内容可见）、hidden（溢出内容隐藏）、scroll（显示滚动条）和auto（根据需要显示滚动条）。
