前端基础之HTML+CSS（六）

前言

本篇主要介绍了CSS的多种布局方式：弹性盒布局、多列布局、响应式布局、网格布局。

---

布局方式

盒子模型

标准盒子模型

标准 W3C 盒子模型包含了 元素内容（content）、内边距（padding）、边框（border）、外边距（margin） 几个要素，并且 content 部分不包含其他部分。

标准模式下，一个块的宽度 = width+padding(内边距)+border(边框)+margin(外边距)；

怪异盒模型（IE盒子模型）

IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding。

怪异模式下，一个块的宽度 = width+margin(外边距) （即怪异模式下，width包含了border以及padding)；

box-sizing: content-box;  /* 将采用标准模式的盒子模型标准 */
box-sizing: border-box; /* 将采用怪异模式的盒子模型标准 */
box-sizing: inherit; /*规定应从父元素继承 box-sizing 属性的值。*/

弹性盒布局

概念

Flex 布局（Flexbox）： Flex 布局是一种一维布局系统，它通过将网页中的元素放置在一个伸缩容器内，并定义各个元素在主轴和交叉轴上的排布方式，来实现布局。Flex 布局主要用于创建灵活的、单行或单列的布局，使得网页中的元素能够自动调整和填充空间，以适应不同屏幕大小和设备。

display: flex;

影响：

1. 子元素默认横向排列
2. 行内元素变成了块级元素
3. 只有一个元素的时候， margin:auto 自动居中

flex-direction： 弹性容器中子元素排列方式（主轴排列方式）

row: 从左到右, column: 从右到左, row-reverse: 从上到下, column-reverse : 从下到上

flex-wrap： 设置弹性盒子的子元素超出父容器时是否换行

nowrap: 不换行；wrap: 换行；wrap-reverse: 从下向上换行

justify-content： 设置弹性盒子元素在主轴上的对齐方式

flex-start: 对主轴开始对齐
flex-end: 对主轴结束对齐
center: 居中
space-between: 两端对齐
space-around: 距离环绕 

flex-flow： 是flex-direction和flex-wrap简写形式

align-item： 决定交叉轴上的方向

flex-start: 对交叉轴开始对齐
flex-end: 对交叉轴结束对齐
center: 居中
baseline: 按项目中的文字基线来对齐
stretch: 默认值，如果没有写项目高度会默认和块元素等高

align-content： 交叉轴上设置行对齐

flex-start: 对主轴开始对齐
flex-end: 对主轴结束对齐
center: 居中
space-between: 两端对齐
space-around: 距离环绕 
stretch: 所有项目平分块高度

align-self： 采用单独的对齐方式

order： 项目的排列顺序（越小排越前）

flex-shink： 是否缩小，默认0不缩小，1的话等大小缩小

flex： flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 flex：1 表示所有成员将平分剩余空间

多列布局

1. column-count：该属性用于指定多列布局中希望显示的列数。

2. column-gap：该属性用于设置多列布局中列之间的间隔（间距）。

3. column-rule：该属性是一个用于设置多列布局中列之间的边框的简写属性。它包含三个子属性：

   • column-rule-width：用于设置列之间边框的宽度。
   • column-rule-style：用于设置列之间边框的样式（例如实线、虚线等）。
   • column-rule-color：用于设置列之间边框的颜色。

4. column-fill：该属性用于指定在多列布局中，当内容超出列高度时，如何填充内容。它有两个可能的值：

   • balance：内容会平衡地分布在各列之间，尽量使各列的高度相近，以填充整个多列容器。
   • auto：内容会在列之间自动流动，不考虑列的高度差异。

5. column-span：该属性用于跨越多列，将元素扩展到多列中的指定列数。它有两个可能的值：

   • none：默认值，元素不会跨列。
   • all：元素将跨越所有列，占据多列的宽度。

6. column-width：该属性用于设置多列布局中每列的宽度。您可以使用具体的长度值（例如px）或相对值（例如em、rem或百分比）来定义列的宽度。

/* 显示的列数 */
column-count: 5;

/* 调整列间距 */
column-gap: 30px;

/* 裂边框 */
column-rule: 2px solid red;

/* 列高度统一 */
column-fill: auto;
/* auto 把父盒子占满 */

/* 调整列宽 */
column-width: 500px;

column-span: all;
/* all 横跨所有列 */

break-inside: avoid;
/* 禁止盒子内部折行 */

响应式布局

特点：

1. 多设备兼容：响应式布局使网站能够适应各种设备，包括桌面电脑、笔记本电脑、平板电脑和智能手机等，提供一致的用户体验。

2. 节省维护成本：采用响应式布局，只需维护一个网站版本，而不是为每个设备创建单独的网站，从而减少维护成本和工作量。

3. 更好的用户体验：用户不需要手动缩放或滚动页面，响应式布局可以根据屏幕大小自动调整和优化布局，提供更好的浏览体验。

4. SEO友好：响应式网站只有一个URL和一套HTML代码，这有助于搜索引擎优化，因为所有的链接和页面权重都集中在一个页面上。

5. 未来设备兼容性：随着新设备的不断出现，响应式布局有望更好地适应未来的设备和分辨率。

缺点：

1. 加载时间较长：响应式布局可能需要加载较多的CSS和JavaScript文件，尤其是对于复杂的网站，这可能导致加载时间增加。
2. 设计复杂性：在设计和开发过程中，需要考虑各种屏幕尺寸和设备，使得设计变得更加复杂和耗时。
3. 兼容性问题：某些旧版本的浏览器可能不支持CSS3的媒体查询等响应式布局所需的新特性，可能会导致显示问题。
4. 内容控制：响应式布局通常是根据屏幕尺寸来调整布局，而不是根据设备类型或性能来调整内容。这可能导致某些设备加载不必要的内容，增加了带宽和资源的浪费。
5. 设计妥协：由于不同设备的屏幕尺寸和特性不同，有时候需要在设计上做出妥协，可能会影响到某些设备上的用户体验。

媒体查询

媒体查询允许网页样式根据设备的特性和屏幕尺寸来应用不同的样式规则。媒体查询允许开发者针对不同的设备类型、设备方向、屏幕分辨率等条件编写不同的CSS代码，以实现响应式布局和适应不同设备的需求。

使用媒体查询时，可以根据设备的特性和属性来设置条件，当这些条件满足时，对应的CSS规则将被应用。媒体查询通常被包含在CSS样式表中的@media块中，如下所示：

/* 媒体查询样式块 */
@media (max-width: 768px) {
  /* 当屏幕宽度小于等于768像素时，应用这里的样式规则 */
  /* 例如调整字体大小、调整布局等 */
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* 当屏幕宽度在769像素到1024像素之间时，应用这里的样式规则 */
  /* 例如调整字体大小、调整布局等 */
}

/* 更多媒体查询规则... */

@media块包含了媒体查询条件，如(max-width: 768px)表示屏幕宽度小于等于768像素，(min-width: 769px) and (max-width: 1024px)表示屏幕宽度在769像素到1024像素之间。当满足相应条件时，媒体查询内的CSS规则将会生效，从而实现对不同屏幕尺寸的样式调整。

媒体查询在响应式布局中起着重要作用，通过它可以针对不同的屏幕大小和设备类型提供不同的用户体验，使网页内容能够适应各种终端，提供更好的可用性和用户友好性。

设备类型

media_type	说明
all	用于所有设备
screen	用于计算机屏幕、平板电脑、智能手机等显示屏幕
print	用于打印页面
speech	用于屏幕阅读器和语音合成器
handheld	用于手持设备
only screen	仅用于计算机屏幕，不包括打印和语音设备
not screen	不用于计算机屏幕，包括打印和语音设备
min-width	当视口宽度大于等于指定值时生效
max-width	当视口宽度小于等于指定值时生效
orientation	根据设备方向进行样式调整
resolution	根据屏幕分辨率进行样式调整
aspect-ratio	根据视口宽高比进行样式调整
color	根据显示设备支持的颜色数量进行样式调整
prefers-reduced-motion	根据用户对动画的偏好进行样式调整

media_type 可以与 @media 块一起使用，以在特定条件下应用相应的样式。例如：

/* 仅在屏幕上显示，不用于打印和语音设备 */
@media only screen {
  /* 在这里添加适用于屏幕的样式规则 */
}

/* 当视口宽度小于等于720像素时生效 */
@media (max-width: 720px) {
  /* 在这里添加适用于小屏幕设备的样式规则 */
}

/* 竖屏且视口宽度小于等于720像素时生效*/
@media screen and (orientation: portrait) and (max-width: 720px){
    /* 在这里添加适用于屏幕的样式规则 */
}

/* 横屏 */
@media screen and (orientation: landscapr){
    /* 在这里添加适用于屏幕的样式规则 */
}

这样，网页可以根据不同的 media_type 和媒体查询条件提供适合不同设备和使用场景的样式，实现响应式布局。

px em rem

px: 50px
em: 相对单位， 相对于父元素的字体大小。div width:10em;
rem: 相对单位， 相对于根元素（html）字体大小， div width:10rem;

fontsize 计算

document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px'
fontsize = 当前设备的css布局宽度/物理分辨率(设计稿的宽度) * 基准font-size

vh 与 vw

vh-->view-height 100vh === 视口的高度

vw-->view-width 100vw ==== 视口的宽度

iphone6 100vw === 375px 1vw = 3.75px
iphone6 plus 100vw === 414px 1vw = 4.14px

没有滚动条的时候，100vw === 100%
有滚动条100vw包含滚动条，窗口大小100%刨除滚动条，剩余的空间占满

网格布局

概念

网格布局： 网格布局是一种二维布局系统，它将网页划分为行和列的网格，并允许我们将网页内容放置在这些网格中。通过使用网格容器和网格项目，我们可以控制网页中元素的位置和尺寸，实现复杂的布局。网格布局提供了对齐、分布、排序等丰富的功能，可以轻松创建复杂的网页布局。

Grid布局和Flex布局的区别

1. 维度：
   • 网格布局是二维布局系统，可以同时控制元素在行和列上的布局，适用于复杂的多行多列布局。
   • Flex 布局是一维布局系统，只能控制元素在主轴或交叉轴上的布局，适用于单行或单列的简单布局。
2. 控制方式：
   • 网格布局通过在网格容器中使用 grid-template-columns 和 grid-template-rows 等属性来定义网格的列和行，同时使用 grid-column 和 grid-row 等属性来控制元素在网格中的位置。
   • Flex 布局通过在伸缩容器中使用 display: flex 和 flex-direction 等属性来定义主轴的方向，同时使用 justify-content 和 align-items 等属性来控制元素在主轴和交叉轴上的排布。
3. 复杂性：
   • 网格布局更适用于复杂的多行多列布局，可以实现更精细的控制和布局。
   • Flex 布局更适用于简单的单行或单列布局，操作更简便，适用于常见的布局需求。

网格线：划分网格的线，如果一个m行n列的网格，需要m+1+n+1条线，m+1条横线，n+1条总线

网格布局的属性

当使用网格布局时，可以分为网格容器属性和网格项目属性。

网格容器属性

属性	描述
display: grid;	定义一个元素为网格容器，并启用网格布局。
grid-template-columns	定义网格的列大小。
grid-template-rows	定义网格的行大小。
grid-template-areas	定义网格的区域名称。
grid-template	是 grid-template-rows、grid-template-columns 和 grid-template-areas 的缩写。
grid-column-gap	定义网格列之间的间隔。
grid-row-gap	定义网格行之间的间隔。
grid-gap	是 grid-row-gap 和 grid-column-gap 的缩写。
justify-items	定义网格项在单元格内的水平对齐方式。
align-items	定义网格项在单元格内的垂直对齐方式。
justify-content	定义网格容器内所有网格项在主轴上的对齐方式。
align-content	定义网格容器内所有网格项在交叉轴上的对齐方式。

网格项目属性

属性	描述
grid-column-start	定义网格项目的开始列。
grid-column-end	定义网格项目的结束列。
grid-row-start	定义网格项目的开始行。
grid-row-end	定义网格项目的结束行。
grid-column	是 grid-column-start 和 grid-column-end 的缩写。
grid-row	是 grid-row-start 和 grid-row-end 的缩写。
grid-area	是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的缩写。
justify-self	定义网格项目在单元格内的水平对齐方式。
align-self	定义网格项目在单元格内的垂直对齐方式。

示例：创建一个包含头部、侧边栏、主内容和页脚部分的网页布局。

<div class="grid-container">
  <header class="item header">头部</header>
  <aside class="item sidebar">侧边栏</aside>
  <main class="item main">主内容</main>
  <footer class="item footer">页脚</footer>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 200px; /* 两列 - 1fr 用于主内容以填充剩余空间，200px 用于侧边栏 */
  grid-template-rows: 100px 1fr 50px; /* 三行 - 头部100像素，主内容填充剩余空间，页脚50像素 */
  grid-gap: 10px; /* 行列之间的间隔为10像素 */
  height: 500px; /* 设置容器高度为500像素，仅作为示例用途 */
}

.item {
  background-color: #f0f0f0;
  padding: 10px;
  text-align: center;
}

/* 定义网格区域的命名 */
.grid-container {
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
}

/* 使用网格区域命名布局 */
.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

在上述示例中，我们创建了一个包含头部、侧边栏、主内容和页脚的网格布局。网格容器使用 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行大小，同时使用 grid-template-areas 属性为网格区域命名。然后，我们使用 grid-area 属性将具体的网格项目放置到对应的网格区域中，实现复杂的网页布局。

fr 是网格布局中用于表示网格容器中列（column）或行（row）大小的一个单位。fr 表示"fractional unit"（分数单位），它允许我们将网格容器中的可用空间划分成等分的部分。

在网格布局中，如果使用 fr 单位来定义网格的列或行大小，它将按照比例分配可用空间。例如，如果一个网格容器的定义为 grid-template-columns: 1fr 2fr;，那么它将把可用空间划分成两部分，第一列占用 1 部分，第二列占用 2 部分。这意味着第二列的大小将是第一列大小的两倍。

fr 单位非常有用，因为它可以根据可用空间的大小自动调整列或行的大小，适应不同的屏幕尺寸和布局需求。与传统的百分比单位不同，fr 单位更灵活，可以确保网格项在各种设备和屏幕上的合适布局。

示例：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 第一列占用1份，第二列占用2份 */
}

分成等分的部分。

在网格布局中，如果使用 fr 单位来定义网格的列或行大小，它将按照比例分配可用空间。例如，如果一个网格容器的定义为 grid-template-columns: 1fr 2fr;，那么它将把可用空间划分成两部分，第一列占用 1 部分，第二列占用 2 部分。这意味着第二列的大小将是第一列大小的两倍。

fr 单位非常有用，因为它可以根据可用空间的大小自动调整列或行的大小，适应不同的屏幕尺寸和布局需求。与传统的百分比单位不同，fr 单位更灵活，可以确保网格项在各种设备和屏幕上的合适布局。

示例：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 第一列占用1份，第二列占用2份 */
}

将网格容器的两列大小分为 1:2 的比例。这样，第二列的大小将是第一列大小的两倍。