css布局 盒子模型和弹性布局

目录

盒子模型

边框 border

外边距 margin

 内边距 padding

布局属性

浮动属性

定位属性

Flex

1Flex布局属性

1.display: flex;

3.flex-direction

4.flex-wrap

6.align-items

7.align-content

9.flex-grow

10.flex-shrink

11.gap，row-gap,column-gap

12.align-self

Grid布局

特点：

缺点：

容器属性

项目属性

---

网页布局是CSS的一个重点应用布局的传统解决方案，

盒子模型

盒状模型，

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成是一个个盒子。盒模型主要定义四个区域：内容(content)、内边距(padding)、边框(border)、外边距(margin)。

边框 border

border属性设置一个元素的边框，它有三个要素：宽、样式、颜色，统称“边框三要素”。

三要素书写的时候一般如下顺序

border：宽度 样式 颜色

border: 1px solid red;
1
不过不按此顺序来写依然能正常显示。

div{ border: red solid 2px; }
1
border-style设置边框的样式，有五种常用样式可选

点状dotted
实线solid
双线double （ 需要最起码设置为3像素，不然显示不下）
虚线dashed
无边框none
border的三要素可以统一写在”border”属性中，也可以单独设置。

统一的写法：border: 1px solid red;

外边距 margin

margin:value(四个方向相同) ;
margin: value(上下) value(左右);
margin: value(上) value(左右) value(下);
margin: value(上) value(右) value(下) value(左);

 内边距 padding

padding:value(四个方向相同) ;
padding: value(上下) value(左右);
padding: value(上) value(左右) value(下);
padding: value(上) value(右) value(下) value(左);

布局属性

浮动，定位

浮动属性

属性	说明
float	设置框是否需要浮动及浮动方向
clip	裁剪绝对定位元素，该元素必须是绝对定位，上右下左原则
overflow	设置内容溢出元素框时的处理方式，值：visible,auto,hidden,scroll
clear	设置元素的哪一侧不允许出现其他浮动元素
display	设置元素如何显示，值none,block,inline,inline-block,inherit
visibility	定义元素是否可见，visibility设置为隐藏，元素占用的空间依然会保留，但display:none不保留占用空间，值：visible,hidden

定位属性

定位元素（positioned element）是其计算后位置属性为 relative, absolute,fixed或sticky 的一个元素（换句话说，除static以外的任何东西）。
相对定位元素（relatively positioned element）位置属性为relative的元素。
绝对定位元素（absolutely positioned element）位置属性为 absolute 或 fixed的元素。
粘性定位元素（stickily positioned element）位置属性为sticky的元素

position	说明
static	该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative	该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
absolute	元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
fixed	元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。
sticky	元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是真的滚动祖先。这个阻止了所有“sticky”行为（详情见Github issue on W3C CSSWG）。

属性	说明
position	元素的定位类型，值static,absolute绝对，relative相对
top	元素上外边距
right	元素右外边距
bottom	元素下外边距
left	元素下外边距

css详解position五种属性用法及其含义 - _Fatman - 博客园 (cnblogs.com)

Flex

Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

.box{
  display: flex;
}

行内元素也可以使用Flex布局。

.box{
  display: inline-flex;
}

flex布局默认有两条轴，水平的主轴和垂直的交叉轴 :

Flex布局

主轴 (main size) 是弹性容器的主要轴线，弹性项目(items)是沿着这个轴线布置的。请注意，它不一定是水平的；它取决于flex-direction属性（见下文）。在开始学习之前，我们先确定一下页面（容器）布局：

最外边的容器我们称为container：

container里面的每个小盒子，我们称为items：

1Flex布局属性

CSS Flex弹性布局详解! (常用的12个属性) - 腾讯云开发者社区-腾讯云 (tencent.com)

1.display: flex;

想要使用flex布局，我们必须先给外边的container容器加上一个display:flex;属性, 那么容器里面的元素才遵循flex布局:

2.flex

flex属性的作用就是盒子占总量的份数，flex布局可以嵌套

3.flex-direction

flex-direction属性决定了主轴的方向, 即项目排列的方向 :

4.flex-wrap

flex-wrap属性作用在container上，决定了当一排items排不下的时候，应该怎么排布

nowrap：默认值是nowrap，即不换行(按照宽度比例排列在一行)

wrap：宽度加起来超过了container的宽度，items会换行

wrap-reverse：宽度加起来超过了container的宽度，items会换行。会倒序排列

5.justify-content

作用于container上，这个属性定义了项目在主轴上的对齐方式

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center：居中
• space-between：两端对齐，items之间的间隔都相等。
• space-around：每个items两侧的间隔相等。所以，items之间的间隔比items与边框的间隔大一倍。
• justify-content: space-evenly：每个items之间的间隔相等。

6.align-items

定义在container上，决定了items在交叉轴上的对齐方式。

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 以items里第一行文字的基线对齐。
• stretch（默认值）：如果items未设置高度或设为auto，将占满整个容器的高度。

7.align-content

align-content定义在container上，决定了多行items在交叉轴上的对齐方式(类似于 justify-content在主轴上的效果)，如果items只有一行，那么这个属性将不起作用。也就是说这个属性必须搭配flex-wrap使用，不然items不会换行。

• flex-start/start：与交叉轴的起点对齐。
• flex-end/end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• space-evenly：items均匀分布，每个items之间和items和边框之间的距离都相等。
• stretch（默认值）：轴线占满整个交叉轴。

8.order

该属性在items上，定义了项目的排列顺序，数值越小，排列越靠前，默认值为0。

9.flex-grow

定义在items上，决定了items占据剩余空间的能力。注意这里说的是 “ 剩余空间 ” 。

10.flex-shrink

定义在items上，决定了当container空间不足的时候，items缩小的比例，默认为1。

11.gap，row-gap,column-gap

gap属性定义了items之间的空间，并不作用于外边框上。这个属性只定义了items之间的最小间隙，如果间隙以某种方式变大(比如像justify-content: space-between;)，那么间隙将只在该空间最终变小的情况下生效。

row-gap和column-gap分别定义了items在主轴和交叉轴方向上的最小间隙。

12.align-self

align-self属性定义在items上，它允许单个items有与其他items有不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

Grid布局

Grid 是二维布局系统，通常用于整个页面的规划，Grid 将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上

特点：

1. 固定和灵活的轨道尺寸；
2. 可以使用行号，名称或通过定位网格区域将项目放置在网格上的精确位置；
3. 可以将多个项目放入网格单元格或区域中，它们可以彼此部分重叠。

缺点：

兼容性比较差。

容器属性

1. display: grid
   • 设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

display: grid;
// grid 块级元素(默认值)
// inline-grid 行级块元素
复制代码

1. grid-template-columns
   • 定义每一列的列宽

grid-template-columns: 100px 100px 100px; // 三个值代表设置三列并且值为100px
复制代码

1. grid-template-rows
   • 定义每一行的行高

grid-template-rows: 100px 100px 100px; // 三个值代表设置三行并且值为100px
复制代码

1. repeat() & auto-fill 关键字 & fr 关键字 & minmax() & auto 关键字 & 网格线的名称

grid-template-columns、grid-template-rows设置的行或者列比较多的时候，可以使用repeat()这个函数简化重复的值

// 如上面代码可以改写成这样
// repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);

// repeat()重复某种模式也是可以的。
grid-template-columns: repeat(2, 100px 20px 80px);

// 表示自动填充，直到容器放不下为止，auto-fill关键字
grid-template-columns: repeat(auto-fill, 100px);

// 为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
grid-template-columns: 1fr 1fr;

// minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);

// auto关键字表示由浏览器自己决定长度。
grid-template-columns: 100px auto 100px;

// grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
复制代码

1. grid-row-gap
   • 设置行与行的间隔（行间距）

grid-row-gap: 20px;
复制代码

1. grid-column-gap
   • 设置列与列的间隔（列间距）

grid-column-gap: 20px;
复制代码

1. grid-gap
   • grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。

// 如果省略了第二个值就默认为第二个等于第一个值
grid-gap: <grid-row-gap> <grid-column-gap>;
grid-gap: 20px 20px;
复制代码

1. grid-template-areas
   • 网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

grid-template-areas: 'a b c'
                     'd e f'
                     'g h i';

// 多个单元格合并成一个区域的写法如下。
grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';

// 实例
grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";
复制代码

1. grid-auto-flow
   • 划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序。

// 这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。
grid-auto-flow: column;
复制代码

1. justify-items
   • justify-items属性设置单元格内容的水平位置（左中右）

justify-items: start | end | center | stretch;
// start：对齐单元格的起始边缘。
// end：对齐单元格的结束边缘。
// center：单元格内部居中。
// stretch：拉伸，占满单元格的整个宽度（默认值）
复制代码

1. align-items
   • align-items属性设置单元格内容的垂直位置（上中下）

align-items: start | end | center | stretch;
// start：对齐单元格的起始边缘。
// end：对齐单元格的结束边缘。
// center：单元格内部居中。
// stretch：拉伸，占满单元格的整个宽度（默认值）
复制代码

1. place-items
   • place-items属性是align-items属性和justify-items属性的合并简写形式。

place-items: <align-items> <justify-items>;
place-items: start end;
复制代码

1. justify-content
   • justify-content属性是整个内容区域在容器里面的水平位置（左中右）

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
复制代码

1. align-content
   • align-content属性是整个内容区域的垂直位置（上中下）

align-content: start | end | center | stretch | space-around | space-between | space-evenly;
复制代码

1. place-content
   • place-content属性是align-content属性和justify-content属性的合并简写形式。

place-content: <align-content> <justify-content>
place-content: space-around space-evenly;
复制代码

1. grid-auto-columns & grid-auto-rows
   • 用来设置，浏览器自动创建的多余网格的列宽和行高。

grid-auto-columns: 50px;
grid-auto-rows: 50px;
复制代码

1. rid-template
   • grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

rid-template: <grid-template-columns> <grid-template-rows> <grid-template-areas>
复制代码

1. grid
   • grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

grid: <grid-template-rows> <grid-template-columns> <grid-template-areas> <grid-auto-rows> <grid-auto-columns> <grid-auto-flow>
复制代码

项目属性

1. grid-column-start
   • 项目左边框所在的垂直网格线

grid-column-start: 1; // 1为左边框从第一根开始
复制代码

1. grid-column-end
   • 项目右边框所在的垂直网格线

grid-column-end: 2; // 2为右边框从在二根结束
复制代码

1. grid-row-start
   • 项目上边框所在的水平网格线

grid-row-start: 1; // 1为上边框从第一根开始
复制代码

1. grid-row-end
   • 项目下边框所在的水平网格线

grid-row-end: 2; // 2为下边框从在二根结束
复制代码

上述四个项目属性值既可以为数字也可以为网格线名

//如上图所示，1号项目就是从第二根垂直网格线开始第四根结束
.item1{
    grid-column-start: 2;
    grid-column-end: 4;
    background: red;
}
复制代码

1. grid-column
   • grid-column属性是grid-column-start和grid-column-end的合并简写形式

grid-column: <start-line> / <end-line>;
grid-column: 1 / 3;
/* 等同于如下代码 */
grid-column-start: 1;
grid-column-end: 3;
复制代码

1. grid-area
   • grid-area属性指定项目放在哪一个区域。

grid-area: e; // e 为区域名称
grid-area: <row-start> / <column-start> / <row-end> / <column-end>; // 也可以直接指定项目位置
复制代码

1. justify-self & align-self & place-self
   • justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
   • align-self属性设置单元格内容的垂直位置（上中下）， 跟align-items属性的用法完全一致，也是只作用于单个项目。
   • place-self属性是align-self属性和justify-self属性的合并简写形式。

justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
place-self: <align-self> <justify-self>;

//start：对齐单元格的起始边缘。
//end：对齐单元格的结束边缘。
//center：单元格内部居中。
//stretch：拉伸，占满单元格的整个宽度（默认值）。
复制代码

作者：狮子哇
链接：https://juejin.cn/post/6940627375537258527