[查缺补漏] 熟悉HTML页面架构和常用布局

原创

程序员海军

修改于 2021-06-30 11:29:17

1.6K0

修改于 2021-06-30 11:29:17

前言

最近在准备整理基础，准备年后跳槽，找个好一点的东家。? 记录学习整理的过程，希望能帮到年后跳槽的你，让我们一起来巩固基础吧。undefined目前在一家国企单位，朝九晚五的生活让我感到舒适，有大量的时间，做自己喜欢的事。时间久了，我感到了焦虑，由于公司是非互联网，开发也是根据自己已知技术去开发，技术成长很慢，技术氛围没那么强，想突破一下自己，是该逃离舒适区了。本章主要是回顾Flex使用和一些常用布局的写法。

熟悉HTML页面架构和常用布局

Flex

Flex 概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。注意：任何一个容器都可以指定为 Flex 行内元素也可以指定为 Flex 布局， display: inline-flex; Webkit 内核的浏览器，必须加上-webkit前缀。 display: -webkit-flex; / Safari /

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器属性

作用于父容器的属性

属性	功能描述
`flex-direction`	属性决定主轴的方向（即项目的排列方向）。
`flex-wrap`	默认情况下，项目都排在一条线（又称"轴线"）上。`flex-wrap`属性定义，如果一条轴线排不下，如何换行
`justify-content`	决定了子元素在主轴的对齐方式。
`align-items`	决定了子元素在交叉轴(竖轴）的对齐方式
`align-content`	决定了多条轴线的对齐方式。

`flex-direction`

该属性决定了主轴以什么方向排列row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。

flex-direction: column; 
```![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/046396abfabb4887a1553e32dce271e7~tplv-k3u1fbpfcp-zoom-1.image)```

flex-direction:row-reverse

`flex-wrap`

该属性决定了元素是否在一条轴线上，通过指定它的属性可以子元素换行。nowrap :默认，不换行。 wrap: 让子元素在一条线上有序的排列着，当一条线排不下的时候，会换行。 wrap-reverse: wrap 的反转。

flex-wrap: wrap; 
```![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d178899cfa6240f28ec7240a4a62a4a6~tplv-k3u1fbpfcp-zoom-1.image)```

flex-wrap: wrap-reverse;

justify-content: center;

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/39599ce934c141d798e92c2e803fbe4e~tplv-k3u1fbpfcp-zoom-1.image) justify-content: flex-end; ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a3dab13017e452c9a8a085f3ebce6f9~tplv-k3u1fbpfcp-zoom-1.image)

justify-content: space-between;

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f1da2e71e4f8459dbefd364ca2444ca7~tplv-k3u1fbpfcp-zoom-1.image) justify-content: space-around; ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8a5e16a1503a492b922e445c2f5c3da8~tplv-k3u1fbpfcp-zoom-1.image)

justify-content: space-evenly;

align-items: flex-end;

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a08ae956aa14c7b92f1fcd85311247d~tplv-k3u1fbpfcp-zoom-1.image) align-items: center; ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7828a782fed94faba71d319b323159b5~tplv-k3u1fbpfcp-zoom-1.image)

align-items: baseline;

`align-content`

该元素定义了多条轴的对齐方式，当只有一根轴时，不起作用。属性：flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。

align-content: flex-start; 
```![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f375fa0133c9448491811f5745221098~tplv-k3u1fbpfcp-zoom-1.image)```

align-content: flex-end;

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3812bf4fcd564ed5b9026e54409e1f20~tplv-k3u1fbpfcp-zoom-1.image) align-content: center; ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3c24d2f9ee37464583894c09beabeb86~tplv-k3u1fbpfcp-zoom-1.image)

align-content: space-between;

作用于子元素的属性

属性	属性描述
`order`	可以将子元素按大小排序，值越小，排名越靠前。
`flex-grow`	可以将子元素按一定比例排列，如果子元素值都一样，那么子元素会等比例排列。
`flex-shrink`	如果空间不足时，可以使用它将子元素按比例缩小
`flex-basis`	它决定在主轴分配空间之前，项目占主轴的大小。浏览器会根据剩余的空间来，计算它的大小。
`flex-self`	它可以指定某个元素和其它元素的排列方式不同。

`order`

父容器为 flex. 时，子元素可以通过 order 达到排序的功能，数值越小，排列最前面。

 <div class="main">
        <div class="son1">
            
        </div>
        <div class="son2">
            
        </div>
        <div class="son3">
            
        </div>
    </div>

<style> .main{
    width: 400px;
    height: 300px;
    border-radius: 15px;
    display: flex;
    justify-items: center;
    align-items: center;
    background: lightseagreen;
    margin: auto;
    margin-top: 200px;
}
.son1{
    width: 80px;
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    order: 1;
    background: coral;
}
.son2{
    width: 80px;
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    order: 0.2;
    background: darkcyan;
}
.son3{
    width: 80px;
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    order: 3;
    background: gold;
} </style> 
```![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ae86beb0fc624390beaa12b937bf12a9~tplv-k3u1fbpfcp-zoom-1.image)

`flex-grow`

该属性用来指定子元素在父容器中按比例指定大小，如果每一项都指定比例相同的话，那么元素会平分排列布局。

 <div class="main">
        <div class="son1">
            
        </div>
        <div class="son2">
            
        </div>
        <div class="son3">
            
        </div>
    </div>

<style> .main{

width: 400px;

height: 300px;

border-radius: 15px;

display: flex;

justify-items: center;

align-items: center;

background: lightseagreen;

margin: auto;

margin-top: 200px;

}

.son1{

height: 100px;

border-radius: 15px;

margin: 10px;

flex-grow: 2;

background: coral;

}

.son2{

height: 100px;

border-radius: 15px;

margin: 10px;

flex-grow: 2;

background: darkcyan;

}

.son3{

height: 100px;

border-radius: 15px;

margin: 10px;

flex-grow: 2;

background: gold;

} </style>

<style> .main{

width: 400px;

height: 300px;

border-radius: 15px;

display: flex;

justify-items: center;

align-items: center;

background: lightseagreen;

margin: auto;

margin-top: 200px;

}

.son1{

width: 200px;

height: 100px;

border-radius: 15px;

margin: 10px;

/* 缩小5 的比例 */

flex-shrink: 5;

background: coral;

}

.son2{

width: 160px;

height: 100px;

border-radius: 15px;

margin: 10px;

background: darkcyan;

}

.son3{

width: 160px;

height: 100px;

border-radius: 15px;

margin: 10px;

background: gold;

} </style>

.son1{

/* 指定了宽度没有作用， flex-basis 决定了占据主轴多少宽度，

浏览器会根据剩余宽度来计算主轴还有多少宽度 */

width: 300px;

height: 100px;

border-radius: 15px;

margin: 10px;

flex-basis: 100px;

background: coral;

}

.son2{

width: 160px;

height: 100px;

border-radius: 15px;

margin: 10px;

background: darkcyan;

}

.son3{

height: 100px;

border-radius: 15px;

margin: 10px;

flex-basis: 100px;

background: gold;

}

.son3{

border-radius: 15px;

margin: 10px;

flex-basis: 100px;

background: gold;

align-self: stretch;

}

    <header>导航</header>

    <main>主体内容</main>

    <footer>底部</footer>

</div>

*{
    margin: 0;
    padding: 0;
}
.full{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
header{
    height: 60px;
    font-weight: 900;
    color: white;
    text-align: center;
    background: darkcyan;
}
main{
    flex: 1;
    align-items: center;
    font-weight: 900;
    color: white;
    text-align: center;
    background:orange;
}
footer{
    height: 60px;
    font-weight: 900;
    color: white;
    text-align: center;
    background: rgb(48, 40, 163);
} 
```![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a9dc159bfcb4ad7985d24341b13f21d~tplv-k3u1fbpfcp-zoom-1.image)

两列布局

最经典的系统管理布局 两列布局 . 它主要由是 两列都固定高度 ， 左端指定宽度,右端通过flex:1 来达到自适应宽度 。

 <div class="full">
        <div class="left">

        </div>
        <div class="right">

        </div>
    </div>

margin: 0;

padding: 0;

}

.full{

width: 100%;

height: 100vh;

display: flex;

flex-wrap: wrap;

}

.left{

width: 200px;

height: 100vh;

background: rgb(0, 140, 255);

}

.right{

flex:1;

height: 100vh;

background: rgb(158, 159, 160);

}

    <div class="left">

    </div>

    <div class="right">

        <div class="right-head">

        </div>

        <div class="right-main">

        </div>

    </div>

</div>

*{
    margin: 0;
    padding: 0;
}
.full{
    width: 100%;
    height: 100vh;
    display: flex;
    /* flex-wrap: wrap; */
}
.left{
    width: 200px;
    height: 100vh;
    background: rgb(0, 140, 255);
}
.right{
    height: 100vh;
    display: flex;
    flex:1;
    flex-direction: column;
    background: rgb(158, 159, 160); 
}
.right-head{
    height: 80px;
    background: cornflowerblue;
}
.right-main{
    flex: 1;
    background: orange;
} 
```![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e9cca117198743b0a3c9f20b7142831e~tplv-k3u1fbpfcp-zoom-1.image)

居中布局

居中布局在我们日常写页面时经常用到，场景也比较多，eg： 登陆 , 弹窗Dialog .这里我使用 flex 来实现居中布局，flex 实现起来更简洁，这里就不讨论其它实现方法了。如何进行布局通过给父容器的宽度和高度都 100% ，铺满整个屏幕，父容器 display 为 flex, 使用 justify-content: center; 决定子元素在主轴的方向上怎么显示，在通过 align-items: center; 来决定子元素在交叉轴(竖轴)如何显示。子容器只要指定 width 和 ·height 即可。

 <div class="full">
        <div class="login">
            登陆
        </div>
    </div>

margin: 0;

padding: 0;

}

.full{

width: 100%;

height: 100vh;

background: rgb(0, 110, 255);

display: flex;

justify-content: center;

align-items: center;

}

.login{

width: 500px;

height: 400px;

line-height: 400px;

text-align: center;

border-radius: 15px;

background: rgb(70, 25, 129);

color: white;

font-size: 33px;

font-weight: 900;

}

<div class="waterFall">

  <div class="item">

    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1737312773,3182446833&fm=26&gp=0.jpg"

      alt="">

    <p>First</p>

  </div>

  <div class="item">

    <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1875486819,805819368&fm=26&gp=0.jpg" alt="">

    <p>First</p>

  </div>

  <div class="item">

    <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=35353288,1650949252&fm=26&gp=0.jpg" alt="">

    <p>First</p>

  </div>

  <div class="item">

    <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1474216128,3433531408&fm=26&gp=0.jpg"

      alt="">

    <p>First</p>

  </div>

  <div class="item">

    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=143483417,2871731501&fm=26&gp=0.jpg" alt="">

    <p>First</p>

  </div>

  <div class="item">

    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1098989386,3642257866&fm=26&gp=0.jpg"

      alt="">

    <p>First</p>

  </div>

  <div class="item">

    <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1040129980,3013621150&fm=26&gp=0.jpg"

      alt="">

    <p>First</p>

  </div>

</div>

</div>

 .container {
      width: 80%;
      margin: 0 auto;
    }

    .waterFall {
      /* 页面分几列显示 */
      column-count: 4;
      -webkit-column-count: 4;
      /* Firfox */
      -moz-column-count: 4;
      /*  */
      /* 列之间的间距 */
      column-gap: 1em;
      -webkit-column-gap: 1em;
      -moz-column-gap: 1em;
    }

    .item {
      padding: 1em;
      margin: 0 0 1em 0;
      border: 1px solid orange;
    }

    .item img {
      width: 100%;
      margin-bottom: 10px;
    } 
```![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c88c2be658d478e91dcd25a7a79324b~tplv-k3u1fbpfcp-zoom-1.image)

总结

本文主要是HTML布局进行查缺补漏复习，下一章将进行BOM的补充。祝愿大家都能找到一份好的工作！

本文转自 https://juejin.cn/post/6916520085217607693，如有侵权，请联系删除。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html5

css

javascript

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html5

css

javascript