CSS常用布局

  |   分类   |   热度 ℃

本文探讨常用的css布局各种实现方式，其中float、position的实现方式兼容性较好，flex、grid兼容性较差甚至各种浏览器有不同的语法，可以通过caniuse搜索查看。

左右布局

按比例自适应布局

按比例自适应布局很少用得到，下面给出的代码都是等比例分两列的，多列不同比例的布局也是使用同样的方法。

  1. 使用float实现

    使用float配合百分比宽度

  1. 使用绝对定位实现

    使用绝对定位left、bottom、top、right定位

  1. 使用flex实现

flex项目设置flex-grow在flex容器中自适应宽度

  1. 使用grid实现

定义grid为一行两列1fr即可

左固定宽度右自适应布局

左侧固定宽度是经常使用的布局方式，下面给出的代码都是左侧固定，右侧同理。

  1. 使用float实现

    左侧浮动使用width设置固定宽度，右侧不设置浮动且不清除浮动便会与左侧同行，此时使用margin-left空开左侧的距离即可。

  1. 使用绝对定位实现

    使用绝对定位left、bottom、top、right定位，左侧不设置right使用width固定宽度

  1. 使用flex实现

flex项目设置flex-grow在flex容器中自适应宽度，如果设置宽度，则不设宽度的均分剩余宽度

  1. 使用grid实现

定义grid为一行两列分别为50px`1fr`即可

左中右布局

按比例自适应布局

左中右按比例自适应布局很少用得到，其原理与左右布局相同，就不给出代码演示了。

左右固定中自适应布局

左右固定经常使用，下面是代码实现方式。

  1. 使用float实现

    左侧左浮动，右侧右浮动，中间不设置浮动且不清除浮动即可，然后设置左右margin避开左右侧内容。一定要注意在HTML中middle要在left和right的后面，否则将挤掉right的空间。

  1. 使用绝对定位实现

    使用绝对定位left、bottom、top、right定位，左右使用width设置宽度

  1. 使用flex实现

flex项目设置flex-grow在flex容器中自适应宽度，左右侧设置width中间设置flex-grow即可

  1. 使用grid实现

定义grid为一行三列50px 1fr 50px即可，HTML中必须按顺序写，否则需要在css中设置占用的格子

居中

居中非常非常非常常用，也是面试中的必问题，一定要掌握好。

水平居中

  1. 通过text-align实现

行内元素只需要设置text-algin即可，非行内元素可以通过display转换为行内元素，此方法可以多个元素居中

  1. 通过margin实现

块级元素只需要设置margin: 0 auto， 此方法很常用但只可以居中一个元素

  1. 通过绝对定位实现

任何种类的元素都可以，通过绝对定位与left:50%，如果是固定宽度的话使用margin负值，如果不固定宽度使用transform:translateX(-50%)即可

  1. 通过flex实现

可以但没有必要，多个块级元素可以使用，不过一般都通过嵌套实现

  1. 通过grid实现

同上，可以但没必要，而且只可以居中一个元素，多个还需要嵌套

垂直居中

  1. 通过line-height实现

行内元素只需要设置line-height即可，非行内元素可以通过display转换为行内元素，一定要将父元素的font-size设为0，否则因为不同字体baseline不同的原因可能会跑偏，可以居中多个元素

  1. 通过绝对定位实现

任何种类的元素都可以，通过绝对定位与top:50%，如果是固定高度的话使用margin负值，如果不固定高度使用transform:translateY(-50%)即可，只可以居中一个元素

  1. 通过table实现

table中的行内元素很容易设置居中，多行也可以，不过需要多嵌套一层table-cell

  1. 通过flex实现

非常好用，只需要设置父元素align-items: center即可，如果多行还可以通过aligin-content: center居中

  1. 通过grid实现

不太推荐，适用于单列或多列元素的居中，没有flex灵活

水平垂直都居中

通过水平居中和垂直居中的组合可以实现完全居中，以下各情况都是通过前面提到的方法组合而成，就不给代码演示了。

  1. line-height与text-align实现

内联元素只需要同时使用line-height垂直居中和text-align水平居中即可，适用于单行多个元素

  1. text-align与table实现

不同于上面的第一种，此种方法可以行内元素多行也保持居中

  1. margin与line-height实现

inline-block可以通过margin水平居中和line-height垂直居中组合，只适用于一个元素的情况，不推荐使用

  1. 绝对定位实现

没什么好说的，垂直水平都用绝对定位居中就好了，只适用于一个任何种类元素

  1. flex实现

同上，最灵活的方式居中，可以多个元素甚至可以多行

  1. grid实现

不推荐使用，垂直水平都用grid居中就好了，但只能一个元素居中，兼容性又差

CSS小技巧

其他的多种小技巧可以通过css-tricks搜索

总结

一种布局是可以通过多种方式实现的，每种布局方式都有各自的优点与缺点，flex、grid虽然简洁好用但兼容性较差适合较晚起步的移动端使用，行内块和绝对定位兼容性好但相对麻烦，居中时有单个元素、多个元素甚至多行的需求可以使用相对简单的方式来解决，较老的平台为了兼容性问题则可以使用嵌套的形式来布局。


本文链接：CSS常用布局
版权声明：本文章采用CC BY-NC-SA 3.0 CN许可协议进行许可。转载请注明出处！