关于CSS布局

抛砖引玉的写法，因为css的东西很细碎，布局又差不多是css里最常用最重要的部分了，就先提纲草稿式的列一下。

1.**什么是css布局**： 是一种基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法。

2 **css布局的种类**：

1. 正常流式布局
2. 行内布局
3. 表格布局
4. 定位布局
5. 弹性盒子布局
6. 网格布局

**正常布局流**：不给对页面进行任何布局设置时候的布局方式

可能影响默认布局的方式：

• display属性
• position属性
• float属性
• 表格布局: display: table（它通常会被用于兼容一些不支持Flexbox和Grid的浏览器）
• 多列布局： columns

display属性：css3中将其分为分为外部属性和内部属性，外部属性控制其在流式布局中的表现方式(inline, block)，内部属性可以控制其子元素的布局（flex, grid），可以使用display: "inline flex"表示内外属性。css2中只能使用单关键字语法所以需要使用inline-flex,同样的inline-block也是同样的情况。

**Flex布局**

分为两部分：设置在容器的属性，设置在元素的属性。

容器的属性：

• flex-direction：row | row-reverse | column | column-reverse;
• flex-wrap：nowrap | wrap | wrap-reverse;
• flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
• justify-content: 主轴上对齐方式，flex-start | flex-end | center | space-between | space-around;
• align-items：交叉轴上如何对齐， flex-start | flex-end | center | baseline | stretch;
• align-content：

元素的属性：

• order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow：如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
• flex-shrink：同上，缩小
• flex-basis：默认大小
• flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
• align-self：align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

**Grid布局**

擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系，通过设置display: grid或者inline-grid

容器的属性：

• grid-template-columns: 500px 1fr 2fr | repeat(3, 1fr）
• grid-auto-columns:设置了grid-template-columns后，设置行高
• align-items

元素的属性：

• grid-column-start
• align-self

相关术语：

1fr 相当于1份，如果只有一个1fr就是整个是1份， 1fr 2fr 3fr就是分为6份。

minmax()设置最大值最小值。minmax(100px, 200px),最大100px，最小200px

repeat:相当于复制

**多列布局**

容器的属性：

• column-count: 3;// 列数
• column-gap: 20px;// 列间距
• column-rule: 4px dotted rgb(79, 185, 227);//分割线的样式

**定位：position**

static:文档流中，设置top, left无效

relative：相对于本来在文档流中的位置定位, top,left生效

absolute: 相对于第一个不是static的父元素定位

fixed：相对于视窗

sticky： 被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起1​​0像素）为止，此后它就变得固定了。

**响应式布局**：可以理解为一套代码，可以根据不同的设备做出不同的适配。媒体查询是实现响应式布局的一种方式。

**媒体查询**：

@media media-type and (media-feature-rule) {