学习笔记 第十一章 CSS3布局基础

第11章   CSS3布局基础

【学习重点】

• 了解CSS2盒模型。
• 设计边框样式。
• 设计边界样式。
• 设计补白样式。
• 了解CSS3盒模型。

11.1  CSS盒模型基础

页面中所有元素基本显示形态为方形的盒子（Box），根据盒模型规则，网页中所有元素对象都被放在一个盒子里，设计师可以通过CSS来控制这个盒子的显示方式。

11.1.1 盒模型结构

Box具有如下特点：

• 每个盒子都有：边界、边框、填充、内容4个属性。
• 每个属性都包括4个部分：上、右、下、左。属性的四部分可以同时设置，也可以分别设置。

内容（content）时盒子里装的东西，填充（padding）是怕盒子里装的东西损坏而添加的抗震辅料，边框（border）就是盒子本身，边界（margin）是盒子与盒子之间的空隙。

网页中，内容可以是小盒子（嵌套结构），CSS盒子具有填写，里面的东西大过盒子本身最多把它撑大，但不会损坏盒子。

网页中任何元素都可以视为一个盒子。

11.1.2  定义大小

CSS盒子使用width和height定义内容区域（content）的大小。

对于一个CSS盒模型来说，它的实际宽度/高度就等于内容区域的宽度/高度加上两倍的边界、边框和补白之和。

在IE怪异解析模式下（部分浏览器也支持怪异模式，如Firefox和Opera等），CSS的width/height属性表示content、padding和border的width/height之和。

用户也可以通过下面4个属性灵活控制CSS盒模型的大小，这些属性在网页弹性布局中非常有用。

• min-width：最小宽度；
• max-width：最大宽度；
• min-height：最小高度；
• max-height：最大高度。

11.1.3 定义边框

CSS使用border定义边框样式，border包括3个子属性：border-style（边框样式）、border-color（边框颜色）和border-width（边框宽度）。

1. 定义宽度

   1. 直接在属性后面指定宽度值。

      <style type="text/css">
      border-bottom-width: 12px;
      border-top-width: .2em;
      </style>

   2. 使用关键字，如thin、medium和thick。

      <style type="text/css">
      border-width: thick;
      </style>

   3. 单独为元素的某条边框设置宽度。

      <style type="text/css">
      border-bottom-width: 12px;
      border-top-width: .2em;
      </style>

   4. 使用border-width属性快速定义。

      <style type="text/css">
      .div{
            border-width: 4px;   /*定义四边都为4px*/
      }
      #title{
            border-width: 2px 4px;   /*定义上下边为2px，左右边为4px*/
      }
      #article{
            border-width: 2px 4px 6px;   /*定义上边为2px，左右边为4px，下边为6px*/
      }
      #ar2{
            border-width:2px 4px 6px 8px;   /*定义上边为2px，右边为4px，下边为6px，左边为8px*/
      }
      </style>

2. 定义颜色——颜色名、RGB颜色值或16进制颜色值

3. 定义样式

边框样式有如下几种：

• • • none：默认值，无边框，不受任何指定的border-width值影响；
    • hidden：隐藏边框，IE不支持；
    • dotted：点线边框；
    • dashed：虚线边框；
    • solid：实线边框；
    • double：双线边框，两条线以及间隔宽度都等于指定的border-width值；
    • groove：根据border-color值定义3D凹槽；
    • ridge：根据border-color值定义3D凸槽；
    • inset：根据border-color值定义3D凹边；
    • outset：根据border-color值定义3D凸边。

11.1.4 定义边界

元素的边距由margin属性控制，margin定义了元素和其它相邻元素的距离。margin属性有4个子属性：margin-top、margin-right、margin-bottom和margin-left。

margin可以取负值，这样能够强迫元素偏移原来位置，实现相对定位功能。

11.1.5 定义补白

补白是用来调整元素包含的内容和元素边框的距离，由CSS的padding属性定义。

与边界margin不同补白不可以为负值。补白和边界一样都是透明的，当设置元素的背景色或边框后，才能感觉到补白的存在。

11.2  CSS3完善盒模型

CSS3改善了传统盒模型结构，增强盒子构成要素的功能，扩展了盒模型显示的方式。具体描述如下：

• 改善结构：为盒子新增了轮廓区；
• 增强功能：
  • 内容区增强CSS自动添加内容功能，增强内容溢出、换行功能；
  • 允许多重定义背景图、控制背景图显示方式等；
  • 增加背景图边框、多重边框、圆角边框等动能；
  • 完善margin：auto；
  • 布局特性。
• 扩展显示：完善传统的块显示特性，增加弹性、伸缩盒显示功能，丰富网页布局手段。

11.2.1 定义显示方式

为了兼顾IE怪异模式，CSS3对盒模型进行了改善，定义了box-sizing属性，能够事先定义盒模型的尺寸解析方式。基本语法如下：

box-sizing：content-box | border-box | inherit;

• conten-box：属性值维持CSS2.1盒模型的组成模式，元素width/height=border+padding+content。
• border-box：属性值重新定义CSS2.1盒模型组成模式，元素width/height=content。

目前，Webkit引擎支持-webkit-box-sizing私有属性，Mozilla Gecko引擎支持-moz-box-sizing私有属性，Presto引擎和IE浏览器直接支持该属性。

11.2.2 定义元素尺寸大小

CSS3新增了resize属性，允许用户通过拖动的方式改变元素的尺寸。主要用于可以使用overflow属性的任何容器元素中。

resize: none | both | horizontal | vertical | inherit;

resize属性初始值为none，适用于所有overflow属性不为visible的元素。取值说明如下：

• none：浏览器不提供尺寸调整机制，用户不能操纵机制调节元素的尺寸。
• both：浏览器提供双向尺寸调整机制，允许用户调节元素的宽度和高度；
• horizontal：浏览器提供单向水平调整机制，允许用户调节元素的宽度；
• vertical：浏览器提供单向垂直尺寸的调整机制，允许用户调节元素的高度；
• inherit：默认继承。

除了IE浏览器外，其他最新版本主流浏览器都允许元素的缩放，但尚未完全支持，部分仅允许双向调整。

11.2.3 溢出处理

overflow时CSS2.1规范中的特性，而overflow-x和overflow-y属性则是CSS3基础盒模型中新加入的特性。

overflow属性定义当一个块级元素的内容溢出了元素的框时，是否剪切显示。

overflow-x属性定义了对左右边（水平方向）的剪切，而overflow-y属性定义了对上下边（垂直方向）的剪切。基本语法如下：

overflow-x: visible | hidden | scroll | auto | no-display | no-content;
overflow-y: visible | hidden | scroll | auto | no-display | no-content;

overflow-x和overflow-y属性的初始值为visible，适用于非替换的块元素，或非替换的行内块元素。取值说明如下：

• visible：不剪切内容，也不添加滚动条。元素将被剪切为包含对象的窗口大小，且clip属性设置将失效；
• auto：在需要时剪切内容并添加滚动条。该属性为body和textarea元素的默认值；
• hidden：不显示超出元素尺寸的内容；
• scroll：当内容超出元素尺寸，则overflow-x显示为横向滚动条，overflow-y显示为纵向滚动条；
• no-display：当内容超出元素尺寸，则不显示元素，此时类似添加了display:none声明；
• no-content：当内容超出元素尺寸，则不显示内容，此时类似添加了visibility:hidden声明。

11.2.4 定义轮廓

outline属性可以定义块元素的轮廓线，该属性在CSS2.1规范中已被明确定义，CSS3增强了该特性。

在元素周围绘制一条轮廓线，可以起到突出元素的作用。基本语法如下：

outline:[outline-color] || [outline-style] || [outline-width] || [outline-offset] | inherit

• <outline-color>：定义轮廓边框颜色；
• <outline-style>：定义轮廓边框轮廓；
• <outline-width>：定义轮廓边框宽度；
• <outline-offset>：定义轮廓偏移位置的数值；
• inherit：默认继承。

11.2.5 定义轮廓样式

1. 设置宽度——outline-width

   outline-width: thin | medium | thick | <length> | inherit;

   初始值为medium，适用于所有元素。

2. 设置样式——outline-style

   outline-style: auto | <border-style> | inherit;

   初始值为none，适用于所有元素。

3. 设置颜色——outline-color

   outline-color:<color> | invert | inherit;

   初始值为invert（执行颜色反转），适用于所有元素。

4. 设置偏移——outline-offset

   outline-offset:<length> | inherit;

   初始值为0，适用于所有元素。

11.2.6 定义多色边框

border-color属性可以设置边框的颜色。不过，CSS3增强了这个属性的功能，使用它可以设置更多的颜色。基本语法如下：

border-color:<color>;

与CSS2中的border-color属性可以混合使用，当为该属性设置一个颜色值时，则表示为边框设置纯色，如果设置n个颜色值，切边框宽度为n像素，那么就可以在该边框上使用n种颜色，每种颜色显示1像素的宽度。如果边框宽度是10个像素，但是只声明了5种颜色，那么最后一个颜色将被添加到剩下的宽度。

border-color派生了4个边框颜色属性：border-top-color、border-right-color、border-bottom-color、border-left-color。

11.2.7 定义边框背景

CSS3增加了border-image属性，来模拟background-image属性功能，且功能更加强大。

border-image:none | <image> [<number> | <percentage>]{,}[/<border-width>{,}

• none：默认值，表示边框无背景图；
• <image>：使用绝对或相对URL地址指定边框的背景图像；
• <number>：设置边框宽度或者边框背景图像大小，使用固定像素值表示；
• <percentage>：设置边框背景图像大小，使用百分比表示。

CSS3将border-image分成了8个部分，使用8个子属性分别定义：border-top-image、border-right-image、border-bottom-image、border-left-image、border-top-right-image、border-top-left-image、border--bottom-left-image、border-bottom-right-image。

另外，根据边框背景图像的处理功能，border--image属性还派生了下面几个属性：

• border-image-source：定义边框的背景图像源，即图像URL；
• border-image-slice：定义如何裁切背景图像，与背景图像的定位功能不同；
• border-image-repeat：定义边框背景图像的重复性；
• border-image-width：定义边框背景图像的显示大小（即边框显示大小）；
• border-image-outset：定义边框背景图像的偏移位置。