回顾CSS内容

目录

1.弹性盒子

2.文本标签

3.定位

---

1.弹性盒子

flex

flex-direction 指定容器中弹性元素的排列方式；

主轴由flex的设置的方向决定；

flex-grow指定弹性元素伸展的系数默认值是零；

当父元素有多余的空间时子元素如何伸展，0就是不伸展，

要是把flex-grow写入子元素，则子元素按照flex-grow的比值被分配剩余空白部分

flex-shrink表示收缩系数。当父元素不足以容纳子元素时对子元素进行收缩

当值为零的时候就是不收缩，当外面的框小的时候内容会溢出

这时使用flex-wrap：wrap；多出的部分会沿着辅轴方向排列

flex-flow是简写属性

justify-content

如何分配空白区域

flex-start 元素沿着主轴起边排列

flex-end 元素沿着主轴终边排列

center 元素居中排列

sparce-between 空白均匀分布到元素间

spare-around 空白分布到元素两侧。

在纵向上align-item

中stretch属性把元素的长度设置为相同的值；

指的是行与行之间的高度

flex-start：元素不会拉伸，沿着辅轴起边方向对齐

flex-end：沿着辅轴终边对齐

flex-baseline：沿着基线对齐就是文字底边的基线。

在纵轴上分配空白空间

用align-conent：

和横着的一样。

设置弹性元素的属性

flex-basic:可以设置弹性元素的基础长度；

如果主轴是纵向的则设置的是高度；

2.文本标签

html格式化标签粗体表示重要性（内容的重要性）或者斜体表示着重点（语气上的强调）表示你要呈现的文章时重要的所以要突出显示 一个粗体，一个斜体

与是定义粗体或斜体文本与上面的那两个是不一样的

cite标签：网站中所有加书名号的内容都可以使用cite标签

《XXX》

短引用标签的内容浏览器会默认给他加上一个“”

blockquote长引用（块级引用不能放在中）

独占一行

sup标签用来表示一个上标；

sub标签用来表示一个下标；

del标签用来表示一个删除的内容画一个横线

ins表示插入一个内容插入的内容有下划线

pre标签时预格式标签保留了格式；

code专门用来表示代码的标签

3.定位

通过position属性

relative是相对定位

当开启元素相对定位时，而不设置偏移量。和没有设置一样

2：开启后可以通过，left right top bottom 四个属性设置元素的偏移量。

是相对与原来位置移动的。

3：相对定位的元素不会脱离文档流。原来的位置虽然是空的但还占位置。

4：相对定位会使元素提升一个层级。会覆盖其他元素。

通常偏移量使用两个就可以对一个元素进行定位。

相对定位，不会该改变元素的性质，块还是块，内联还是内联

绝对定位absolute

开启绝对定位后脱离文档流

开启绝对定位后

而且是相对于浏览器窗口定位的

3：绝对定位是相对于离他最近的的开启了定位的祖先元素定位的

（一般情况开启子元素的绝对定位，也会开启祖先元素的绝对定位。）

4：如果所有的祖先元素都未开启定位，则会相对于浏览器窗口定位。

5：绝对定位会使元素提升一个层级

6：定位会改变元素的性质

内联元素变成块元素，块元素的宽度和高度默认被内容撑开

固定定位fixed

position也是一种绝对定位

它的大部分特点都和绝对定位一样

不同的是：

固定定位永远会相对于浏览器窗口进行定位

固定定位会固定在浏览器窗口的某个位置，不会随滚顶条滚动