CSS - 基本视觉格式化

CSS有一种基础的设计模式是盒模型，定义了Web页面中的元素是如何看作盒子来解析的。在CSS中主要有这几种盒模型：inline, inline-block，block, table, absolute position, float。每一个盒模型是由以下几个属性组合所决定的：display, position, float, width, height, margin, padding, border。不同类型的盒模型会产生不同的布局。

盒子模型

CSS 2.1的盒模型

W3C标准盒模型

.block {
    width: 300px;
    height: 200px; 
    margin: 20px;
    border: 2px solid red;
    padding: 30px;
}

从上面的代码中我们可以看到设置了300px的宽度和200px的宽度。下图是标准盒模型的示意图。

    

说明：上图中的所有内容是当前元素的盒模型，这个盒模型的尺寸就是我们在对元素进行布局的时候需要考虑的内容。也就是外盒尺寸的值。

外盒尺寸计算（元素空间尺寸）

eleemnt 空间宽度 = 外边距（左右） + 边框（左右）+ 内边距（左右）+ 内容宽度 （height）
eleemnt 空间高度 = 外边距（上下） + 边框（上下）+ 内边距（上下）+ 内容高度 (width)

内盒尺寸计算 （元素大小，从边框开始算起）

eleemnt 宽度 = 边框（左右）+ 内边距（左右）+ 内容宽度 （height）
eleemnt 高度 = 边框（上下）+ 内边距（上下）+ 内容高度  (width)

在上例子对应的长度：

外边距：margin 20
边框: border 2
内边距：padding 30
内容宽度：width 300
内容高度： heith 200

IE传统下盒模型（IE 6以下，不包含IE6或者QuicksMode下IE5.5+） 

.padding-border {
    width: 300px;
    height: 200px; 
    margin: 20px;
    border: 2px solid red;
    padding: 30px;
    background-color: gray ;
}

.no-padding-border {
    width: 300px;
    height: 200px; 
    background-color: gray ;

    position:absolute;
    left: 30px;
}

    

上面的例子是在IE5的模式下看到的页面效果。我们看到加不加padding & border，元素的盒模型尺寸没有发生变化。

内盒尺寸计算 （元素大小，从边框开始算起）

eleemnt 宽度 = 内容宽度 = 边框（左右）+ 内边距（左右）+ 元素内容宽度 
eleemnt 高度 = 内容高度 = 边框（上下）+ 内边距（上下）+ 元素内容高度 

外盒尺寸计算（元素空间尺寸）

eleemnt 空间宽度 = 外边距（左右） + 内容宽度

eleemnt 空间高度 = 外边距（上下） + 内容宽度

在上例子对应的长度

外边距：margin 20
边框: border 2
内边距：padding 30
内容宽度：width 300
内容高度： heith 200
元素内容宽度（实际对应W3C标准盒模型的内容宽度）：300 - 30 - 2 = 268 

元素内容高度（实际对应W3C标准盒模型的内容高度）：200 - 30 - 2 = 168

W3C标准盒模型和IE传统下盒模型的不同

现在我们来计算一下当前两种模式下外盒和内盒尺寸计算：

W3C标准盒模型  : 

eleemnt 空间宽度（外盒） = 20 * 2 + 2 * 2 + 30 * 2 + 300 = 404
eleemnt 空间高度（外盒） = 20 * 2 + 2 * 2 + 30 * 2 + 200 = 304
eleemnt 宽度（内盒） = 20 * 2 + 2 * 2 + 30 * 2 + 300 = 404
eleemnt 高度（内盒） = 20 * 2 + 2 * 2 + 30 * 2 + 200 = 304

IE传统下盒模型 : 

eleemnt 空间宽度（外盒） = 20 * 2 + 300 = 344
eleemnt 空间高度（外盒） = 20 * 2 + 200 = 244
eleemnt 宽度（内盒） = 300

eleemnt 高度（内盒） = 200

总结：

使用网上很常用的例子来说，包装箱

W3C标准盒模型：定义的width & height相当于实际物品的长宽，而对于padding和border则是内部填充物和包装纸板宽度。

IE传统下盒模型  ：定义的width & height则是包装箱的长宽。

二者之间的不同就是：以包装箱包装产品为主线

W3C标准盒模型则主要考虑的是物品，所以定义了with & height为物品的长宽。
IE传统下盒模型则是主要考虑当前的包装箱可以为那些物品包装，所以定义了width & height为包装箱的长宽。

CSS3 盒模型属性

为了解决上面的IE传统下盒模型与W3c盒模型的不同的问题，CSS3增添了一个盒模属性box-sizeing，能够实现定义盒模型的尺寸解析方式。

box-sizing: content-box | border-box | inherit

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

浏览器兼容性

* border-box：更利于布局，因为不会因为padding和border的关系导致盒模型长宽的变化。

行内元素的盒模型

我们需要理解内联内容如何布局。对于行内元素来说，这没有块级元素来的简单直接，

基本术语和概念

• 匿名文本：所有未包含在型内元素中的字符串。
• em框：em框在字体中定义，在CSS中font-size的值确定了各个em框的高度。
• 内容区：非替换元素中，内容区是元素中个字符的em框串在一起构成的框。
• 行间距：font-size值和line-height值之差。这个差实际上要分为两半，分别应用到内容区的顶部和底部。为内容区增加的两部分分别称为半间距。行间距只应用于非替换元素。
• 行内框：这个框通过向内容区增加行间距来描述。对于非替换元素，元素行内框的高度等于ling-height的值。
• 行框：这是包含该行中出现的行内框的最高端和最低点的最小框。

• 内容区类似于块级元素的内容框
• 行内元素的背景应用于内容去及所有内边距。
• 行内元素的边框要包围内容去及所有内边距和边框。
• 非替换元素的内边距，边框和外边距对行内元素生成框(也就是说不会影响元素行内框的高度)没有垂直效果，也就是在垂直方向没有作用。但是背景存在效果。
• 替换元素的边框和外边距对行内元素生成框(也就是说会影响元素行内框的高度)存在垂直效果。

行内非替换元素

这一小节将会学习一个小问题：如果行中只包含非替换元素或者匿名文本，如何构造行内框。

建立框

font-size值确定了内容区的高度。如果行内元素font-size为15px，则内容其的高度为15px。因为元素中所有em框的高度都是15px。如图：

接下来考虑元素的line-height，以及与font-size的值差。如果行内非替换元素的font-size为15px，line-height为21px，则相差6px。行间距一分为二，将其一半分别应用到内容区的顶部和底部。这就得到了行内框。

基线（顶线和底线之间的距离就相当与以前学习字母的四线三格）

           

vertical-align 

设置元素的垂直对齐方式

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

关于本篇更多内容访问w3c标准 - Css - （3）盒模型与线模型。