CSS"盒子模型"

最新推荐文章于 2023-06-21 06:45:00 发布

yippeelyl

最新推荐文章于 2023-06-21 06:45:00 发布

阅读量1.6k

点赞数 2

分类专栏： html

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

学习CSS"盒子模型"

盒子模型（Box Model）是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。

所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容大。可以通过调整盒子的边框和边距等参数，来调节盒子的位置和大小。一个页面由很多这样的盒子组成，这些盒子之间会互相影响。

掌握盒子模型需要从两方面来理解：一是理解单个的盒子的内部结构；二是理解多个盒子之间的相互关系。

本文首先讲解独立的盒子相关的性质，然后介绍在普通情况下盒子的排列关系。下一次将更深入地讲解浮动和定位的相关内容。
一．盒子模型概念

1.现实生活中的盒子：

2. 盒子模型（Box Model）

在网页布局中，为了能够使纷繁复杂的各个部分合理地进行组织，通过研究，总结出了一套完整的、行之有效的原则和规范，这就是“盒子模型”的由来。

在CSS中，一个独立的盒子模型由内容(content)、边框(border)、填充(padding)和边界(margin)4个部分组成：

内容(content)：对应盒内物品
边框(border)：对应包装盒的纸壳，具有厚度
填充(padding)：位于边框内部，是内容与边框的距离，对应包装盒的填充部分
边界(margin)：位于边框外部，是边框外面周围的间隙，对应纸壳外围间隙

3. 盒子模型的三维立体结构图

.边框（border），位于盒子的第一层。
.元素内容（content）、内边距（padding），两者同位于第二层。
.背景图（background-image），位于第三层。
.背景色（background-color），位于第四层。
.整个盒子的外边距（margin），位于第五层。

二．盒子模型属性

1. 边框（border）：用于分隔不同元素、会占据空间、有4条边框、可无边框（设置为0）。
语法：
border : border-width || border-style || border-color

取值：
该属性是复合属性。默认值为： medium none 。 border-color 的默认值将采用文本颜色。

边框属性简写:
同时设置边框的三个属性：border: 3px solid blue;

示例代码1：边框属性简写
<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>边框属性简写</title>
   <style>
    div{
     width: 200px;
     height: 200px;
     border: 3px solid blue;
    }
   </style>
  </head>
  <body>
    <div>盒子</div>
  </body>
</html>

① border-width：设置对象边框的宽度。

语法：
border-width : medium | thin | thick | length

取值：
medium : 默认值。默认宽度
thin : 小于默认宽度
thick : 大于默认宽度
length : 由浮点数字和单位标识符组成的长度值。不可为负值。

说明：
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框（顺时针）。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

设置border-width、border-color前要设置border-style。

分别设置四条边框：

属性	语法规则	说明
border-top-width	border-top-width:5px;	上边框粗细为5px
border-right-width	border-right-width:10px;	右边框粗细为10px
border-bottom-width	border-bottom-width:8px;	下边框粗细为8px
border-left-width	border-left-width:22px;	左边框粗细为22px

示例代码2:分别设置四条边框（修改示例代码1的style）
<style>
div{
  border-top-width:5px;
  border-right-width:10px;
  border-bottom-width:8px;
  border-left-width:22px;
  width:200px;
  height:200px;
  border-style: solid;
}
</style>

同时设置4条边框：

属性	语法规则	说明
border-width	border-width:5px;	4条边框粗细均为5px
border-width	border-width:20px 2px;	上、下边框粗细为20px 左、右边框粗细为2px
border-width	border-width:5px 1px 6px;	上边框粗细为5px 左、右边框粗细为1px 下边框粗细为6px
border-width	border-width:1px 3px 5px 2px;	上边框粗细为1px 右边框粗细为3px 下边框粗细为5px 左边框粗

示例代码3:同时设置4条边框（修改示例代码1的style）
<style>
  div{
   border-width:5px 10px 20px;
   width:200px;
   height:200px;
   border-style: solid;
  }
</style>

② border-color: 指定颜色。

语法：
border-color : color

取值：
color:指定颜色。附：CSS 颜色十六进制值表

说明：
(1)从#后第1位开始每2位为一组,表示一个颜色的值（这是以十六进制来算的）：第1组为红色，第2组为绿色，第3组为蓝色。根据三基色的原理，红色与绿色混合为黄色，红色与蓝色混为紫色，绿色与蓝色混合为青色。

(2)数值大颜色亮

(3)十六进制值是成对重复的可以简写，效果一样。例如:#FF0000 可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B 必须写满六位。

(4)红色#FF0000，绿色#00ff00，蓝色为#0000ff，黄色为#FFFFOO，紫色为#ff00ff,青色为#00ffff,白色#ffffff,黑色#000000，要记住（上面所提到的都是饱和色）。

分别设置四条边框和同时设置4条边框语法同border-width

示例代码4:同时设置4条边框的颜色（修改示例代码3的style）
<style>
  div{
   border-color: gold pink blue red;
   border-width:5px 10px 20px;
   width:200px;
   height:200px;
   border-style: solid;
  }
</style>

③ border-style：设置对象边框的样式。

取值：
none : 默认值。无边框。不受任何指定的 border-width 值影响
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 实线边框
double : 双线边框。两条单线与其间隔的和等于指定的 border-width 值
groove : 根据 border-color 的值画3D凹槽
ridge : 根据 border-color 的值画3D凸槽
inset : 根据 border-color 的值画3D凹边
outset : 根据 border-color 的值画3D凸边

分别设置四条边框和同时设置4条边框语法同border-width

示例代码5:同时设置4条边框（修改示例代码4的style）
<style>
div{
  border-style: dotted;
  border-color: gold pink blue red;
  border-width:5px 10px 20px;
  width:200px;
  height:200px;
}
</style>

④ inherit：规定应该从父元素继承 border 属性的设置。

注:当有多条规则作用于同一个边框时，会产生冲突，后面的设置会覆盖前面的设置。

2. 填充(padding)：用于控制内容与边框之间的距离；会占据空间；
可设置盒子模型上、右、下、左4个方向的内边距值；padding属性的值可以为0，即无内边距。
分别设置4个方向的内边距：

属性	语法规则	说明
padding-left	padding-left:10px;	左内边距为10px
padding-right	padding-right:5px;	右内边距为5px
padding-top	padding-top:20px;	上内边距为20px
padding-bottom	padding-bottom:8px;	下内边距为8px

同时设置4个方向的内边距：

属性	语法规则	说明
padding	padding:10px ;	设置4个方向内边距均为10px
padding	padding:10px 5px;	上、下内边距为10px 左、右内边距为5px
padding	padding:30px 8px 10px ;	上内边距为30px 左、右内边距为8px 下内边距为10px
padding	padding:20px 5px 8px 10px ;	上内边距为20px 右内边距为5px 下内边距为8px 左内边距为10px

示例代码6:同时设置4个方向的内边距
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>填充(padding)</title>
  <style>
   #box1{
    width: 400px;
    height: 300px;
    background: pink;
  }
  #box2{
    padding: 30px 8px 10px;
    width: 300px;
    height: 200px;
    background: green;
  }
</style>
</head>
<body>
<div id="box1">
   <div id="box2">同时设置4个方向的内边距</div>
</div>
</body>
</html>

3.边界(margin)：用于控制元素与元素之间的距离；会占据空间；
可设置盒子模型上、右、下、左4个方向的外边距值；margin属性的值可以为0，即无外边距。
分别设置4个方向的内边距和同时设置4个方向的内边距语法同padding属性设置方法类似。

示例代码7:同时设置4个方向的外边距
<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>边界(margin)</title>
   <style>
    #box1{
     border:1px solid red;
     width: 400px;
     height: 300px;
     background: pink;
    }

    #box2{
      margin: 10px 30px;
      padding: 30px 8px 10px;
      width: 300px;
      height: 200px;
      background: green;
    }
   </style>
</head>
<body>
  <div id="box1">
    <div id="box2">同时设置4个方向的外边距</div>
  </div>
</body>
</html>

注：body的外边距，本身是一个盒子，默认情况下，有若干像素外填充。
由于各个浏览器存在着默认的内外边距值且不相同，我们需要将所有浏览器的默认内外边距，都从0计算。所以，我们用:
body,div{/*清除默认外边距和内边距*/
   margin: 0;
   padding: 0;
  }

去除浏览器的默认内外边距。建议要去除的写上，不建议使用*{margin:0;padding:0;}。

示例代码8:去除body外边距
<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>去除body外边距</title>
   <style>
    body,div{
     margin: 0px;
     padding: 0px;
    }
    div{
     border:1px solid red;
     width: 400px;
     height: 300px;
     background: pink;
    }
   </style>
  </head>
  <body>
    <div id="box">此时是贴在body边框上</div>
  </body>
</html>
效果：

4. 内容(content)
内容本身的宽=width
内容本身的高=height

5.盒子模型总尺寸
盒子模型总尺寸=border-width+padding+margin+内容尺寸（宽度/高度）

三．盒子之间的关系

单独的一个盒子不难理解，实际上网页往往是很复杂的，一个网页可能存在着大量的盒子，并且它们之间以各种关系相互影响着。为了适应各种排版要求，CSS规范的思路是：首先确定一种标准的排版模式，这个就是“标准流”。
但仅通过标准流方式，很多排版是无法实现的，CSS规范中又给出了另外几种对盒子进行布局的方法，包括“浮动”和“定位”等属性，对某些元素进行特殊排版。

1. DOM树
   一个HTML从表面看是文本文件，从逻辑上看则具有内在的层次关系。“树”可以表示具有层次关系的结构。
   任意一个HTML文档都对应一棵DOM树，body是所有对象的根节点。而该DOM树的节点如何在浏览器中表现，则由CSS确定。即HTML控制网页的结构，CSS控制网页的表现。

2. 标准文档流
  “标准文档流”（Normal Document Stream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。

如上图共有四层结构，顶层为body，第二层为ul，第三层为li，第四层为文本。这四种元素分为两类：

① 块级元素（block level）
li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。这类元素称为“块级元素” ，即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。

常见的块标记：address、block、div、dl、fieldset、form、h1 ~ h6、menu、ol、ul、p、table

② 行内元素（inline）
对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”。比如<strong></strong>标记，就是一个典型的行内元素，这个标记本身不占有独立的区域，仅仅是在其他元素的基础上指出了一定的范围。再比如，最常用的<a>、<span>标记。

3.浏览器处理元素过程：
第1步：从body开始，依次把两个ul块竖直排列。

第2步：分别进入每一个ul查看它的下级元素，把两个li块竖直排列在ul中。

第3步：进入li内部，是一行文本，按行内元素排列文字。

4．<div>标记与<span>标记
为了更好地理解“块级元素”和“行内元素”，这里重点介绍在CSS排版的页面中经常使用的<div>和<span>标记。
div简单而言就是一个块级容器标记，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种HTML元素。可以把div当做一个独立的对象，用CSS进行控制。<span>和<div>一样，在HTML元素中可以作为独立的对象进行处理。

两者的区别在于：div是一个块级元素，span仅仅是一个行内元素，在它的前后都不会换行。span没有结构上的意义，纯粹是应用样式，当其他行内元素都不适合时，就可以用span标记。div标记可以包含span，span不可以包含div。

5. 盒子在标准流中的定位原则
如果要精确地控制盒子的位置，就必须对margin有更深入的了解。padding只存在于一个盒子内部，所以通常它不会涉及与其他盒子之间的关系和相互影响的问题。margin则用于调整不同的盒子之间的位置关系。

① 行内元素之间的水平margin

两个块之间的距离为：30px+40px=70px。

② 块级元素之间的竖直margin

如果不是行内元素，而是竖直排列的块级元素，margin的取值情况就会有所不同。
两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，如图所示。这个现象称为margin的“塌陷”（或称为“合并”）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。

6. 嵌套盒子之间的margin
除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还有一种父子关系，它的margin值对CSS排版也有重要的作用。当一个<div>块包含在另一个<div>块中时，便形成了典型的父子关系。

其中子块的margin将以父块的内容为参考，如图4.22所示。

在没有设置width和height的情况下，高度和宽度都会自动延伸和收缩。在标准流中，一个块级元素的盒子水平方向的宽度会自动延伸，直至上一级盒子的限制位置。对于高度，div都是以里面的内容的高度来确定的，也就是会自动收缩到能包容下内容的最小高度。

示例代码7:在没有设置width和height的情况下，高度和宽度都会自动延伸和收缩
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>盒子的嵌套</title>
  <style>
    #box1{//父盒子设置宽度
     border:1px solid red;
     width: 300px;
     height: 150px;
     background: pink;
   }
   #box2{//子盒子不设置宽度
     border:1px solid red;
     height: 100px;
     background: green;
   }
  </style>
</head>
<body>
  <div id="box1">父盒子
    <div id="box2">子盒子宽度自动延伸为父盒子宽度</div>
  </div>
</body>
</html>

效果：

如果更改代码：父盒子不设置高度，子盒子设置高度，则父盒子高度会收缩至子盒子的高度，效果如下：

7. margin属性可以设置为负值
上面提及margin的时候，它的值都是正数。其实margin的值也可以设置为负数，而且有关的巧妙运用方法也非常多。

一．CSS3可伸缩框（Flexible Box）

可伸缩框属性（Flexible Box）是css3新添加的盒子模型属性，有人称之为弹性盒模型，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分等分布方式以及如何处理可用的空间。使该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。但是它有一定的局限性，在firefox、chrome这浏览器下需要使用它们的私有属性来定义：firefox(-moz)、chrome（-webkit）。

CSS3可伸缩框属性列表

属性	描述	说明
box-orient	规定框的子元素是否应水平或垂直排列。	水平或垂直分布
box-direction	规定框的子元素的显示方向。	反向分布
box-ordinal-group	规定框的子元素的显示次序。	具体分布
box-flex	规定框的子元素是否可伸缩。	盒子尺寸
box-flex-group	将可伸缩元素分配到柔性分组。	盒子尺寸
box-pack	规定水平框中的水平位置或者垂直框中的垂直位置。	处理空间多
box-align	规定如何对齐框的子元素。	处理空间多
box-lines	规定当超出父元素框的空间时，是否换行显示。	处理空间不足

下面对 CSS3 中新增的弹性盒模型属性做详细介绍。
首先我们先创建一个 html 页面，示例代码1：demo.html
<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="UTF-8">
   <link rel="stylesheet" href="style.css">
   <title>Flexible Box</title>
  </head>
  <body>
    <div id="main">
     <div id="div1">1</div>
     <div id="div2">2</div>
     <div id="div3">3</div>
   </div>
  </body>
</html>

接着我们给页面添加上基本的样式，示例代码2：style.css
body,div{清除所有元素的默认外边距和内边距
  margin: 0;
  padding: 0;
}

#main{/*设置外围容器样式*/
  margin:auto;
  border:1px solid blue;
  width: 300px;
  height: 200px;
  margin-top:50px;
}

#div1{/*给div1添加样式*/
  width: 100px;
  height: 50px;
  background-color: #00B366;
}

#div2{/*给div2添加样式*/
   width: 100px;
   height: 50px;
   background-color: #80C8FE;
}

#div3{/*给div3添加样式*/
  width: 100px;
  height: 50px;
  background-color: #FEB380;
}

效果如下：

声明：
要想运用 CSS3 的弹性布局，需要将父容器设置为display:box 或 display:inline-box。
此部分示例在chrome下运行截图。

1. box-sizing：以特定的方式定义匹配某个区域的特定元素。
语法：
box-sizing: content-box|border-box|inherit;

取值：

值	描述
content-box（默认值）	这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	应该从父元素继承box-sizing属性的值。

2. box-orient：规定框的子元素是否应水平或垂直排列。
语法：

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
取值：

值	描述
horizontal	在水平行中从左向右排列子元素。
vertical	从上向下垂直排列子元素。
inline-axis（默认值）	沿着行内轴来排列子元素（映射为 horizontal）。
block-axis	沿着块轴来排列子元素（映射为 vertical）。
inherit	应该从父元素继承 box-orient 属性

说明：
horizontal和inline-axis属性其效果表现一致，都可以将容器水平排列，在默认情况下也呈现水平排列的样式。当父容器设置高度时，在firefox下面其子容器的高度无效，但chrome下面则有效。

如果你容器不设置高度，子容器的高度值才生效，在firefox下面他们的高度取其中的最大值。而chrome下面设置高度的子容器为自己的高度，未设置的其高度和最大值的高度一样，其实就是和父容器的高度一致。

vertical和block-axis属性效果表现一致，都可将子容器垂直排列。他们是对父容器的高度进行分配。如果子容器设置了宽度，也是谷歌下面有效，火狐无效，其它都与horizontal表现一致。

切记，inline-axis为默认值，沿着行内轴来排列子元素（映射为 horizontal）。

示例代码3：设置框的子元素在水平行中从左向右排列子元素（修改样式表文件，添加如下样式代码）
#main{/*设置外围容器样式*/
  margin:auto;
  border:1px solid blue;
  width: 300px;
  height: 200px;
  margin-top:50px;

  /*Firefox*/
  display:-moz-box;
  -moz-box-orient: horizontal;

  /*Safari、Opera 以及 Chrome*/
  display:-webkit-box;
  -webkit-box-orient: horizontal;

  /*W3C*/
  display:box;
  box-orient: horizontal;
}

注:
实现垂直方向上布局、inline-axis 和 block-axis，只需修改值即可。
inherit 属性值是布局方式继承自父元素，如果父元素是水平的，则它也使用水平布局。

3. box-direction：规定框的子元素的显示方向。
语法：
box-direction: normal|reverse|inherit;

取值：

值	描述
normal（默认值）	以默认方向显示子元素。
reverse	以反方向显示子元素。
inherit	应该从子元素继承 box-direction 属性的值

说明：以反方向显示子元素。

示例代码4：设置垂直且以反方向显示子元素（修改样式表文件，添加如下样式代码）
#main{/*设置外围容器样式*/
   margin:auto;
   border:1px solid blue;
   width: 300px;
   height: 200px;
   margin-top:50px;

   /*Firefox*/
  display:-moz-box;
  -moz-box-orient:vertical;
  -moz-box-direction:reverse;

  /*Safari、Opera 以及 Chrome*/
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-box-direction:reverse;

  /*W3C*/
  display:box;
  box-orient:vertical;
  box-direction:reverse;
}

注: normal只需修改值即可。inherit可自己实验。

4. box-ordinal-group：规定框的子元素的显示次序。
语法：
box-ordinal-group: integer;

取值：

值	描述
integer（默认值1）	一个整数，指示子元素的显示次序。

说明：根据box-ordinal-group的integer值从小到大显示。

示例代码5：设置子元素的显示次序（修改样式表文件）

 #main{/*设置外围容器样式*/
    margin:auto;
    border:1px solid blue;
    width: 300px;
    height: 200px;
    margin-top:50px;
    /*Firefox*/
    display:-moz-box;
    -moz-box-orient:vertical;
    /*Safari、Opera 以及 Chrome*/
    display:-webkit-box;
    -webkit-box-orient:vertical;
    /*W3C*/
    display:box;
    box-orient:vertical;
 }
 #div1{/*给div1添加样式*/
    width: 100px;
    height: 50px;
    background-color: #00B366;
    box-ordinal-group:2;
    -webkit-box-ordinal-group:2;
    -moz-box-ordinal-group:2;
 }
 #div2{/*给div2添加样式*/
    width: 100px;
    height: 50px;
    background-color: #80C8FE;
    box-ordinal-group:1;
    -webkit-box-ordinal-group:1;
    -moz-box-ordinal-group:1;
 }
 #div3{/*给div3添加样式*/
    width: 100px;
    height: 50px;
    background-color: #FEB380;
    box-ordinal-group:3;
    -webkit-box-ordinal-group:3;
    -moz-box-ordinal-group:3;
 }

5. box-flex：规定框的子元素是否可伸缩。
语法：
box-flex: value;

取值：

值	描述
value（默认值0.0）	元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

说明：
可伸缩，顾名思义，子元素如果规定可伸缩，则不要设置宽或高。但一些盒子可以有固定大小，不伸缩。
示例代码6：设置div3为固定大小，div1和div2为可伸缩且div1是div2的两倍（修改样式表文件）

 #main{/*设置外围容器样式*/
    margin:auto;
    border:1px solid blue;
    width: 300px;
    height: 200px;
    margin-top:50px;
    /*Firefox*/
    display:-moz-box;
    -moz-box-orient:vertical;
    /*Safari、Opera 以及 Chrome*/
    display:-webkit-box;
    -webkit-box-orient:vertical;
    /*W3C*/
    display:box;
    box-orient:vertical;
 }
 #div1{/*给div1添加样式*/
    box-flex:2.0;
    -webkit-box-flex:2.0;
    -moz-box-flex:2.0;
    background-color: #00B366;
}
 #div2{/*给div2添加样式*/
    box-flex:1.0;
    -webkit-box-flex:1.0;
    -moz-box-flex:1.0;
    background-color: #80C8FE;
 }
 #div3{/*给div3添加样式*/
    height: 100px; 
    background-color: #FEB380;
 }

6. box-flex-group：将可伸缩元素分配到柔性分组。
语法：
box-flex-group: integer;

取值：

值	描述
integer（默认值1）	一个整数。（第一个柔性分组是 1，后面的柔性分组是更大的值）。

说明：
动态给数值较大的组分配其内容所需的实际空间（如无内容、padding、border则不占空间），剩余空间则均分给数值最小的那个组（可能有1个或多个元素）。具体怎么分，本人还不清楚。

示例代码7：将可伸缩元素分配到柔性分组（修改样式表文件）

#main{/*设置外围容器样式*/
    margin:auto;
    border:1px solid blue;
    width: 300px;
    height: 200px;
    margin-top:50px;
    /*Firefox*/
    display:-moz-box;
    -moz-box-orient:vertical;
    /*Safari、Opera 以及 Chrome*/
    display:-webkit-box;
    -webkit-box-orient:vertical;
    /*W3C*/
    display:box;
    box-orient:vertical;
}
#div1{/*给div1添加样式*/
    background-color: #00B366;
    box-flex:2.0;
    -webkit-box-flex:2.0;
    -moz-box-flex:2.0;
    box-flex-group:1;
    -webkit-box-flex-group:1;
    -moz-box-flex-group:1;
}
#div2{/*给div2添加样式*/
    background-color: #80C8FE;
    box-flex:1.0;
    -webkit-box-flex:1.0;
    -moz-box-flex:1.0;
    box-flex-group:2;
    -webkit-box-flex-group:2;
    -moz-box-flex-group:2;
}
#div3{/*给div3添加样式*/
    background-color: #FEB380;
    box-flex:1.0;
    -webkit-box-flex:1.0;
    -moz-box-flex:1.0; 
    box-flex-group:1;
    -webkit-box-flex-group:1;
    -moz-box-flex-group:1;
}

7. box-pack：规定水平框中的水平位置或者垂直框中的垂直位置。
语法：
box-pack: start|end|center|justify;

取值：

值	描述
start（默认值）	对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间）。对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。
end	对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是所有剩余的空间）。
center	均等地分割多余空间，其中一半空间被置于首个子元素前，另一半被置于最后一个子元素后。
justify	在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）。

说明：
空间太多如何处理，可利用空间的分布取决于两个属性值：box-align 和 box-pack。

属性“box-pack”一般管理水平方向上的空间分布（根据box-orient的值，也可管理垂直方向），有以下四个可能属性：start、end、 justify、 or center。如，start 所有盒子在父盒子的左侧，余下的空间在右侧。

属性“box- align”管理垂直方向上的空间分布，有以下五个可能属性之：start、 end,、center、 baseline和 stretch。如：start 每个盒子沿父盒子的上边缘排列，余下的空间位于底部。

示例代码8：设置所有盒子在父盒子的右侧（修改样式表文件）

 #main{/*设置外围容器样式*/
    margin:auto;
    border:1px solid blue;
    width: 400px;
    height: 200px;
    margin-top:50px;
    /*Firefox*/
    display:-moz-box;
    -moz-box-orient:horizontal;
    -moz-box-pack:end;
    /*Safari、Opera 以及 Chrome*/
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    -webkit-box-pack:end;
    /*W3C*/
    display:box;
    box-orient:horizontal;
    box-pack:end;
 }
 #div1{/*给div1添加样式*/
    width: 100px;
    height: 50px;
    background-color: #00B366;
 }
 #div2{/*给div2添加样式*/
    width: 100px;
    height: 50px;
    background-color: #80C8FE;
 }
 #div3{/*给div3添加样式*/
    width: 100px;
    height: 50px;
    background-color: #FEB380;
 }

设置所有盒子在父盒子的中间（center），如下图左；设置垂直（box-orient）且盒子在父盒子的左侧（start），如下图右

8. box-align：规定如何对齐框的子元素。
语法：
box-align: start|end|center|baseline|stretch;

取值：

值	描述
start	对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。对于反方向的框，每个子元素的下边缘沿着框的底边放置。
end	对于正常方向的框，每个子元素的下边缘沿着框的底边放置。对于反方向的框，每个子元素的上边缘沿着框的顶边放置。
center	均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。
baseline	如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。
stretch（默认值）	拉伸子元素以填充包含块。

说明：控制垂直方向（box-pack的相对方向）。
示例代码9：设置所有盒子在父盒子的右侧（修改样式表文件）

#main{/*设置外围容器样式*/
margin:auto;
border:1px solid blue;
width: 400px;
height: 200px;
margin-top:50px;

/*Firefox*/
display:-moz-box;
-moz-box-orient:vertical;
-moz-box-pack:justify;
-moz-box-align:center;
/*Safari、Opera 以及 Chrome*/
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-pack:justify;
-webkit-box-align:center;
/*W3C*/
display:box;
box-orient:vertical;
box-pack:justify;
box-align:center;
}

9. box-lines：规定当超出父元素框的空间时，是否换行显示。
语法：
box-lines: single|multiple;

取值：

值	描述
single（默认值）	所有子元素会被放置在单独的行或列中。（无法匹配的元素会被视为溢出）。
multiple	允许框扩展为多行，以容纳其所有子元素。

说明：
空间不足怎么办，与传统的盒模型一样，overflow属性用来决定其显示方式。为了避免溢出，你可以设置box-lines为multiple使其换行显示。有待验证。

二．DIV+CSS模式简介

Web标准主要由三部分组成：结构（structure）、表现（presenation）和行为（behavior）。

(1)结构标准对应的主要语言是XHTML
(2)表现标准对应的主要语言是CSS
(3)行为标准对应的主要语言是JavaScript

制作一个静态页面，主要用到的就是XHTML与CSS，所以制作标准页面的技术就是XHTML+CSS。而我们经常使用DIV进行页面的整体布局结构（以前使用表格布局），用CSS修饰内容的外观样式，从而形成了DIV+CSS模式。

DIV其实是盒子模型的一个实例，所以深刻的理解盒子模型对网页布局非常重要。

yippeelyl

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS"盒子模型"

学习CSS"盒子模型" 盒子模型（Box Model）是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容大。可以通
复制链接

扫一扫