CSS

CSS 常用定位和布局方法

CSS position & Layout

Posted by 犀利一下下 on 2017-03-16

CSS-Layout

旨在打造详尽的前端布局代码学习库(自从用了框架开发,CSS生疏了不少,所以开这个库练练手)

常见定位方法

水平居中

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

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

  • 行内元素:对父元素设置text-align:center;
  • 定宽块状元素: 设置左右margin值为auto;
  • 不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;
  • 通用方案: flex布局,对父元素设置display:flex;justify-content:center;

常用方法举例:

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

  1. 方法一:text-align + inline-block

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

优点:兼容性良好

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

  1. 方法二:table + margiin

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

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

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

  1. 方法三:absolute + transform

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

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

缺点transform不兼容低版本IE

  1. 方法四:flex + justify-content

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

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

缺点flex不兼容低版本IE

垂直居中

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

  • 父元素一定,子元素为单行内联文本:设置父元素的height等于行高line-height
  • 父元素一定,子元素为多行内联文本:设置父元素的display:table-cellinline-block,再设置vertical-align:middle;
  • 块状元素:设置子元素position:absolute 并设置top、bottom为0,父元素要设置定位为static以外的值,margin:auto;
  • 通用方案: flex布局,给父元素设置{display:flex; align-items:center;}

常用方法举例:

  1. 方法一:table-cell + vertical-align

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

优点:兼容性好(支持 IE 8)

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

  1. 方法二:absolute + transform

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

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

缺点transform不兼容低版本IE

  1. 方法三:flex + align-items

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

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

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

水平居中且垂直居中

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

  1. 方法一:text-align + inline-block + table-cell + vertical-align
  1. 方法二:absolute + transform
  1. 方法三: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 的实现为基础可以作如下改造:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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>

多列不定宽,一列自适应宽度

基于以上一列定宽一列自适应的实现,进行改造,左侧不定宽区域的宽度任意(也可以由内部的内容来决定宽度就可以实现不定宽且自适应),继续增加一列即可变为多列,都很方便实现

多列等分布局

1.多列等分布局(float)

预览 源码

2.多列等分布局(table)

预览 源码

3.多列等分布局(flex)

预览 源码

多列等高布局

1.多列等高布局(table)

预览 源码

2.多列等高布局(flex)

预览 源码

全屏布局

1.弹性全屏布局(position)

预览 源码

2.弹性全屏布局(flex)

预览 源码

3.百分比布局,以上宽度设置更改为百分比即可

4.根据内容完全自适应,position有限制无法满足,flex可以做到