CSS布局方式总结

对于元素的定位，常用的方式大致有以下四种，重难点在于flex定位

 

1. 文档流默认定位

当没有人为的为元素设置定位方式时，元素的默认方式为文档流定位。此时元素的位置主要取决于元素的类型、大小以及周围元素的大小。

元素一共分为三种：

1. 块级元素（block）

2. 内联元素（inline）

3. inline-block元素

block元素：

• 常见标签：<div>,<p>,<h>,<ol>,<ul>,<table>,<form>

• 特点：独占一行，可以设置height、width、margin、padding等属性

inline元素：

• 常见标签：<a>,<span>

• 特点：不会单独占用一行，不能设置宽高

• inline元素水平排列时，元素间会有间隙。解决办法是将这些inline标签写在同一行，或是去掉其闭合标签

inline-block元素：

• 常见标签：<img>

• 特点：不单独占用一行，但可以设置宽高

 

将一种类型的元素显示为另一种类型，如要给inline标签设置宽高时，可以对标签类型进行转换。

display : inline-block

要转换为其它类型，同理

 

 

2. float浮动定位

浮动定位是给元素添加float属性，其取值可以是left、right或none（不浮动）。设置了flat的元素，会尽量向上，向左/右移动。

特点：

• 设置了float属性的inline元素，可以设置宽高属性

• 使用浮动定位可以让多个block元素在同一行排列（当然前提是宽度要小于行宽）

• 清除浮动：为元素添加clear属性，取值可以是right/left/both，表示右边/左边/两边不能有浮动元素

• 元素设置浮动定位时会脱离文档流，此时可能会引起父元素的塌陷，对于该问题的解决方式有两个

1. 为父元素添加overflow属性，取值随意

2. 在父元素中添加一个添加了clear且height:0的元素用于撑开父元素，置于底部

 

3. position层定位

层定位即为元素添加position属性，其取值有一下几种情况：

• 默认值：static

• 固定定位：fixed，相对于浏览器窗口进行定位，会脱离文档流

• 相对定位：relative，相对于其直接父元素进行定位。会脱离正常的文档流，但其在文档中的原位置仍然存在

• 绝对定位：absolute，相对于static定位以外的第一个父元素（即relative元素或absolute元素）进行定位；若找不到这样的父元素，则相对于body元素进行定位。定义为absolute的元素脱离正常的文档流，且在文档中的原位置不再存在

层定位中的参数：

• top、bottom、right、left决定元素的位置

• z-index决定元素的显示优先级，取值大的元素显示在上层（可能会遮挡下层元素）

 

4. flex定位（重点）

flex定位意为弹性布局，使用时为元素添加display：flex。

基本概念：使用了flex布局的元素称为容器，它的内层子元素称为项目。容器有两根轴，水平的主轴和垂直的交叉轴，项目沿主轴排列（这里说的都是默认情况）。

容器的六个属性：

1. flex-direction，决定主轴的方向，有四种取值：

• row：水平向右（默认）

• row-reverse：水平向左

• column：垂直向下

• column-reverse：垂直向上

2. flex-wrap：决定当当项目在当前轴上排列不下时的换行情况，有三种取值：

• nowrap：不换行（默认）

• wrap：换行，换行后的内容在下方

• wrap-reverse：换行，换行后的内容在上方

3. flex-flow：是属性flex-direction和属性flex-wrap的简写形式，默认值是row nowrap

4. justify-content：决定项目在主轴上的对齐方式，有五种取值：

• flex-start：左对齐（默认值）

• flex-end：右对齐

• center：居中

• space-between：两端对齐，项目之间的间距都相等

• space-around：两端对齐，每个项目两侧的间距相等（即项目间的间隔是项目与边框间的距离的两倍）

5. align-item：决定项目在交叉轴上如何对齐

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

• flex-start：交叉轴的起点对齐。

• flex-end：交叉轴的终点对齐。

• center：交叉轴的中点对齐。此方法可用于方便的设置元素垂直居中

• baseline: 项目的第一行文字的基线对齐。

6. align-content：决定多行项目的垂直对齐方式。如果项目只有一行，该属性不起作用

• stretch 默认值，元素会被拉伸来适应容器尺寸。若剩余空间是负数，则等于flex-start

• center 元素位于容器的中心（ 如果剩下的空间是负数，则各行会向两个方向溢出的相等距离）

• flex-start 元素位于容器开头

• flex-end 元素位于容器结尾

• flex-between 元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start

• space-around 元素之间有距离，与容器间也有距离（ 第一行前面及最后一行后面的空间是其他空间的一半）

 

项目的六个属性：

1. order：定义项目的排列顺序，默认为0。数值越小，排列越靠前

2. flex-grow：定义项目的放大比例，默认值是0（即存在空余空间也不放大）。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3. flex-shrink：定义项目的缩小比例，默认为1。如果所有项目的flex-shrink属性值都为1，在空间不足时会等比例缩小。如果某一个项目的取值为0，其他项目为1，则空间不足时前者不缩小，负值对该属性无效

4. flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

5. flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (即1 1 auto) 和 none (即0 0 auto)

6. align-self：允许单个的项目使用和其他项目不同的对齐方式（可以覆盖align-item），默认为auto，其他五个可能的取值都和align-item相同