第六十章 横排

讲了半天盒子,我们的盒子都只是纵向排列。因为我们讲:默认盒元素是要自己独占一行的。

但是,大部分情况下,我们需要盒元素可以横排,毕竟极其单纯的纵向布局实在无法满足我们对于网页的需求。至少,我们谁也不想每次看网页都要滚动无数次滚轮,鼠标坏了也是要花钱买的啊。

那就横排吧,你第一个想到的方法是什么?如果它们是行内元素就好了。但是行内元素不能有宽高内补外补,这就会很不方便。那如果在行内元素里放一个块级元素……对不起,标准不允许。

尴尬,尴尬如同睡眼惺忪的老鼠,端着咖啡直楞楞的站在那里。

先说一个属性吧,display 属性可以设置这个元素是行内元素 inline 或是块级元素 block,也就是说,这个确实是可以进行转变的,虽然……我们的问题还是没有得到解决。

然后它还有第三个属性值可以使用[1]inline-block,这个看起来有意思,你说这到底算啥?在行内的块元素吧。其实这涉及一个对外表现(对于文档流),和对内表现(自身样式),你这么区分一下,就理解了,这算是两种模式的一个结合。

那动手写一下吧:

<div class="box-inline-box">第一</div><div class="box-inline-box">第二</div><div class="box-inline-box">第三</div><div class="box-inline-box">第四</div>
.box-inline-box {display: inline-block;border: 3px solid orange;padding: 10px;}

第一 第二 第三 第四

成功了吧,简单吧,横排了吧,内补也起作用了吧,多美好……

我设置外补了么?没有外补,元素间的空隙是哪里来的?这是一个重要的问题,划重点,必考哦~

对外表现是行内元素对不对?行内元素会把里面的空白合并显示为一个空格对不对?块元素间的空白才被无视。所以这个空白(间隔),就是代码中换行产生的空白,不信你把这些元素写在一行,中间不留空白试试看,马上就好。

但是,我们这么简单的元素写在一行都让人觉得很乱,如果复杂一点还不要人命么。所以我不喜欢这种方法。

网上也讲了许多解决方案。能解决,但是都有一定的弊病或者别扭,反正,我不喜欢。不过还是要知道滴~因为有用啊!否则你以为本站链接怎么做的那么漂亮的呢?

原文链接:https://www.ek58.com/archives/3641,转载请注明出处。

0

评论0

请先

没有账号? 注册  忘记密码?