对于元素的定位,常用的方式大致有以下四种,重难点在于flex定位
1. 文档流默认定位
当没有人为的为元素设置定位方式时,元素的默认方式为文档流定位。此时元素的位置主要取决于元素的类型、大小以及周围元素的大小。
元素一共分为三种:
-
块级元素(block)
-
内联元素(inline)
-
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,表示右边/左边/两边不能有浮动元素
-
元素设置浮动定位时会脱离文档流,此时可能会引起父元素的塌陷,对于该问题的解决方式有两个
-
为父元素添加overflow属性,取值随意
-
在父元素中添加一个添加了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布局的元素称为容器,它的内层子元素称为项目。容器有两根轴,水平的主轴和垂直的交叉轴,项目沿主轴排列(这里说的都是默认情况)。
容器的六个属性:
-
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 元素之间有距离,与容器间也有距离( 第一行前面及最后一行后面的空间是其他空间的一半)
项目的六个属性:
-
order:定义项目的排列顺序,默认为0。数值越小,排列越靠前
-
flex-grow:定义项目的放大比例,默认值是0(即存在空余空间也不放大)。如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
-
flex-shrink:定义项目的缩小比例,默认为1。如果所有项目的flex-shrink属性值都为1,在空间不足时会等比例缩小。如果某一个项目的取值为0,其他项目为1,则空间不足时前者不缩小,负值对该属性无效
-
flex-basis:定义了在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小
-
flex是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。该属性有两个快捷值:auto (即1 1 auto) 和 none (即0 0 auto)
-
align-self:允许单个的项目使用和其他项目不同的对齐方式(可以覆盖align-item),默认为auto,其他五个可能的取值都和align-item相同