从零学前端第二讲：CSS行内块级元素布局与定位

修真院Web工程师零基础全能课

本节课内容：

CSS行内块级元素布局和定位

主讲人介绍

沁修，葡萄藤技术总监

项目经验丰富，擅长H5移动项目开发。

专注技术选型、底层开发、最佳代码实践规范总结与推广。

直播录屏版

传送门：https://v.qq.com/x/page/l0675tsgywz.html

1.行内块级元素布局

上一节里面我们讲到了float浮动布局以及它的一些使用方法，在这一节里会将到行内块级元素布局的方法。

html的元素最开始是只有行内元素和块级元素两种，大多数元素都是块级元素，其特点是独占一行，会尽量占满浏览器的宽度。

但这两种元素在布局上比较无力，因此人们开始利用float浮动，这一最开始用于文字环绕的属性来进行布局。

这样的布局方式时至今日依然有不少的使用场景，但它的缺点也是非常明显的，它破坏了文档流造成高度塌陷，是一种hack的方式。

那么我们还有没有其他的方法来完成布局呢？

答案当然是有的，行内块级元素inline-block。

当为元素设置display为inline-block时，该元素就成为一个行内块级元素，既可以在一行内放置多个这样的元素，又可以为它设置宽高内外边距等属性。

比如当我们要完成九宫格布局的代码是这样的：

这样的布局方式也是会有一些去诶按的，比如IE6，7上支持会有一些问题。

解决办法其一是将inline元素直接写成{display: inline-block;}

其二是将block元素写成{display: inline-block; display: inline;}

另外换行符也会有空格间隙的问题

解决办法其一是去掉空格换行符直接连写，但这样代码不太美观。

其二是对父级元素加上font-size:0，这样字体大小为0的情况下空格也不再占据空间因此间隙问题得以解决。

2.定位

定位position，这个属性的目的是更改盒子与环境的位置关系。它有4种属性值：

属性说明static该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。relative相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。absolute

相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。

绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）。

fixed

固定定位

和绝对定位类似，但元素的基准块是viewport视窗。

这种定位常用于创建在滚动屏幕上还有固定元素的地方。

relative的使用可以看如下例子：

1

2

3

4

页面效果如下：

可以看出来在设置relative之后，可以对该元素设置left，right的方位的属性，并且不会影响该元素在文档流中的位置。

absolute的使用可以看如下例子：

其展示效果如下：

可以看出来，absolute绝对定位会向上在祖先级元素里寻找有relative的元素，以它作为定位的基准，如果祖先级元素里都没有relative，那它会以根元素作为基准。

fixed的使用可以看如下例子：

奇妙的文章

点击就送

文案分工

形成场景规范角色规范

李晴找到位置

summis fabulas elit ne iis o amet quae eram id sint non ad sunt singulis ne ne

aliquip non appellat.

Illum probant firmissimum. Eu qui quae culpa dolore, anim ad fabulas non elit ut

expetendis nulla commodo laborum eu elit deserunt des

Quamquam magna iis possumus eruditionem, litteris praetermissum an litteris.

Ullamco sempitern

Et quid commodo coniunctione, proident sed tempor. Quo quamquam aut commodo qui

magna sed nostrud ut export

Appellat illum excepteur ne de officia graviterque et commodo se ullamco, in nam

domesticarum.

Eram ubi probant ad culpa, eu ab elit eram esse ut dolor probant qui fore quae

hic amet e eiusmod a sint.

Quis domesticarum singulis sunt proident ex elit laboris o fugiat anim. Eram o

iudicem e e fore offendit commodo.

Ex sunt incididunt fidelissimae ita doctrina qui quis. Laborum ea aute laboris.

Fabulas dolore ullamco, labore offendit quo tempor eram.Non noster graviterque,

ut sunt mandaremus excepteur. E quid occaecat commodo, a quid duis se consequat.

E malis ea quorum.

Duis quibusdam est exquisitaque, sed nostrud graviterque de tempor ita id enim

vidisse.

E duis aliquip concursionibus, proident ex irure, labore ea possumus id

incurreret sed eram. Quem deserunt quo aute quis,.

其展示效果如下：

可以看出来当对元素设置了fixed之后，它的绝对定位是相对于屏幕来讲的。

因此只要灵活运用定位，能为我们的布局增加不少色彩，实现更加丰富的网页开发。