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

从零开始学前端

墨衍会员 · AI 创作全网分发码龄7年

关注

原创最新推荐文章于 2024-04-12 05:45:23 发布 3k 阅读 AI 写同款· GEO 优化 ›

1.行内块级元素布局

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

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

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

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

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

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

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

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

<style media="screen">

body {

margin: 0;

font-size: 0;

}

div {

display: inline-block;

background-color: orange;

border-radius: 5px;

width: 30vw;

height: 30vw;

margin: 1.5vw 0 0 1.5vw;

}

</style>

</head>

<body>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</body>

这样的布局方式也是会有一些去诶按的，比如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的使用可以看如下例子：

<style>

div {

display: inline-block;

width: 100px;

height: 100px;

background-color: red;

color: #fff;

text-align: center;

line-height: 100px;

font-size: 30px;

}

div:nth-child(2) {

position: relative;

top: 20px;

left: 20px;

border: 1px solid #333;

}

</style>

<body>

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

</body>

页面效果如下：

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

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

<style media="screen">

.parent {

padding: 50px;

background: #eee;

width: 500px;

height: 300px;

}

.child {

background: #ccc;

/* position: relative; */

}

.item {

display: inline-block;

width: 50px;

height: 50px;

background: yellow;

}

.item:nth-child(3) {

position: absolute;

background: red;

left: 10px;

top: 10px;

}

</style>

<body>

<div class="parent">

<div class="child">

<div class="item"></div>

<div class="item"></div>

<div class="item"></div>

<div class="item"></div>

<div class="item"></div>

</div>

</div>

</body>

其展示效果如下：

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

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

<header>

奇妙的文章

</header>

<footer><button>点击就送</button></footer>

<section>

文案分工

形成场景规范角色规范

李晴找到位置

<p>

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

aliquip non appellat.

</p>

<p>

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

expetendis nulla commodo laborum eu elit deserunt des

</p>

<p>

Quamquam magna iis possumus eruditionem, litteris praetermissum an litteris.

Ullamco sempitern

</p>

<p>

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

magna sed nostrud ut export

</p>

<p>

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

domesticarum.

</p>

<p>

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

hic amet e eiusmod a sint.

</p>

<p>

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

iudicem e e fore offendit commodo.

</p>

<p>

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.

</p>

<p>

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

vidisse.

</p>

<p>

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

incurreret sed eram. Quem deserunt quo aute quis,.

</p>

</section>

</body>