可食用的「css布局干货」,纯Html示例，可调试 | 水平、垂直、多列

时间 2020-05-30

标签可食用的 css 布局干货 html 示例调试水平垂直多列栏目 CSS 繁體版

原文原文链接

大家都不看的总集篇：从零开始的大前端筑基之旅(深刻浅出，持续更新～)
以为不错就顺手点个赞吧css

本篇文章仅整理经常使用的水平居中、垂直居中及多列等布局，不求所有涉及，只考虑经常使用而且能够顺手拿来使用。如有其余精妙的方案，欢迎在评论中指出，我会及时补充至文档内。html

本文中全部示例均为 html 渲染构成，没有图片及外链demo，因此能够直接选中示例在控制台调试，推荐本身动手试试文章中列举的小提示，有助于加深理解。前端

最后，1个赞顶100阅读量，告诉我你曾来过、看过，并在这里不枉此行吧！！ wordpress

水平居中

text-align: center;

适用于行内内容(文字、行内元素、行内块级元素)布局

<div class="container">
  this is inner text
  <div classs="ele1">
    this is a block element
  </div>
  <div classs="ele2">
      this is another block element
  </div>
</div>
复制代码

.container{
  width: 300px;
  border: 1px solid grey;
  text-align: center;
}
.ele2{
  border: 1px solid grey;
  width: 200px;
}
复制代码

this is inner text

this is a block element

this is another block element

属性会被继承，影响到后代元素行内内容；post

ele1的块级元素显示文字居中是由于其宽度默认100%，与container一致，

Ele2内部文字居中是由于继承了container的属性，若想要ele2自己居中，设置 display: inline-block 转为行内块或设置 margin: 0 auto

若是子元素宽度大于父元素宽度则无效flex

margin: 0 auto;

要求目标元素宽度固定，而且与父元素左右margin有空余。网站

适用于父元素内有多个块级元素上下排列的状况this

<div class="container">
  this is inner text
  <div classs="ele2">
      this is another block element
  </div>
</div>
复制代码

.container{
  width: 300px;
  border: 1px solid grey;
  text-align: center;
}
.ele2{
  border: 1px solid grey;
  width: 200px;
  margin:0 auto;
}
复制代码

this is inner text

this is another block element

若是上下的margin设置了auto，其计算值为0spa

绝对定位

绝对定位会致使元素不在文档流中，须要处理父元素的高度，防止高度塌陷

top、right、bottom、left的值是相对于父元素尺寸的，

absolute + transform

transform设置百分比参数是相对于自身尺寸的

<div class="container">
   this is inner text
  <div class="ele1">
    this is a block element
  </div>
</div>
复制代码

.container{
    height: 100px;
    width: 200px;
    position: relative;
    border: 1px solid grey;
  	text-align: center;
}
.ele1{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);  
    width: 100px; // 此处能够不设置，默认为父元素一半宽度
    border: 1px solid #888;
}
复制代码

this is inner text

this is a block element

ele1能够不设定width的值，此时ele1的宽度会被计算为 父元素的一半 - 左右边框的宽度

absolute + margin

margin设置百分比参数是相对于父元素的，因此，此方法须要子元素固定宽度，而且值设为自身宽度的一半；

html代码同上，替换 ele1 元素样式中 transform: translateX(-50%) 为 margin-left: -50px;

.ele1{
    position: absolute;
    left: 50%;
    margin-left: -50px; // 负值，设为元素自身宽度的一半
    width: 100px; // 此处必须设置
    border: 1px solid #888;
}
复制代码

this is inner text

this is a block element

flex

flex默认水平轴为主轴，设置当前主轴对齐方式为居中

<div class="container">
  <div class="ele1">
    this is a block element
  </div>
</div>
复制代码

.container{
    height: 200px;
    width: 220px;
    display: flex;
    justify-content: center;
    border: 1px solid grey;
}
.ele1{
    width: 100px;
    height: 100px;
    border: 1px solid #888;
}
复制代码

this is a block element

ele1未设置宽高时，子元素宽度会自动适配内容的大小，高度会填满父元素

垂直居中

vertical-align

使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本内的图片
垂直对齐表格单元内容

仅用于同一行内的元素水平对齐，不用于相对父元素的垂直居中，以下面示例

<div class="container">
  <div class="ele1">this is inner text</div>
  <div class="ele">inline-block</div>
</div>
复制代码

.container{
    width: 220px;
    height: 50px;
    vertical-align: middle;
    border: 1px solid grey;
}
.ele{
   border: 1px solid grey;
   height :30px;
   display: inline-block;
}
.ele1{
  vertical-align: middle;
  display: inline-block;
}
复制代码

this is inner text

inline-block

ele1 经过设置高度撑起了一行，ele 元素设置 vertical-align: middle 来与 ele1 对齐。可是整行元素并未相对父元素对齐。

若是父元素未设置高度或高度与行内最高元素高度一致，则会表现为本行与父元素相对垂直居中。

也能够设置父元素 display: table-cell来使用 vertical-align 做用于表格对齐的特性，可是并不推荐此方法

line-height

适用于单行文本、行内元素、行内块级元素

多行文本建议使用span包裹成一个子元素

<div class="container">
    this is inner text
</div>
复制代码

.container{
    width: 220px;
    height: 50px;
    line-height: 50px;
    border: 1px solid grey;
}
复制代码

this is inner text

小贴士：

一般状况下，若是一个未设置高度的div内部有文字，div的高度就会是文字的高度，可能有人会跟认为是：文字撑开的！文字占据空间，天然将div撑开。但实际上，根本不是文字撑开了div的高度，而是line-height！

若是一个标签没有定义height属性(包括百分比高度)，那么其最终表现的高度必定是由line-height起做用

换种理解方式，若是一个有文字的div，不设置高度，并将其行高设置0，div将不会被撑开。

<div class="container">
  <div class="ele">
    this is inner text
  </div>
  <div class="ele1">
    this is inner text
  </div>
</div>
复制代码

.container{
    width: 220px;
    height:100px;
    border: 1px solid grey;
}
div{
   margin-top: 20px;
   border: 1px solid grey;
}
.ele{
 line-height:0;
}
复制代码

this is inner text

所以，对于本节最开始的栗子，去掉 container的 height属性，不会产生任何影响。能够打开控制台本身尝试一下。

绝对定位

绝对定位会致使元素不在文档流中，须要处理父元素的高度，防止高度塌陷

top、right、bottom、left的值是相对于父元素尺寸的，

absolute + transform

transform设置百分比参数是相对于自身尺寸的代码同水平居中，css替换为

top: 50%;
transform: translateY(-50%);  
复制代码

absolute + margin

同水平居中，css替换为

top: 50%;
margin-top: -50px; // 负值，设为元素自身宽度的一半
复制代码

absolute + margin: auto

前面说过，若是上下的margin设置了auto，其计算值为0。这是子元素未设置绝对定位的状况。

将子元素设置绝对定位，top、right、bottom、left都设为0

<div class="container">
  <div class="ele">
    this is block element< /div>
</div>
复制代码

.container{
    width: 200px;
    height: 120px;
    position: absolute;
    border: 1px solid grey;
}
.ele{
    width: 70px;
    height: 80px;
    border: 1px solid grey;
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
复制代码

this is block element

子元素必须定高定宽

flex

flex默认水平轴为主轴，设置当前纵轴对齐方式为居中

<div class="container">
  <div class="ele1">
    this is a block element
  </div>
</div>
复制代码

.container{
    height: 200px;
    width: 220px;
    display: flex;
    align-items: center;
    border: 1px solid grey;
}
.ele1{
    width: 100px;
    height: 100px;
    border: 1px solid #888;
}
复制代码

this is a block element

> 若ele1未设置宽高，子元素宽度与高度会自动适配内容的大小，能够直接打开控制台试试

writing-mode

定义了文本水平或垂直排布以及在块级元素中文本的行进方向。

经过writing-mode让文字的显示变为垂直方向，可使水平方向上的css属性，变为垂直方向上的属性

<div class="container">
  <div class="ele1">
   block element
  </div>
</div>
复制代码

.container{
    height: 200px;
    width: 200px;
    writing-mode: vertical-lr;
    border: 1px solid grey;
    text-align: center;
}
.ele1{
    display: inline-block;
    border: 1px solid #888;
}
复制代码

block element

水平垂直居中

这个就不用讲了吧

多列布局

仿window文件夹布局

适用于内部item定宽，多个item平铺于父元素。

内部子元素宽度固定
超出自动换行
自适应父元素宽度

<div class="parent">
  <div class="container">
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
  </div>
</div>
复制代码

.parent{
  box-sizing: border-box;
  border: 1px solid grey;
  width: 392px;
}
.container{
    box-sizing: border-box;
    display: flex;  
    flex-wrap: wrap;
    margin-right: -10px;
}
.ele{
    box-sizing: border-box;
    background: #ccc;
    width: 90px;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
    margin-bottom: 10px;
}

复制代码

element

上面示例中，多个ele水平排列，每一行显示个数与parent的宽度有关，增长或减小parent的宽度，每行显示个数会自动改变。能够选中元素打开控制台试试。

解释：

container使用flex布局，设置 flex-wrap: wrap; 超出折行显示
parent宽度为 (ele.width + ele.marginRight) * 4 - ele.marginRight 时，每行恰好显示4个子元素。
上一条的参数能够实现 justify-content: space-between 效果，但又不会致使某一行不够4个时的样式错位
container 自己不设置宽度，利用内部元素撑开，同时设置 margin-right: -10px 会使 container在原有宽度的基础上增长10px的大小，恰好包容每行最后一个 ele 的 marginRight

小知识：

margin的left、right为负值时，若元素自己没有宽度，则会增长元素宽度

元素自己有宽度，会产生位移

margin-top 为负值，无论是否设置高度，都不会增长高度，而是会产生向上的位移

margin-bottom 为负值的时候不会位移,而是会减小自身供css读取的高度

若须要两列或多列布局，能够视具体状况经过改变 parent 和 ele 的宽度来调整

其余布局待补充:

层次吸顶布局：聊聊css position属性及其sticky属性值的特性
...

若是你收获了新知识，或者收获了左侧精美图片，请点个赞吧～

相关系列：从零开始的大前端筑基之旅(深刻浅出，持续更新～)

参考文章：