web技术第七弹 CSS盒子模型及布局应用


原文链接: web技术第七弹 CSS盒子模型及布局应用

web技术第七弹 CSS盒子模型及布局应用

       近日工作繁忙,更新速度稍慢,敬请谅解。闲话不说,就上一弹的CSS选择器话题,先供上一张总结图片供参考。
图片描述
       下面主要谈谈在CSS中的基本盒子模型。盒子,是页面中元素呈现的基本样式模型。是每一个元素标签在页面上的呈现。对应HTML中的块级元素和行内元素,那么有两类盒子,

一类是块级元素的块级盒子:默认占据一行,可以指定显式的宽度和高度,每个盒子单独占一行后自动换行;

另一类是行内元素的行内盒子,它不可指定宽度,自动包裹住内容宽度,并且在一行内并排显示,只有排列不下的情况下才会被“挤”到下一行,并不自动换行。大部分的标签元素的显示,都是块级盒子,少量如span、img是行内盒子。
图片描述
       那么,每个盒子具体是什么样子的,又有哪些基本CSS属性呢?下面是一个基本盒子的图样,以及对应的属性总结:
图片描述
图片描述
       当涉及到外边距、边框、outline、内边距的属性书写的时候,会有简写的情况,这时候记住:
1、数值一次性书写,其顺序是从top开始,顺时针表示 top、right、bottom、left。
2、因为这些都是矩形,所以,如果对应的数值如果缺失,缺失的那一边就采用对面边的数值。如果只有一个数值,那就表示四个边都是同一个数值。

        了解了页面元素的呈现都是一些盒子的排列,和具体盒子的属性设置,我们可以简单的看看一个页面是怎么布局的了。我们来看个实际的页面:
图片描述
       我们把这个页面来分析一下,可以看出这个页面是下面这几个大的盒子形成的。 简单而言,这有一个顶部固定的标题栏,然后下面是自动居中的WarpBOX包裹层,在这个里面有三个固定宽度的栏目。具体再到里面的盒子,还有各种不同的小盒子在里面。如何应用基本盒子的属性,完成这样的页面样式,这就是基本的页面布局。我们可以来分析下最基础的几种布局模型:
一、单列布局​
图片描述        首先,我们对body元素予以内外边距都设定成0px,这样可以使页面紧贴浏览器窗口。然后我们设置一个mainWarp的大盒子作为内容包裹层,我们要使这个盒子实现左右居中的效果,可以对其的margin属性定义为0,auto; 。 这样,这个盒子就会上下贴住body,左右外边距由浏览器自动计算,实现居中的效果。
二、双列布局
图片描述       两个盒子,divLeft和divRight,都是块级盒子,默认情况下是按照标准文档流会上下排列的。我们需要对这两个盒子设定显式的宽度,然后让他们并排排列在一行,怎么实现呢?可以用元素的float和clear属性。

首先,对需要并排排列的块级盒子应用float:left; 。设置后,盒子会从原先的文档流里脱离出来,沿着左边贴住父元素的可用最左边,同时他的后续元素不再换行,而是沿着同一行在可用处继续显示。

为了使divDown这个盒子不被前一个浮动元素影响并排,对它实行clear:both; 属性清除浮动。由于之前的元素浮动脱离文档流,会导致父级的warp包裹层高度塌陷,因此再对父元素实行 Overflow:hidden; 的属性,解决这个问题。这样,就可以实现布局了。
三、三列布局,左右宽度固定,中间宽度自适应布局
图片描述       由于中间的盒子宽度不确定,因此无法用float的方式把他们并排显示。这种情况下,换个思路,可以用postion位移的方式来实现。首先,我们设定一个divWarp,并让这个作为绝对位移的基准位置,设定其Position:relative;,含义是这个盒子相对于自己的文档流位置不做偏移​。第二,对左边盒子divLeft做绝对位移,相对于divWarp,设定其Position:absolut;left 0;top 0; 使他左上角和基准盒子的左上角贴住。同样的道理,设定右边的盒子divRight的属性为 Position:absolute;right 0;top 0; 使他的右上角贴住基准点。这样,为中间的盒子留出左右空间分别为这两个盒子的固定宽度a和b。 最后,对中间的盒子外边距属性设定margin:0,b,0,a; 这样,就让中间的盒子自适应宽度而又单独成一列,完成我们需要的样式了。 注意,对于显式设定width的盒子,CSS的默认是内容的宽度,而页面上实际的宽度还需要加上边框和内外边距。为了在设定这些属性时,盒子的实际宽度不要发生变化导致布局混乱,我们最好对盒子实行box-sizing:border-box;,把width值统一到内容+边框+内边距上,避免因为这些样式的设定造成宽度不固定。
       最后,我对CSS下盒子模型的学习和布局,做点总结如下:

  • CSS中的基本盒子模型:块级盒子和行内盒子

  • 块级盒子:一行只有一个,可以显示指定宽度,自动换行

  • 行内盒子:行内排列,不能显示指定宽度,自动包裹内部元素,不换行

  • 两类通过 display:block 和inline 来互相切换

  • 盒子的外边距可以设为负值,用来实现内容的偏移

  • 块级盒子通过float属性和clear属性,以及position定位可以实现浮动横向排列的效果

  • 通过box-sizing:border-box; 属性,给块级盒子指定的固定宽度包含边框和内边距。

  • 典型应用:页面多列效果和各种菜单效果。

            在CSS3里,对盒子模型做了更进一步的进化,对盒子的border有更多的新属性可以应用(如边框圆角应用、边框内图形填充等),以及针对浮动和偏移带来的布局不方便,重新定义了各类新的盒子,这些盒子根据布局和位置的不同有各种新的属性,极大的方便了页面布局的安排。下一弹会重点介绍CSS3中的升级版新盒子模型。

`