这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
1.css中的a标签（属性选择器）
a[href^="#"]{}//表示的是a标签等于以＃号开头的文件。
a[href$=".jpg"]{}//表示的是a标签以.jpg结尾的文件
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时也满足B | input：focus |
| 后代组合 | A B | 选中A，如果它是A的子孙 | nav a |
| 亲子组合 | A>B | 选中B，如果它是A的子元素 | section>p |
| 兄弟选择器 | A~B | 选中B，如果它在A后且与A同级 | h2~p |
| 相邻选择器 | A+B | 选中B，如果它紧跟在A后面 | h2+p |
2.box-sizing
content-box:以内容来进行计算
border-box：以border来进行计算，一般在项目中都会存在以下代码（使用的比较多
*
{
box-sizing:border-box;
}
3.块级排版上下文
1)BFC内的排版规则（块级）
- 盒子从上到下摆放
- 垂直margin合并
- BFC内的盒子的margin不会与外面的合并
- BFC不会与浮动元素重叠
[ flex-box ]
flex布局分为主轴对齐（justify-content）与侧轴对齐（align-items）
justify-content
align-items
flex的最大的特性————————弹性
1.flex-grow
width:100px
}
.a
{
flex-grow:2;
}
.b{
flex-grow:1;
}
在这段代码中是先分配给c元素100px的量，之后再将剩下的盒子量分给a，b。a获得2/3，b获得1/3.所以flex-grow不是单纯的倍数关系。
Flex 元素属性：flex-basis
flex-basis 定义了该元素的空间大小（the size of that item in terms of the space），flex 容器里除了元素所占的空间以外的富余空间就是可用空间 available space。该属性的默认值是 auto 。此时，浏览器会检测这个元素是否具有确定的尺寸。在上面的例子中，所有元素都设定了宽度（width）为 100px，所以 flex-basis 的值为 100px。
如果没有给元素设定尺寸，flex-basis 的值采用元素内容的尺寸。这就解释了：我们给只要给 Flex 元素的父元素声明 display: flex ，所有子元素就会排成一行，且自动分配小大以充分展示元素的内容。
Flex 元素属性：flex-grow
flex-grow 若被赋值为一个正整数，flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间（available space）。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。
如果我们给上例中的所有元素设定 flex-grow 值为 1，容器中的可用空间会被这些元素平分。它们会延展以填满容器主轴方向上的空间。
flex-grow 属性可以按比例分配空间。如果第一个元素 flex-grow 值为 2，其他元素值为 1，则第一个元素将占有 2/4（上例中，即为 200px 中的 100px）, 另外两个元素各占有 1/4（各 50px）。
Flex 元素属性： flex-shrink
flex-grow属性是处理 flex 元素在主轴上增加空间的问题，相反flex-shrink属性是处理 flex 元素收缩的问题。如果我们的容器中没有足够排列 flex 元素的空间，那么可以把 flex 元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。与flex-grow属性一样，可以赋予不同的值来控制 flex 元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。
在计算 flex 元素收缩的大小时，它的最小尺寸也会被考虑进去，就是说实际上 flex-shrink 属性可能会和 flex-grow 属性表现的不一致。t/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)》中更详细地看一下这个算法的原理。
[grid布局]
.wrapper {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: 100px 100px;
grid-template-areas:
"a a b"
"a a b";
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}
<div class="wrapper">
<div class="item1">Item</div>
<div class="item2">Item</div>
</div>
在开发者工具中能看到分割线
[position：relative]
与position：absolute类似，但是与absolute不同的是它是在常规流里布局的，是不脱离文档流的。其他元素不会受其影响。
