深入CSS

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

1.继承

盒子模型不会继承父元素，color、font可以被继承，使用inherit关键字可以让不可继承的属性可以继承，并且它继承的是父元素的计算值，initial将属性显示重置为初始值。

2.求值过程

首先根据属性的特殊性选则应该采取的属性值，然后将相对值转化为绝对值

3.计算值和使用值的区别

像em转化为px或者相对路径转化为绝对路径这种单纯的知道css就知道其值的为计算值，像关键字和百分比这种知道实际布局才知道值的为使用值

4.布局

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

5.布局方式

1.常规流
2.浮动
3.绝对定位

6.盒模型

1.盒模型分为标准盒模型和IE盒模型，其区别在于

标准盒模型设置的宽度=content
IE盒模型设置的宽度=content+padding+border+margin

2.盒模型的元素注意点及衍生

1.content
2.padding:其百分比相对于容器的宽度
3.border:其属性为三个属性的值 width style color,当四边颜色不同时会出现相切的情况，从而延伸出，如果将宽高设为0，则只剩下border,四边交界处相切，形成四个三角形，我们需要哪个三角形只需将其他的隐藏
5.margin:1.margin:auto,由于左右margin会均分，所以可以实现水平居中2.垂直方向上会存在margin合并，会以margin较大的作为上下两个元素的间距

3.利用盒子模型中的border属性实现三角形

如果将宽高设为0，则只剩下border,四边交界处相切，形成四个三角形

 div {
            width: 0px;
            height: 0px;
            border: 100px solid;
            /* border-color: aqua rebeccapurple palevioletred yellowgreen; */
            /* 设置直角指向右边的三角形 */
            border-color: transparent transparent transparent yellowgreen;
        }

7.overflow

内容溢出盒子时处理情况 visible:将溢出内容设置为可见
hidden:将溢出内容隐藏
scroll:将盒子的内容滚动起来

8.块级和行级

1.块级元素生成块级盒子，行级元素生成行级盒子
2.可以使用display属性来将块级盒子和行级盒子相互转化
3.块级排版内的盒子的margin不会与外面的margin合并，所以我们如果要避免垂直方向上的magin合并，可以采用用两个div分别包裹两个元素的形式

9，flex box

将容器设置为flex之后，容器内的元素都会遵循flex排版上下文，而不会遵循原来的块级排版上下文和行级排版上下文
我们将不同方向分为主轴和侧轴，侧轴就是与主轴垂直的轴

9.1flexibility

flex是弹性布局，其元素都是有弹性的，flex-grow的属性值都是按照剩余空间来拉伸的
缩写为 flex:flex-grow flex-shrink flex-basic 只有flex-basic的单位是px，前面两个为比例，所以是没有单位的

10.grid布局

是二维的布局，nfr是将剩余的分成几份

grid-row-start
grid-column-start
grid-row-end
grid-column-end
简写：grid-area

11.float

现在一般用于文字环绕图片布局，将img设为float:left,则其兄弟元素p的文字环绕于该图片

12.position

static:默认值，非定位元素
relative:相对自身位置偏移，不脱离文档流
absolution:绝对定位，相对非static祖先元素定位
fixed:相对于视口绝对定位