CSS 常用的定位和布局方法汇总(已添加源码地址)

Posted 2020-12-22 10manongit

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 常用的定位和布局方法汇总(已添加源码地址)相关的知识，希望对你有一定的参考价值。

CSS-Layout

旨在打造详尽的前端布局代码学习库（自从用了框架开发，CSS生疏了不少，所以开这个库练练手）
SF不能正确解析含有中文的网址，所以某些预览链接无法跳转，请访问我的博客阅读此文

常见定位方法

水平居中

子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。

方案选择基本思路：
子元素为

行内元素：对父元素设置text-align:center;

定宽块状元素: 设置左右margin值为auto;

不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;

通用方案: flex布局，对父元素设置display:flex;justify-content:center;

常用方法举例：

NOTE:为了统一展示效果，在以下实例代码中对父子元素设置了固定宽高，实际可以不设置，由子元素内容来控制其宽度

方法一：text-align + inline-block

设置：对父元素设置text-align:center(将会对行内元素起作用)，子元素设置display:inline-block（兼容IE6、7 时，替换为display:inline;zoom:1;）;

优点：兼容性良好

缺点：需要额外代码修复因继承父元素的text-align:center对子元素内容排列造成的影响，如需要添加.child{text-align:left}

方法二：table + margiin

设置：对子元素设置display:table(此元素会作为块级表格来显示，元素表现类似block，但是宽度跟随内容宽度)（兼容IE6、7 时，替换div结构为table结构即可）;

优点：只需要对子元素进行设置

缺点：向下兼容IE6、7时，需要更改html结构

方法三：absolute + transform

设置：对父元素设置position:realatve(使其作为参照物)，对子元素设置position:absolute;left:50%(绝对定位元素的宽度也随内容而定)，然后对子元素设置transform:translateX(-50%)（兼容IE6、7 时，替换div结构为table结构即可）;

优点：居中元素不会对其他元素造成影响

缺点：transform不兼容低版本IE

方法四：flex + justify-content

设置：对父元素设置display:flex;justify-content:center(这样其内部的元素会变为align-items)，align-items的宽度默认为auto，所以跟随内容宽度变化，继而justify-content:center属性会使子元素居中

优点：只需要对父元素进行设置

缺点：flex不兼容低版本IE

垂直居中

垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。

父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height

父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;

块状元素:设置子元素position:absolute 并设置top、bottom为0，父元素要设置定位为static以外的值，margin:auto;

通用方案: flex布局，给父元素设置{display:flex; align-items:center;}

常用方法举例：

方法一：table-cell + vertical-align

设置：子容器高度不固定，对父元素设置display:table-cell(parent变为单元格，)，继续设置vertical-align:center（使inline元素垂直居中）;

优点：兼容性好（支持 IE 8）

缺点：IE 8 以下版本需要调整页面结构至 table

方法二：absolute + transform

设置：对父元素设置position:realatve(使其作为参照物)，对子元素设置position:absolute;left:50%(绝对定位元素的宽度也随内容而定)，然后对子元素设置transform:translateY(-50%)（兼容IE6、7 时，替换div结构为table结构即可）;

优点：居中元素不会对其他元素造成影响

缺点：transform不兼容低版本IE

方法三：flex + align-items

设置：对父元素设置display:flex(align-items默认属性为stretch),继而设置align-items:center即可;

优点：只需要对父元素进行设置

缺点：flex align-items不兼容低版本IE

水平居中且垂直居中

结合以上介绍到的水平和垂直居中方法进行设置

方法一：text-align + inline-block + table-cell + vertical-align

方法二：absolute + transform

方法三：flex + justify-content + align-items

多列布局

技术图片

一列定宽，一列自适应宽度

1.一列定宽，一列自适应宽度（float+margin）

预览源码

2.一列定宽，一列自适应宽度（float+margin）fix 改良版

预览源码

NOTE：此方法不会存在 IE 6 中3像素的 BUG，但 .left 不可选择，需要设置 .left {position: relative} 来提高层级。此方法可以适用于多版本浏览器（包括 IE6）。缺点是多余的 HTML 文本结构。

3.一列定宽，一列自适应宽度( float + overflow )

预览源码

4.一列定宽，一列自适应宽度( table + table-cell )

预览源码

5.一列定宽，一列自适应宽度( flex )

预览源码

多列定宽，一列自适应宽度

基于上面对于一列定宽一列自适应的需求实现，多列定宽只需要在原有一列定宽的基础上添加新的列即可，最后的列依然会自适应剩余宽度。

以 flex 的实现为基础可以作如下改造：

   <div class="parent">
       <div class="left">
           <p>.left</p>
           <p>左侧定宽</p>
       </div>
       <!--添加了一列，CSS与 .left 公用-->
       <div class="center">
           <p>.center</p>
           <p>第二列定宽</p>
       </div>
       
       <div class="content">
           <p>.content</p>
           <p>flex：1 充满剩余空间，形成自适应效果，不设置的话默认为内容宽度</p>
       </div>
   </div>

   <style>
           .parent {
           display: flex;
       }
       
       .left,.center {
           width: 300px;
           height: 500px;
           margin-right:10px;
           background-color: lightblue;
       }
       
       .content {
           flex: 1;
           height: 500px;
           background-color: orange;
       }
   
   </style>