CSS 高级

选择器的特异性

#id (id) > .(伪类) > 标签(直接)

类似于覆盖现象，id的优先级大于伪类大于标签，所以h2标题“果实”的green属性就会覆盖class="title"的red属性。

CSS中的继承

上图，em标签指定了test,strong标签指定了inherit。那么在style中指定了p的color为red,就可以显示其颜色为red。而strong的标签颜色直接继承自蓝色的原本的颜色。但是某些模型如盒子模型是不可继承的。如果要让如盒子模型这些不能直接继承的属性得到继承，可以声明显示继承，比如box-sizing:inherit,没有继承值的就以初始值，作为值，比如background-color的初始值就是transparent.也可以将值设置为inital还原为原始值。

显示继承的例子 首先需要知道box-sizing有什么作用，他是表明width和height的不同计算方式，当box-sizing取值为content-box时，width和height的计算都总是以内容的值。content-box是默认值。当box-sizing取值为border-box时，width和height的值等于border+padding+内容的值。即包括了边框的值，但是不包括margin的值。 下面示例了显示继承的例子，html元素使用的是border-box，后续的元素也是border-box。border-box的整个盒子的宽度为160px,高度为80px,而padding为20px,border为8px的值是不会变的，因此内容的值会再次计算。

指定了content-box后，元素便不会使用border-box的值，后续的子元素也会继承content-box的属性。content-box的盒子内容的宽度和高度是160px和80px,padding和border的值也是保持相同的，最后整个盒子的宽度和高度会明显更大。

最后的代码效果图：

代码如下：

CSS的求值过程

涉及到了多种字符或数据类型的覆盖问题，包括了计算值，等中间过程！

布局(Layout)

确定内容的大小和位置的算法

margin 外边距 margin:auto表示水平居中，margin collapse 表示的是一种随着margin逐渐扩大时产生的一种外边距重叠的现象

border 边框 包括了三种属性 border-width border-style border-color 也有top right bottom left四个方向

padding 内边距 分为4种 padding-top right bottom left

height 纵向 只有父容器有指定高度的时候，百分数容器的描述方法才有效

width 横向 长度 百分数 auto

块级VS行级

根元素、浮动和绝对定位会脱离常规流，其他元素都在常规流内(in-flow),常规流中的盒子，在某种排版上下文中参与布局，包括了五种排版。

行级排版上下文(Inline Formating Context) 只包含行级盒子的容器创建一个IFC。IFC内的排版规则是盒子在一行内水平摆放，一行放不下时，换行显示，避开浮动元素。

块级排版上下文 (BFC) 根元素，浮动，绝对定位，inline-block，flex和Grid子项容器会创建BFC。overflow值不是Visible的块盒，代码表示是display:flow-root.BFC内的排版按照盒子从上到下的顺序进行摆放，在垂直方向上的margin会进行合并。BFC内的盒子的margin不会与外面的margin合并。并且不会与浮动元素重叠。

块级盒子从上到下摆放，行级盒子从左到右摆放

在这段代码中，span是行级元素，div是块级元素，文字是行级元素。然而，在行级元素里不能既有行级元素，又有块级元素。所以，文字被包装成块级元素，然后和block一起包装。

Flex Box

1 概念 控制的效果

2 flex-box的两根轴线

3 flex-direction

row

row-reverse

column

column-reverse

4 justify-content:横向box的间距排布方式 flex-start,flex-end,center,space-between,space-around,space-evenly

5 align-items: 横向排布的box的间距的纵向排布方式,flex-start,flex-end,center,stretch,baseline

6 align-self:和其他对象的对齐方式