记录开发常用的div布局，圣杯布局，三角形，箭头等div的水平垂直居中；多个div垂直居中放置，并且从左往右排列，一行放

开发过程中经常会用到的div布局，总结记录一下，方便查阅和巩固。

1、div的水平垂直居中

html代码

<div class="parent"> 
    <div class="child"></div>
</div>

方式一：flex

div.parent { 
    display: flex; 
    justify-content: center;
    align-items: center; 
}

方法二：absolute

div.parent { 
    position: relative;
}

/* 下方是child的三种css设置，根据条件选其一即可 */
/* 不知道child宽高的时候，可以结合transform */
div.child { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}
/* 知道child宽高的时候 */
div.child { 
    width: 50px; 
    height: 10px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -25px; 
    margin-top: -5px;
}
/* 知道child宽高的时候 */
div.child { 
    width: 50px; 
    height: 10px; 
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
}

方式三：grid布局

（1）单元格里面的内容水平垂直居中(align-items与align-self效果一样)

div.parent { 
    display: grid; 
}
// 子元素居中方法之一
div.child { 
    justify-self: center;
    align-self: center;
}

// 子元素居中方法之二
div.child { 
    align-items:center;
    justify-items:center;
}

// 子元素居中方法之三, place-items: <align-items> <justify-items>;
div.child { 
    place-items: center
}

举个离子🌰：

html代码

 <section class="parent1">
    <div class="child1">1</div>
    <div class="child1">2</div>
    <div class="child1">3</div>
    <div class="child1">4</div>
    <div class="child1">5</div>
    <div class="child1">6</div>
    <div class="child1">7</div>
    <div class="child1">8</div>
    <div class="child1">9</div>
</section>

css代码

.parent1 {
    display: grid;
    place-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px 100px;

    border: 1px solid aquamarine;
}

.child1 {
    padding: 20px;
    border: 1px solid rgb(240, 72, 72);
}

运行效果图：

截屏2022-03-04 上午9.37.36.png

（2）整体内容水平垂直居中

HTML代码

<section class="parent1">
    <div class="child1">水平垂直居中</div>
</section>

css代码

.parent1 { 
    width:200px;
    height:200px;
    display: grid; 
    place-content:center;
    border: 1px solid aquamarine;
}
.child1{
    padding: 20px;
    border: 1px solid rgb(240, 72, 72);
}

运行效果图：

截屏2022-03-04 上午9.07.42.png

2、在父容器中居中展示多个div，每个div之间间距一样，每一行div都是从左向右排列，在缩小浏览器的窗口的同时，这些div也可以做到自适应

html代码

<section class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</section>

css代码

.parent {
    display: grid;
    grid-gap: 1rem;
    margin:10px;//设置父容器的外边距
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.child {
    // width: 120px;这里不设置child的宽度，这样是可以做到改变浏览器的宽度时，每个child的宽度也可以做到自适应
    height: 150px;
    background-color: aqua;
}

请看运行结果，大家可以自己手动改变一下浏览器窗口的大小

运行效果图：

截屏2022-03-03 下午5.03.35.png

在这里学习一下：

1. grid-gap

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。

grid-gap: <grid-row-gap> <grid-column-gap>;

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。 2. grid-template-columns

grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

（1）repeat()

三行三列的网格，列宽和行高都是100px。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。上面的代码用repeat()改写如下。

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
}

repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。

（2）auto-fill 关键字

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
}

（3）fr 关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

// 第一列的宽度为150像素，第二列的宽度是第三列的一半。
.container {
 display: grid;
 grid-template-columns: 150px 1fr 2fr;
}

（4）minmax()

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

上面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

（5）auto 关键字

auto关键字表示由浏览器自己决定长度。


grid-template-columns: 100px auto 100px;

上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

在这里我们可以学习一下阮一峰的grid布局

3、卡片的弹性布局

html 代码

 <section class="card-list">
        <div class="card">
            <h1>Card 1</h1>
            <p>This is the first card.</p>
            <div class="img-space"></div>
        </div>
        <div class="card">
            <h1>Title - Card 2</h1>
            <p>This is the second card,Let's see how it is adaptive.</p>
            <div class="img-space"></div>
        </div>
        <div class="card">
            <h1>Title - Card 3</h1>
            <p>This is the third card. For the convenience of development, I record the relevant code here!</p>
            <div class="img-space"></div>
        </div>
    </section>

css 代码

.card-list {
    display: grid;
    grid-gap: 1rem;
    margin: 20px;
    grid-template-columns: repeat(3, 1fr);
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: lightpink;
    padding: 1rem;
}

h1 {
    font-size: 1.5rem;
}

.img-space {
    height: 100px;
    width: 100%;
    background:white;
    margin: 0.5rem 0;
}

运行结果，大家可以手动调节浏览器窗口的大小

运行效果图：

截屏2022-03-03 下午5.01.14.png

3、圣杯布局

圣杯布局的要求：

header和footer各自占领屏幕所有宽度，高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。

方式一：采用grid布局来实现

HTML代码

<section class="grail-layout">
    <header>
        <h1>Header</h1>
    </header>
    <div class="left-sidebar">Left Sidebar</div>
    <main> Main Content</main>
    <div class="right-sidebar">Right Sidebar</div>
    <footer >Footer Content</footer>
</section>

css代码

.grail-layout{
    display: grid;
    grid-template: 100px 1fr 80px/120px 1fr 100px;
}
header{
    background-color: rgb(236, 98, 213);
    grid-column: 1/4;
}
h1,main,footer,.left-sidebar,.right-sidebar{
    padding: 20px;
}
main,.left-sidebar,.right-sidebar{
    height: auto;
    min-height: 200px;
}
footer{
    grid-column: 1/4;
    text-align: center;
    background-color: rgb(228, 194, 44);
}
.left-sidebar{
    width: 120px;
    grid-column: 1/2;
    background-color: rgb(44, 170, 228);
}
main{
    grid-column: 2/3;
    background-color: rgb(228, 44, 69);
}
.right-sidebar{
    width: 100px;
    grid-column: 3/4;
    background-color: rgb(44, 170, 228);
}

运行结果，大家可以手动调节浏览器窗口的大小

运行效果图：

截屏2022-03-04 上午8.38.20.png

在这里学习一下：

1. grid-column

设置 "item1" 在第 1 列开始，在第 5 列前结束：

.item1 { grid-column: 1 / 5; }

2. grid-template

grid-template是以下属性的简写形式：

grid-template-rows
grid-template-columns
grid-template-areas 语法

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;

grid-template: 100px 1fr 80px/120px 1fr 100px;相当于是

grid-template-rows: 100px 1fr 80px,此时header的行高是100px，footer的行高是80px，剩余的就是中间的。
grid-template-columns: 120px 1fr 100px;左栏是120px，右侧栏是100px，剩余的就是中间的。
grid-template-areas: none;

方式二：用单纯的css实现

4、css实现一个正三角形

参考文章

三角形

<div id="d1"></div>

style：
    #d1{
        width:0; 
        height:0;
        border-width:50px;
        border-style:solid;
        border-color:red  blue  black  yellow;　
                      上　　右　　　下　　　左
}

从上面这个我们发现，其实这个宽高为0的div的每一条边框都是一个三角形，实际操作中我们可能只需要一个三角形，那我们只要把不需要的border隐藏就可以了（用transparent属性）：

比如我要一个向下的三角形：

向下的三角形

<div id="d1"></div>

// 对应style：
#d1{
    width:0; 
    height:0;
    border-width:50px;
    border-style:solid;
    border-color:red transparent transparent transparent;
                 上　　　右　　　　　　下　　　　　　左
}

圆角的三角形

<div id="d1"></div>
// 对应style：
#d1{
    width:0; 
    height:0;
    border-width:50px;
    border-style:solid;
    border-top-left-radius: 15px;
    opacity: 0.569;//加了透明度
    border-color:red transparent transparent red;
}

三角形学习的文章

5、用css实现箭头样式

html

<div class="arrow"></div>

css

.arrow{
    width: 12px;
    height: 12px;
    position: absolute;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    transform: rotate(-135deg);
}

展示效果：

6、椭圆

html

 <div class="ellipse"></div>

css

.ellipse{
    width: 12px;
    height: 12px;
    background: brown;
    transform: scale(2.5, 1.5);
    border-radius: 50%;
}

实现效果：

transform 中一些常见的属性

移动 translate(水平值，竖直值) 水平值>0 水平向右移动竖直值>0 竖直向下移动
旋转 rotate(度数) 度数小于0 逆时针旋转度数小于0 顺时针旋转
缩小 scale(伸缩度) 伸缩度大于1 放大; 伸缩度小于1 缩小; 伸缩度为0消失; -1< 伸缩度 <0 反向缩小 ; 伸缩度<-1 反向放大;