网站制作教程:CSS 弹性框和网格

你的网络首码项目网 网站建设来源:你的网络首码项目网评论96字数 1703阅读模式

CSS弹性框和网格可用于创建网站布局和在网页上定位项目。下面是一个概述。

CSS弹性框和网格是针对用户界面设计优化的两种不同的布局模型。Flexbox(也称为柔性框布局)处理一维布局,您可以在其中水平或垂直布局和对齐元素。网格(也称为网格布局)更进一步,允许您构建二维布局,您可以在其中水平和垂直布局和对齐元素。文章源自你的网络首码项目网-https://www.youranweb.com/267.html

下面是一些示例,用于演示弹性框和网格布局的概念。文章源自你的网络首码项目网-https://www.youranweb.com/267.html

弹性框文章源自你的网络首码项目网-https://www.youranweb.com/267.html

Flexbox包含许多属性,可用于定义柔性框以及其中项目的行为。文章源自你的网络首码项目网-https://www.youranweb.com/267.html

首先,通过应用或对flex容器声明它。这将为其内容建立新的弹性格式设置上下文。display: flexdisplay: inline-flex文章源自你的网络首码项目网-https://www.youranweb.com/267.html

拥有弹性容器后,可以将各种弹性属性应用于其子项。flex属性是主要flex属性的简写,如下所示:文章源自你的网络首码项目网-https://www.youranweb.com/267.html

<!DOCTYPE html>
<title>Example</title>
<style>
.outer-container {
  font: 16px sans-serif;
  background: gold;
  color: white;
  height: 200px;
  display: flex;
}
.box {
  padding: 10px;
  flex: 1 0 auto;
}
.larger {
  background: yellowgreen;
  flex: 3 0 auto;
}
</style>
<div class="outer-container">
  <div class="box">Box</div>
  <div class="box larger">Larger Box</div>
  <div class="box">Box</div>
  <div class="box larger">Larger Box</div>
</div>

在这里,我们指定正常框“增长因子”是,较大的框是。增长因子指定弹性项相对于弹性容器中其余弹性项的增长量。13文章源自你的网络首码项目网-https://www.youranweb.com/267.html

查看弹性框教程,了解有关弹性框可以执行的操作的更多示例。文章源自你的网络首码项目网-https://www.youranweb.com/267.html

网格布局

网格的工作方式类似于flexbox,因为您声明了一个网格容器,该容器为其内容建立新的网格格式设置上下文。您可以将网格定义为一组数字或行和列,以及它们的大小等。文章源自你的网络首码项目网-https://www.youranweb.com/267.html

通过使用或定义网格容器。display:griddisplay:inline-grid文章源自你的网络首码项目网-https://www.youranweb.com/267.html

网格容器的任何直接子项都是网格项,您可以完全控制这些项的放置位置、它们跨越的行数或列数等。文章源自你的网络首码项目网-https://www.youranweb.com/267.html

下面是一个示例:文章源自你的网络首码项目网-https://www.youranweb.com/267.html

<!doctype html>
<title>Example</title>
<style>
body { 
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav article ads"
    "footer footer footer";
  grid-template-rows: 60px 1fr 60px;
  grid-template-columns: 20% 1fr 15%;
  grid-gap: 10px;
  height: 100vh;
  margin: 0;
  }
header, footer, article, nav, div {
  padding: 20px;
  background: gold;
}
#pageHeader {
  grid-area: header;
}
#pageFooter {
  grid-area: footer;
}
#mainArticle { 
  grid-area: article;      
  }
#mainNav { 
  grid-area: nav; 
  }
#siteAds { 
  grid-area: ads; 
  }
</style>
<body>
  <header id="pageHeader">Header</header>
  <article id="mainArticle">Article</article>
  <nav id="mainNav">Nav</nav>
  <div id="siteAds">Ads</div>
  <footer id="pageFooter">Footer</footer>
</body>

在这个例子中,我们使用一种“ASCII艺术”来定义一个三列的网站布局。这只是您可以使用网格布局执行的众多操作之一。我写了一个专门的CSS网格教程,更详细地介绍了网格,所以如果你认为你喜欢网格可以做什么,请查看它。文章源自你的网络首码项目网-https://www.youranweb.com/267.html 文章源自你的网络首码项目网-https://www.youranweb.com/267.html

相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网

发表评论