CSS--五种经典布局

CSS--五种经典布局

会用到 Flex 语法Grid 语法

参考链接:阮一峰--《只要一行代码,实现五种CSS经典布局》


 

一、空间居中布局

// html
<div class="container">
  <div class="item">1</div>
</div>

// CSS
.container {
  display: grid;
  place-items: center;    // 是简写: place-items:<align-items>垂直位置  <justify-items>水平位置
  
  background: lightblue;
  width: 600px;
  height: 600px; 
}
.item {
  border: 1px solid;
  border-radius: 8px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 2rem;
  color: #fff;
}

CSS--五种经典布局


 

二、并列式布局

Flex 布局比较方便,内容居中(justify-content)可换行(flex-wrap)

flex:<flex-grow> <flex-shrink> <flex-basis>

详细看:bilibili-flex 或 Flex 语法


三、两栏式布局

两栏布局就是一个边栏,一个主栏。

CSS--五种经典布局

使用 Grid 实现很容易

.container {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

四、三明治布局

三明治布局是指,页面在垂直方向上,分为:页眉,内容区,页脚

CSS--五种经典布局

.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

上面代码写在容器上面,指定采用 Grid 布局。核心代码是grid-template-rows那一行,指定垂直高度怎么划分,这里是从上到下分成三部分。第一部分(页眉)和第三部分(页脚)的高度都为auto,即本来的内容高度;第二部分(内容区)的高度为1fr,即剩余的所有高度,这可以保证页脚始终在容器的底部。


五、圣杯布局

 

CSS--五种经典布局

上一篇:YoloV3学习笔记(六)—— YoloV3-tiny


下一篇:HTTP走私