CSS布局与Flexbox、Grid详解-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_52126875/article/details/126190440

一、CSS布局的概述

Layout布局是什么？

确定内容的大小和位置的算法
根据元素、容器、兄弟节点和内容等元素来计算

![在这里插入图片描述](https://img-blog.csdnimg.cn/a044ad1505094c578ebf0a0db398aff6.png) 1.常规流

根元素、浮动和绝对定位的元素不在常规流里面
常规流里面的元素都有一定的排版规则
- 行级、块级排版上下文
- Grid排版上下文
- Flex排版上下文
- Table排版上下文

二、Flexible Box

flexible:

可以设置子项的弹性：当容器有剩余空间时，会伸展；当容器空间不够时，会收缩；
flex-grow:有剩余空间时的伸展能力
flex-shrink:容器空间不足时的收缩能力
flex-basis:没有伸展或收缩时的基础长度

display:flex使元素生成一个块级的Flex容器
display:line-flex使元素生成一个行级的Flex容器
可以使用flex-direction控制元素的摆放
flex-direction:
row(默认)从左到右摆放
row-reverse从右向左
column从上到下
column-reverse从下到上

flex-wrap:表示是否允许排版里面的元素换行
nowrap:不允许换行
wrap:允许换行

在这里插入图片描述
justify-content:控制主轴元素对齐方式
flex-start:左对齐
flex-end:右对齐
center:居中
space-between：在元素中间加上空白
space-around：在元素中间和两边加上空白（当两边空白小于中间）
space-evenly：同上，但是两边和中间空白相等。

align-item:在侧轴方向对齐
flex-start:上对齐
flex-end：下对齐
center：居中对齐
stretch:将每个容器都拉伸到上级容器这么高
baseline：基线对齐

align-self:让其中的某个元素设置不一样的对齐方式

order:按顺序排放，默认值为0是最优先的。
eg:

<header>
 <h1 class="logo">My Blog</h1>
 <nav>
   <a href="#">Home</a>
   <a href="#">Posts</a>
   <a href="#">About</a>
 </nav>
</header>

<div class="wrapper">
  <main>
    <article>
      <h2>My blog title</h2>
      <p>Some content in paragraph 1</p>
      <p>Some content in paragraph 2</p>
      <p>Some content in paragraph 3</p>
    </article>
  </main>

  <aside>
    <h3>Hot topics</h3>
    <ul>
        <li><a href="#">Topic 1</a></li>
        <li><a href="#">Topic 2</a></li>
    </ul>
  </aside>
</div>

<footer>
    Copyrigths &copy; 2018
</footer>>

<style>
    hearder {
        display: flex;
        align-items: content;
        background: coral;
    }

    nav {
        flex-grow: 1;
        text-align: rigth;
    }

    .wrapper {
        display: flex;
    }

    main {
        flex-grow: 1;
        order: 1;
        background: lightblue;
    }

    aside {
        width: 180px;
        background: lightgreen;
    }

    footer {
        text-align: center;
        background: gray;
    }

</style>

结果显示如下：
在这里插入图片描述

三、Grid布局

在这里插入图片描述

display:grid使元素生成一个块级的Grid容器
使用grid-template相关属性将容器划分为网格
设置容器中的元素占据哪些行和列

1.网格划分

grid-template-rows:100px,100px
grid-template-columns: 100px,200px,100px

表示将容器划分为两行三列
在这里插入图片描述

.a {
 grid-row-start:1;
 grid-row-end:3;
 grid-column-start:1;
 grid-column-end:3;
}

/*或者*/
.a {
 grid-area:1/1/3/3;
}

.a{
 grid-template-columns:
 [left] 100px [center] 200px [rigth];##表示占据两列，共有三条线，没列的宽度为100px、200px
 grid-template-rows:
 [top]100px [middle] 200px [bottom];
}

表示a占据容器的两行两列
注意！！如果没有指定时，一个元素占据一个网格。

grid-gap:设置网格之间的间距

grid-gap,grid-row-gap,grid-column-gap.

四、表格样式

1.表格table长宽设置：

table th{
 width:100px;
}

table th,td {
 width:100px;
}

2.table边框设置：

table{
border: 1px solid red;/*像素为1，粗线红色边框
}

table {
border: 1px solid red;
}

td,th {
border: 1px solid red;/*表示给每个表格设置边框*/
}

table {
 border: 1px solid red;
 border-collapse: collapse;/*表示当有多个边框堆叠时，合并边框*/
}

在这里插入图片描述