前端布局

LostXerxes
128 阅读13分钟

CSS布局

1.正常布局流

默认情况下，元素是如何布局的？

首先获得元素的内容放在一个独立的元素盒子中然后在其周边加上内边距，边框和外边距。这就是我们之前看到的盒子模型

默认的，一个块级元素的内容宽度是器父元素的100%；其高度与其内容高度一直

一个内联元素的宽和高与内容一直，你无法设置内联元素的宽和高。

如果你想控制内联元素的尺寸，你需要为元素设置display：block；将内联元素设置为块级元素

这样就解释了独立元素的布局，但是元素之间又是如何互相影响的？

正常布局流是一套在浏览器视口内防止，组织元素的系统。默认的块级元素按照基于器父元素的书写顺序的块流动方向防止。每个块级元素会在上一元素的下面亮起一行，它们会被设置好margin分隔。内联元素有所不同，他们不会另起一行；只要在其父级块级元素的宽度内有足够的空间，他们与其他内联元素，相邻的文本内容被安排在同一行。如果空间不够，溢出的文本或元素将移到新的一行。

如果两个相邻的元素都设置了margin并且这两个margin有重叠，那么更大的设置会被保留，晓得则会消失，这被称为外边距叠加

2.弹性盒子

弹性盒子是一种按行或列布局元素的一维布局方法，元素可以膨胀以填充课外的空间

指定元素的布局为flexible

首先我们需要选择将那些元素设置为弹性盒子。我们需要给这些flexible元素的父元素display设置一个特定值。display：flex；这样就变成了弹性盒子，里面的元素就是弹性元素。我们的多列布局具有大小相等的列并且列的高度都是一样的。这是因为这样flex项的默认值是可以解决这些常见问题的。

列还是行?

弹性盒子提供了flex-direction这样一个属性，他可以指定主轴的方向；它的默认值是row，这使他们在你的浏览器的默认语言方向排成一排。

如果flex-direction的属性值是column你会看到这些元素设置为列布局

当然你还可以使用row-reverse和column-reverse属性值来反向排列flex项

换行

当你在布局中使用定宽或定高的时候，可能会出现问题即处于容器中的弹性盒子元素会溢出破坏了布局 所有我们要给flex盒子设置flex-wrap：wrap，会将任何溢出移动到下一行，当然这个溢出是指flex溢出。我们在对flex项设置flex：值；如果这个值为200px声明以为每个将至少200px宽

flex项的动态尺寸

让我们看看如何控制flex项占用空间比例的

我们需要给flex项添加flex属性当然这个属性的值如果是一个无单位的比例值，表示每个flex沿主轴的可用空间大小。如果flex:1;的话这表示每个元素占用空间都是相等的，占用的空间是在设置padding和margin之后剩余的空间，因为他是一个比例，这意味着每个flex项的设置为4000000的效果和1的时候是完全一样的

如果我们现在有4个div，这四个div被一个header标签包括这，这个header设置display:flex使其成为弹性盒子，其中里面的四个div则为flex项。这时候我们给每个flex项都设置一个flex：1这时候他们是完全成比例等分的，但是如果我们在给第四个flex项设置flex：2，你会看到第三个flex项占用了两倍的可用宽度和其他三个flex项会平分剩下50%的的可用空间

水平·和·垂直对齐

还可以使用弹性盒子的功能让flex沿主轴或交叉轴对齐。

align-items控制flex项在交叉轴上的方向

默认值是stretch其会使所有flex项沿着交叉轴的方向，拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度，则说有flex项将变得与最长flex项一样长。

我们使用center属性值会使这都些项保持其原有的高度，但是会在交叉轴居中。

你也可以设置flex-start或flex-end这样使flex项在交叉轴的开始或结束处对齐所有的值

justify-content属性控制flex项在主轴上的位置

默认值为flex-start,这会使所有flex项都位于主轴开始处

你也可以用felx-end让flex项到结尾处

center在justify-content里是可用的可以让flex项在主轴居中

而space-around是很有用的它会使所有flex项沿着主轴均匀分布在任意一端都会留有空间

还有一个值是space-between他和space-around非常相似，只是不会在两端留下任何空间

flex项排序

弹性盒子也有可以改变flex项的布局位置的功能，而不会影响到源顺序。

所有的flex项默认的order值为0

order增大flex项比order值小的在显示顺序中更靠后，也就是order的值越大越靠后，值相同的会按照源顺序显示，让然你也可以设置负值让比0的靠的更前

3.栅格系统

栅格系统是一种用于页面布局的工具。栅格系统将页面布局分解为等宽的列和行，可以帮助设计师将页面元素排列整齐、美观、有序，使页面结构更加清晰明了。同时，栅格系统也有助于提高开发效率和代码规范化。

栅格系统通常是基于CSS框架实现的。一个典型的栅格系统包括以下几个组成部分：

  • 容器(Container)：容器是包含所有栅格列的父元素，通常是一个<div>标签。
  • 栅格行(Row)：栅格行需要被包含在容器中，行是栅格系统的基本单位，用来将页面布局划分为多个水平的区域。
  • 栅格列(Column)：栅格列是栅格系统中最基本的单元，用来控制页面元素在水平方向上的宽度。每个栅格列都必须包含在栅格行中，并且每行的所有列的总宽度不能超过100%。
  • 栅格间距(Gutter)：栅格间距是指栅格列之间的空白间隔，用来调整元素之间的间距。

栅格系统的具体实现方式在各个框架中有所不同，比如Bootstrap、Foundation、Ant Design等。

4.浮动

float属性最初只用于块的文本内浮动图像，但是现在已经成为在网页上创建多列布局的最常用的工具之一

给块级元素设置float可以让块级元素浮动在一行脱离标准文档流，当然它的值有两个一个left向左浮动，一个right向右浮动

但是由于它脱离了标准文档流其他元素会显示在它的下方，影响布局，所以我们在使用完浮动后就需要清除浮动

清除浮动

如果想要停止它需要添加clear属性

clear属性接受以下几个值：

left停止任何活动左浮动

right停止任何活动的右浮动

both停止任何活动的左右浮动，当然这也是我们最常用的

我们可以使用伪元素给浮动盒子的父盒子设置

main::after{ content: ""; clear: both; display: block; }

这样我们就可以清除浮动

还有一种给父盒子设置overflow-hidden

5.定位

CSS 布局定位是用来控制页面元素在页面中的位置和大小的一种方式。在 CSS 中，有多种定位方式可供选择，其中常见的包括相对定位、绝对定位和固定定位。

  1. 相对定位（Relative Positioning）：相对定位是将元素相对于其原来的位置进行移动，而不会影响其他元素的位置。它常用于微调已经定位好的元素的位置，可以通过 top、bottom、left 和 right 属性来移动元素。使用相对定位时，元素仍然会占据文档流中的原位置，所以可能导致页面布局出现问题。
  2. 绝对定位（Absolute Positioning）：绝对定位是将元素相对于最近的已定位的父元素进行定位。如果没有已定位的父元素，则相对于文档根元素定位。使用绝对定位可以将元素从文档流中完全移除，因此可以自由定位元素，但同时也可能导致覆盖其他内容和容易产生重叠。可以通过 top、bottom、left 和 right 属性来定位元素。
  3. 固定定位（Fixed Positioning）：固定定位是将元素相对于浏览器窗口的视口进行定位，通常用于创建固定的导航栏、广告或类似的元素。固定定位的元素不会随着页面滚动而滚动，它将始终保持在窗口中的相同位置。可以通过 top、bottom、left 和 right 属性来定位元素。

此外，还有一种比较常用的定位方式叫做浮动（Float），用来将元素从文本流中取出并放在容器的左侧或右侧，使它们之间的空隙填补在正常的文本流中。尽管浮动是布局的有效工具，但它也可能导致一些问题，比如脱离文本流和清除浮动等。

6.多列布局

多列布局可以用来将页面内容分成多个列，通常用于文章、新闻等需要分栏显示的场景中。在 CSS 中，实现多列布局的方式主要有以下两种：

  1. 使用浮动（Float）和宽度（Width）：这种方式是通过设置每个列的宽度和浮动来实现多列布局。首先，需要设置容器的宽度，然后将每一栏设为浮动，最后调整每栏的宽度以达到所需的效果。

例如，下面的示例代码将内容分为三栏：

<div class="container">
  <div class="column">第一栏</div>
  <div class="column">第二栏</div>
  <div class="column">第三栏</div>
</div>

.container {
  width: 100%; /* 容器宽度 */
  overflow: hidden; /* 清除浮动 */
}
​
.column {
  float: left; /* 每栏浮动 */
  width: 30%; /* 每栏宽度 */
  margin-right: 5%; /* 每栏间隔 */
}
  1. 使用 CSS3 的多列布局（Multiple Column Layout）：从 CSS3 开始，可以使用 columns 属性来实现简单的多列布局，可以在不使用浮动的情况下轻松地创建多列布局。该属性将容器内容自动分成多列，并支持对每个列进行定制，比如列宽、间距等。但需要注意的是，该属性不支持 IE9 及以下浏览器。

例如，下面的示例代码将内容分为三栏：

<div class="container">
  <p>第一栏</p>
  <p>第二栏</p>
  <p>第三栏</p>
</div>

.container {
  columns: 3; /* 列数 */
  column-gap: 2em; /* 列间距 */
  column-rule: 1px solid black; /* 分隔线 */
}

以上两种方式都有各自的优缺点，在实际应用中需要根据具体情况选择合适的方式。

7.响应式设计

响应式设计（Responsive Design）是指根据设备屏幕尺寸和分辨率等特征，自适应地调整网站布局和内容，以提供更好的用户体验。其主要目的是让网站能够在不同的设备上（包括桌面电脑、平板电脑、手机等）有良好的显示效果，同时还要保持一致的用户体验。

实现响应式设计的关键是使用流式布局（Fluid Layout）和媒体查询（Media Query）。流式布局是指使用相对单位（如百分比）来设置网页元素尺寸，而不是绝对单位（如像素），从而使网页能够随着视口大小的改变而自适应地调整布局。媒体查询是一种 CSS3 技术，它能够根据不同的设备特征（如屏幕尺寸、分辨率、方向等）来加载不同的 CSS 样式，从而实现针对不同设备的自适应布局。

除了流式布局和媒体查询，还有一些其他的技术也可以用于实现响应式设计，例如弹性图片（Flexible Images）、响应式 Typography（适应型排版）、Viewport（视口）等。

响应式设计具有很多优点。首先，它可以提高网站的可访问性和可用性，因为用户可以在不同的设备上方便地访问网站并获得良好的体验。其次，它可以提高 SEO（Search Engine Optimization，搜索引擎优化）效果，因为响应式设计使得网站能够适应不同的设备和屏幕，从而得到更多的流量和更高的搜索排名。此外，响应式设计还可以降低网站维护成本，因为只需要维护一个网站即可适应不同的设备和屏幕。

8.媒体查询

媒体查询（Media Query）是一种 CSS3 技术，它允许开发者根据不同的设备特征（如屏幕大小、分辨率、方向等）来加载不同的 CSS 样式，从而实现针对不同设备的自适应布局。通过媒体查询，可以在同一个 HTML 文件中编写多组样式规则，使网页能够在不同的设备上以最佳的方式展示，并提供更好的用户体验。

媒体查询的语法格式为 @media mediatype and (condition) { ... }，其中：

  • mediatype 指定需要应用样式的设备类型，常用的有 all（所有设备）、screen（电脑屏幕）、print（打印设备）等；
  • condition 指定需要应用样式的设备特征，包括设备宽度、高度、方向、分辨率等，如 max-width: 600px 表示当设备宽度小于等于 600px 时应用该样式。

媒体查询可支持的条件包括以下内容：

  1. 设备尺寸相关：
  • width：设备宽度
  • height：设备高度
  • device-width：设备的屏幕宽度，包括滚动条和其他边框，与 CSS 的 width 属性不同。
  • device-height：设备的屏幕高度，包括滚动条和其他边框，与 CSS 的 height 属性不同。
  • orientation：设备方向（横向或纵向）
  1. 像素密度相关：
  • resolution：设备像素密度
  • min-resolution：最小设备像素密度
  • max-resolution：最大设备像素密度

媒体查询示例：

/* 当设备宽度小于等于 600px 时应用该样式 */
@media (max-width: 600px) {
  body {
    font-size: 16px;
  }
}
​
/* 当设备为横向时应用该样式 */
@media all and (orientation: landscape) {
  .container {
    width: 100%;
    height: 100%;
  }
}
​
/* 当设备像素密度大于等于 300dpi 时应用该样式 */
@media (min-resolution: 300dpi) {
  img {
    width: 50%;
  }
}

除了以上提到的条件之外，还有一些可以使用的条件，具体可参考MDN Web Docs。

需要注意的是，媒体查询中的样式规则会覆盖原始样式，因此需要格外注意样式的优先级问题，以免影响整个页面的布局。

总之，使用媒体查询可以实现针对不同设备的自适应布局，提供更好的用户体验。与响应式设计一同使用时，可以使网页适应不同的设备和屏幕，并在不同的设备上以最佳的方式展示。

avatar
文章
阅读
粉丝