5. 布局方式 - 《玩转CSS的艺术之美》

布局
- 浮动布局
  - 清除浮动
全屏布局
多列布局
- 两列布局
- 三列布局
圣杯布局
均分布局
居中布局
- 水平居中
- 垂直居中
文字布局
- 文字环绕
- 文字溢出**

布局

普通布局：display:block/inline
浮动布局：float:left/right
定位布局：position:relative/absolute/fixed、left/right/top/bottom/z-index
表格布局：table系列属性
弹性布局：display:flex/inline-flex、flex系列属性
多列布局：column系列属性
格栅布局：display:grid/inline-grid、grid系列属性
响应式布局：em/rem/vw/vh/vmin/vmax、媒体查询

浮动布局

清除浮动

利用 clear 样式，在父元素标签结束之前插入块级元素

clear CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。
```
.clearfix::after {
 display: block;
 visibility: hidden;
 clear: both;
 height: 0;
 font-size: 0;
 content: "";
}
```
为父元素添加 overflow 属性（其他方式形成 BFC 也可清除浮动）

当为父元素添加 overflow 属性时，该元素会构建一个 BFC 。
BFC在计算高度的时候，内部浮动元素的高度也要计算在内。

全屏布局

经典的全屏布局由顶部、底部、主体三部分组成，其特点为三部分左右满屏拉伸、顶部底部高度固定和主体高度自适应，主要应用在主体布局。
该布局很常见，也是大部分Web应用主体的主流布局。
通常使用<header>、<footer>和<main>三个标签语义化排版，<main>内还可插入<aside>作为侧栏。

<div class="fullscreen-layout">
    <header></header>
    <main></main>
    <footer></footer>
</div>

:::info position + left/right/top/bottom :::

顶部、底部和主体声明left:0和right:0将其左右部分满屏拉伸；顶部和底部声明top:0和bottom:0分别将其吸顶和吸底，并声明俩高度为固定值；将主体的top和bottom分别声明为顶部高度和底部高度。

.fullscreen-layout {
    position: relative;
    width: 400px;
    height: 400px;
    header,
    footer,
    main {
        position: absolute;
        left: 0;
        right: 0;
    }
    header {
        top: 0;
        height: 50px;
        background-color: #f66;
    }
    footer {
        bottom: 0;
        height: 50px;
        background-color: #66f;
    }
    main {
        top: 50px;
        bottom: 50px;
        background-color: #3c9;
    }
}

:::info Flex :::

使用flex实现会更简洁。display:flex默认会令子节点横向排列，需声明flex-direction:column改变子节点排列方向为纵向排列；顶部和底部高度固定，所以主体声明flex:1让高度自适应即可。

.fullscreen-layout {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 400px;
    header {
        height: 50px;
        background-color: #f66;
    }
    footer {
        height: 50px;
        background-color: #66f;
    }
    main {
        flex: 1;
        background-color: #3c9;
    }

多列布局

两列布局

经典的两列布局由左右两列组成，其特点为一列宽度固定、另一列宽度自适应和两列高度固定且相等。
以下以左列宽度固定和右列宽度自适应为例，反之同理。

<div class="two-column-layout">
    <div class="left"></div>
    <div class="right"></div>
</div>

:::info float + margin-left / right ::: 左列声明float:left和固定宽度，由于float使节点脱流，右列需声明margin-left为左列宽度，以保证两列不会重叠。

.two-column-layout {
    width: 400px;
    height: 400px;
    .left {
        float: left;
        width: 100px;
        height: 100%;
        background-color: #f66;
    }
    .right {
        margin-left: 100px;
        height: 100%;
        background-color: #66f;
    }
}

:::info overflow + float :::

左列声明同上，右列声明overflow:hidden使其形成BFC区域与外界隔离，详情可见 盒模型。

.two-column-layout {
    width: 400px;
    height: 400px;
    .left {
        float: left;
        width: 100px;
        height: 100%;
        background-color: #f66;
    }
    .right {
        overflow: hidden;
        height: 100%;
        background-color: #66f;
    }
}

:::info flex ::: 左列声明固定宽度，右列声明flex:1自适应宽度。

.two-column-layout {
    display: flex;
    width: 400px;
    height: 400px;
    .left {
        width: 100px;
        background-color: #f66;
    }
    .right {
        flex: 1;
        background-color: #66f;
    }
}

点击查看【codepen】

三列布局

经典的三列布局由左中右三列组成，其特点为连续两列宽度固定、剩余一列宽度自适应和三列高度固定且相等。
以下以左中列宽度固定和右列宽度自适应为例，反之同理。

<div class="three-column-layout">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

:::info overflow + float :::

.three-column-layout {
    width: 400px;
    height: 400px;
    .left {
        float: left;
        width: 50px;
        height: 100%;
        background-color: #f66;
    }
    .center {
        float: left;
        width: 100px;
        height: 100%;
        background-color: #66f;
    }
    .right {
        overflow: hidden;
        height: 100%;
        background-color: #3c9;
    }
}

:::info flex :::

.three-column-layout {
    display: flex;
    width: 400px;
    height: 400px;
    .left {
        width: 50px;
        background-color: #f66;
    }
    .center {
        width: 100px;
        background-color: #66f;
    }
    .right {
        flex: 1;
        background-color: #3c9;
    }
}

圣杯布局

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

<div class="header"></div>
<div class="container">
    <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</div>
<div class="footer"></div>

:::info float + margin-left/right + padding-left/right ::: 由于浮动节点在位置上不能高于前面或平级的非浮动节点，否则会导致浮动节点下沉。因此在编写HTML结构时，将中间列节点挪到右列节点后面。

.header, .footer{
  height: 100px;
}
.header{
  background: red;
}
.footer{
  background: green;
}
.container{
  height: calc(100vh - 200px);
  padding: 0 100px;
  .left{
    height: 100%;
    width: 100px;
    float: left;
    background: blue;
    margin-left: -100px;
  }
  .center{
    height: 100%;
    background: gray;
  }
  .right{
    height: 100%;
    width: 100px;
    float: right;
    background: blue;
    margin-right: -100px;
  }
}

:::info float + margin-left/right :::

.container {
    width: 400px;
    height: 400px;
    .left {
        float: left;
        width: 100px;
        height: 100%;
        background-color: #f66;
    }
    .right {
        float: right;
        width: 100px;
        height: 100%;
        background-color: #66f;
    }
    .center {
        margin: 0 100px;
        height: 100%;
        background-color: #3c9;
    }
}

:::info flex :::

<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

.container {
    display: flex;
    width: 400px;
    height: 400px;
    .left {
        width: 100px;
        background-color: #f66;
    }
    .center {
        flex: 1;
        background-color: #3c9;
    }
    .right {
        width: 100px;
        background-color: #66f;
    }
}

点击查看【codepen】

均分布局

经典的均分布局由多列组成，其特点为每列宽度相等和每列高度固定且相等。
总体来说，也是最简单的经典布局，由于每列宽度相等，所以很容易找到合适的方式处理。

<div class="average-layout">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</div>

.one {
    background-color: #f66;
}
.two {
    background-color: #66f;
}
.three {
    background-color: #f90;
}
.four {
    background-color: #09f;
}

:::info float + width ::: 每列宽度声明为相等的百分比，若有4列则声明width:25%。width:calc(100% / n)

.average-layout {
    width: 400px;
    height: 400px;
    div {
        float: left;
        width: 25%;
        height: 100%;
    }
}

:::info column ::: 使用column实现会令CSS代码语义化更明确。column相关属性是为列排版应运而生的，相对flex相关属性来说更易懂易学。

.average-layout {
    column-count: 4;
    column-gap: 0;
    width: 400px;
    height: 400px;
    div {
        height: 100%;
    }
}

:::info flex ::: 使用flex实现会更简洁。
节点声明display:flex后，生成的FFC容器里所有子节点的高度都相等，因为容器的align-items默认为stretch，所有子节点将占满整个容器的高度。每列声明flex:1自适应宽度。

.average-layout {
    display: flex;
    width: 400px;
    height: 400px;
    div {
        flex: 1;
    }
}

居中布局

水平居中

margin:0 auto + width:fit-content：全部元素
块级元素 + margin:0 auto + width：块级元素
- 若节点不是块级元素需声明display:block
- 若节点宽度已隐式声明则无需显式声明width
行内元素 + text-aligin:center：行内元素
- 父节点上声明text-align
- 若节点不是行内元素需声明display:inline/inline-block
position + left/right + margin-left/right + width：全部元素
position + left/right + transform:translateX(-50%)：全部元素
display:flex + justify-content:center：全部元素
- 父节点上声明display和justify-content

垂直居中

块级元素 + padding-top/bottom：块级元素
- 父节点高度未声明或自适应
- 若节点不是块级元素需声明display:block
行内元素 + line-height：行内元素
- 父节点上声明line-height
- 若节点不是行内元素需声明display:inline/inline-block
display:table + display:table-cell + vertical-align:middle：全部元素
- 父节点上声明display:table
display:table-cell + vertical-align:middle：全部元素
- 父节点上声明display和vertical-align
position + top/bottom + margin-top/bottom + height：全部元素
position + top/bottom + transform:translateY(-50%)：全部元素
display:flex + align-items:center：全部元素
- 父节点上声明display和align-items
display:flex + margin:auto 0：全部元素
- 父节点上声明display

:::info display:inline-block :::

display: inline-block;
vertical-align: middle;

:::info display:table-cell :::

 display: table-cell;
vertical-align: middle;
div {
  margin: 0 auto;
}

:::info position ::: 该方式也是最传统最稳定的水平垂直居中布局了，唯二的缺点就是声明属性稍多和必须已知宽高。要点是使用margin负值将节点拉回最中间，所以必须已知宽高才能计算margin负值，通常是margin-left和margin-top，可连写成margin:-(height/2) 0 0 -(width/2)。

position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;

不可知高宽时

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

:::info flex :::

display: flex;
justify-content: center;
align-items: center;
// 或者
display: flex;
div {
  margin: auto;
}

文字布局

文字环绕

利用float使节点脱流的原理实现

<div class="text-wrapping">
    <img src="https://static.yangzw.vip/codepen/thor.jpg">
    XXXXX......(很多个X)
</div>

.text-wrapping {
    overflow: hidden;
    width: 400px;
    height: 300px;
    font-size: 20px;
    color: #f66;
    word-break: break-all;
    img {
        float: left;
        margin: 10px;
        height: 200px;
    }
}

文字溢出**

:::info 单行文字溢出overflow + text-overflow :::

.s-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:::info 多行文字溢出 webkit-box + overflow + text-overflow :::

.m-ellipsis {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}