`
rapheal
  • 浏览: 170883 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

浏览器上的“盒子”摆放

阅读更多

前言

依旧延续几篇博文的风格,旨在引出一些概念的东西,至于技术贴,以后再慢慢贴一些细节的东西。

上篇博文写了一点点自己关于“盒模型”的一些想法跟阐述,那既然盒子制造出来了,紧接着就是把它摆放到浏览器上了。

 

摆放盒子的启示

如果给我们一张设计图,图上标志着盒子摆放的位置方式等等,然后叫我们按着设计图拿一堆盒子去把它们摆放在地板上。

要是是我,我拿到设计图,我就开始按照第一个盒子摆放的方式先摆好,然后摆放第二个,直到设计图上标志的盒子全部被摆放好,这个摆放过程就结束了。

也许又是一个不是比喻的比喻,往往一个WEB应用背后有设计师,前端重构师,前端工程师等等,设计师根据产品经理的需求设计了一个很炫很炫的页面图,这时候前端重构师要负责把这个图转化成HTML+CSS,使得在浏览器上打开这个HTML文件的时候,出现了跟设计图一样的页面,然后要在各大浏览器测试一遍,要是挑剔的话,一个像素的偏差都要查得很仔细。

好吧,引出主题吧。

现在我们是前端重构师了,并且手里拿着一张图纸了,那就开始吧!

  1. 打开图纸,你会看到上边有很多文字,图片等等,我们按照前面说的,应该把它划分(记得一定是水平方向跟竖直方向划分的)成很多很多的“盒子”,至于怎么划分,不想多讲,一般会有个切片的过程。
  2. 现在手上已经有了很多盒子了,于是我们需要将它们相对的位置跟嵌套关系整理出来,这话讲得我自己都有点蒙。我在HTML|CSS|JS初探的HTML写过一个片段,还记得小R的head应该长在body上边吧,这个就是一种顺序的关系;还记得小R的eyes是长在head上边的吧,这个就是一种嵌套的关系。于是我们开始把刚刚的盒子开始整理,比如说盒子2放在盒子1的下一个位置,盒子3是装在盒子1里边的。至于什么是语义化,我就不在这多说了。
  3. 当我们完成第二步之后,你会发现,现在盒子在地板上大概的位置都出来了,那还要做什么呢?对于设计图,我们需要还原成一摸一样,以至于盒子间1cm的距离我们都要算好,于是我们要开始整理盒子的大小、盒子内部的摆放、盒子间的距离等等。
  4. 当然最后我们要看看这些盒子在IE底下摆放有没有问题,在Firefox底下有没有问题。

盒子的切分以及嵌套方式有无数种实现方法,但是要记得!语义化!

盒子的摆放顺序是从上到下,从左到右

 

我们现在知道了,浏览器摆放着盒子,这里一块区域放着盒子1,在这块区域下边放着盒子2。我们就把这块区域定义成“块”!

我们还知道盒子里边是可以装着盒子的,于是里边的盒子的“父亲”就是外边的盒子。

块的一个属性就是在其“父亲”的区域里边只占领一行,也就是排在它后边的块需要排在它的下边而不是右边(你可以想象后边加上了回车换行)。

当然了,也有不是块的东西,可以使得它的下一个盒子跟它一起放在同一行。

 

浏览器上的“流”

这时候,我们先提到一种交互方式:弹窗。你是否在浏览某个网站的时候点击评论然后在页面正中间出现了一个对话窗口,叫你输入账号密码登录。要注意,这个窗口是“浮在”页面上边的!

这里又乱了,之前不是说盒子是按照顺序放好的,没有说能够这样叠放啊,怎么就这样叠在其他盒子的上边了呢?

如果你想到了上边这个问题,那就说明你了解了一些摆放的规律了。

先解释一下我个人对于“流”的想法,前面说到了,我们现在制作好了一堆盒子,也把它们的顺序理清楚了,我们要开始往画布上放盒子了!

于是我把盒子按照我定好的顺序放在一个传送带上边,然后我在传送带的那头一个一个的把盒子拿下来摆放到地板上。相信这样的处理应该挺合理的吧!?

这里的传送带就是我理解的“流”!

那为什么要这个传输带呢!?因为它帮我理清了顺序。

那跟上面说到的弹窗有说明联系呢!?因为这样的摆放方式我可以利用多个传送带来帮助我完成。

正常的话,我们只需要一个传送带就可以完成任务了,这个就叫做标准流或者文档流。

但是有时候我们需要块的下一个块要放在它的右边而不是下边的时候(就是块之间没有回车换行),我们需要告诉浏览器说,我这几个块是不同于标准的摆设方式的,所以浏览器把它们放在了另外一个传送带,也就是别的流里边。很明显,它们脱离了文档流!

现在可以想象一下,每个传送带的那头都有一个摆放的工作人员,他们对于这一条传送带的处理方式是唯一的。比如说工作人员A处理文档流,工作人员B处理浮动流。

于是传送带的那头的工作人员C开始按照顺序把盒子放在传送带上了,然后A拿到盒子按照A的理解放在地板上,B拿到盒子按照B自己的想法放在地板上。

我们假设盒子的摆放顺序就是:1,2,3,4……n。(数字为盒子编号)

盒子1跟盒子4放在文档流里边,盒子2和盒子3放在浮动流里边。

A拿到了盒子1放在地板上,然后A知道他下一个拿到的盒子应该放在盒子1的下边的!

紧接着B拿到了盒子2,他知道了下一个盒子按照要求应该放在盒子1的下边。

然后B拿到了盒子3,因为这个是浮动流传输带,B应该把盒子3放在盒子2的右边,而不是下边。

最后A拿到盒子4,因为A不懂B的想法,于是A还是乖乖的按照自己原先的思路把盒子4放在盒子1下边了。

 

不知道我讲明白没!?

在实际中很多时候我们都需要清除浮动流的,换句话说就是有某种方式可以把B的想法告诉A,于是A改变了原先的一些摆放技巧。

貌似还是没有说到弹窗的问题,弹窗就涉及到一个叫做绝对流。

这个流上的东西不会理会其他流的盒子是怎么放的,它可以直接把盒子放在任意你想放的位置。并且你要记得在浏览器上盒子是可以浮在空中的,但是你从空中看上去还是只是一个2D的画面,这就出现了弹窗的现象!

 

本篇总结

本篇提到了在页面上摆放元素的基本思路跟制作页面的缩略过程,并且阐述了关于CSS中流的概念,有些说法不够术语,但是旨在引出一些概念跟方便理解,欢迎拍板校正。

0
2
分享到:
评论

相关推荐

    CSS盒子模式(DIV布局快速入门)[收集].pdf

    * 边界(margin):盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风 在网页设计中,内容可以是文字、图片等元素,也可以是小盒子(DIV 嵌套)。与现实生活中的盒子不同的是,CSS 盒子具有弹性,里面的东西...

    CSS-day05.pptx

    它按照标准流特性摆放位置,没有边偏移。静态定位在布局时我们几乎不用的。 五、相对定位 相对定位是元素相对于它原来在标准流中的位置来说的。它的特点是相对于原来在标准流中位置来移动的原来在标准流的区域继续...

    前端基础培训啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

    CSS 将页面中的所有元素都设置为了一个矩形的盒子,将元素设置为盒子后,对页面的布局就变成了将不同的盒子摆放到不同的位置。定位是 CSS 中的一种高级布局技术,通过定位可以将元素摆放在页面的任意位置,使用 ...

    CSS-day05.pdf

    在搜索框上有一个红色色块提示消息,我们可以使用标准流或浮动来实现类似的效果,但是标准流和浮动都无法快速实现将盒子定在某一个位置。因此,我们需要使用定位机制来实现这种效果。 2. 定位详解 定位机制由两...

    笔记-day08-前端基础CSS第六天.pdf

    它按照标准流的特性摆放位置, 没有边偏移。静态定位在布局时我们几乎不用。 ### 相对定位 相对定位是元素在移动位置的时候,是相对于它自己原来的位置来说的。它的特点是:相对于自己原来的位置来移动的,原来在...

    div+css网页标准版式布局大全

    这些定位方式使得div可以在页面上按照需求进行精确摆放。 5. **浮动布局**:使用float属性可以让元素浮动到其父元素的左或右侧,常用于创建多列布局。 6. **Flexbox弹性盒布局**:现代CSS布局方案,能轻松实现灵活...

    小米手机wifi信号解决方案.ppt

    此外,随着智能设备的增加,如电视、电视盒子、安防系统等,老旧路由器可能无法应对大量设备的接入,导致性能下降。 为了解决这些问题,我们可以采取以下策略: 1. **提升路由器性能**:选择功率更高、支持更多...

    DIV+CSS布局大全

    实践中,结合实际需求选择合适布局方式,运用盒模型调整元素尺寸,利用定位实现元素的精确摆放,同时关注响应式设计以确保跨平台兼容性。通过不断实践和学习,你可以精通`DIV+CSS`布局,打造出高效、优雅的网页作品...

    Div+CSS布局页面

    - 定位布局(Positioning):利用`position`属性,实现元素相对于其父元素或窗口的精确位置摆放。 - 网格布局(Grid Layout):CSS Grid提供二维网格系统,便于构建复杂且响应式的布局。 - 弹性布局(Flexbox ...

    CSS2.0、CSS3.0、HTML、XHTML参考手册

    3. **定位与布局**:CSS2.0引入了相对定位、绝对定位和固定定位,使元素能够在页面上自由摆放。同时,还支持浮动元素,创建流式布局。 4. **多列布局**:CSS2.0允许开发者定义元素的列数、列间距等,用于创建多列...

Global site tag (gtag.js) - Google Analytics