CSS知识点——盒子布局及一些常用属性

- 盒子布局

先上一张图，方便理解后面的布局内容

盒子布局的主体通常为 div 标记（分区标签），这里不得不提一下 span 标签，它也是一个区域标签，但是区别在于：

span是一个行内标签，其内部的元素不会换行；
div为块级元素，其行内的元素会自动换行
div一般可包含span,span不包含div;
在大部分的情况下，span是可以替代div标签的

盒子布局——百度百科介绍

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

CSS （Cascading Style Sheet）可译为“层叠样式表 ”或“级联样式表”，它定义如何显示HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性，可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。对于是盒子的元素，如果没有特殊设置，其默认总是占独立的一行，宽度为浏览器窗口的宽度，在其前后的元素不管是不是盒子，都只能排列在它的上面或者下面，即上下累加着进行排列。HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成，即内容区（content）、填充(padding)、边框(border)和空白边(margin)。 CSS 为四个部分定义了一系列相关属性，通过对这些属性的设置可以丰富盒子的表现效果。

敲黑板~

HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成，即内容区（content）、填充(padding)、边框(border)和空白边(margin)。

这是盒子布局的重点，因为在按照盒子布局设计网页的过程中，我们往往是靠着设置这些属性来实现功能的。

这样一来，我们便能看懂开局的那张图了，所以：
盒子的实际高（宽）度 = content + padding + Border + Margin

到这里，我们还是对以上的属性不是很熟悉，我们一起来看看API：

padding

简写属性在一个声明中设置所有内边距属性。

说明
这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

注释：不允许使用负值。

例子 1

padding:10px 5px 15px 20px;

上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px

Border

简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：
border-width
border-style
border-color
如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。

默认值： not specified
继承性： no
版本： CSS1
JavaScript 语法： object.style.border=“3px solid blue”

可能的值：
border-width 规定边框的宽度。参阅：border-width 中可能的值。
border-style 规定边框的样式。参阅：border-style 中可能的值。
border-color 规定边框的颜色。参阅：border-color 中可能的值。
inherit 规定应该从父元素继承 border 属性的设置。

margin

简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
说明：这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
注释：允许使用负值。

例子 1

margin:10px 5px 15px 20px;

上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px

一些常用的属性

font-family:

font-family 规定元素的字体系列。

font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

有两种类型的字体系列名称：
指定的系列名称：具体字体的名称，比如：“times”、“courier”、“arial”。
通常字体系列名称：比如：“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”
提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。
注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。

font-size:

font-size 属性可设置字体的尺寸。
说明
该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。
各关键字对应的字体必须比一个最小关键字相应字体要高，并且要小于下一个最大关键字对应的字体。

color:

定义和用法
color 属性规定文本的颜色。
这个属性设置了一个元素的前景色（在 HTML 表现中，就是元素文本的颜色）；光栅图像不受 color 影响。这个颜色还会应用到元素的所有边框，除非被 border-color 或另外某个边框颜色属性覆盖。
要设置一个元素的前景色，最容易的方法是使用 color 属性。
默认值： not specified
继承性： yes
版本： CSS1
JavaScript 语法： object.style.color="#FF0000"

font-weight:

width:

定义和用法
width 属性设置元素的宽度。
说明
这个属性定义元素内容区的宽度，在内容区外面可以增加内边距、边框和外边距。
行内非替换元素会忽略这个属性。
默认值： auto
继承性： no
版本： CSS1
JavaScript 语法： object.style.width=“50px”

height:

background-image:

定义和用法
background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。
详细说明
background-image 属性会在元素的背景中设置一个图像。
根据 background-repeat 属性的值，图像可以无限平铺、沿着某个轴（x 轴或 y 轴）平铺，或者根本不平铺。
初始背景图像（原图像）根据 background-position 属性的值放置。
默认值： none
继承性： no
版本： CSS1
JavaScript 语法： object.style.backgroundImage=“url(stars.gif)”

background-repeat:
定义和用法
background-repeat 属性设置是否及如何重复背景图像。
默认地，背景图像在水平和垂直方向上重复。
详细说明
background-repeat 属性定义了图像的平铺模式。
从原图像开始重复，原图像由 background-image 定义，并根据 background-position 的值放置。
默认值： repeat
继承性： no
版本： CSS1
JavaScript 语法： object.style.backgroundRepeat=“repeat-y”

float:
定义和用法
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
默认值： none
继承性： no
版本： CSS1
JavaScript 语法： object.style.cssFloat=“left”

list-style-type:

例子：

<html>
<head>
<style type="text/css">
ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}
</style>
</head><body>
<p>Type circle:</p>
<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul><p>Type square:</p>
<ul class="square">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul><p>Type upper-roman:</p>
<ol class="upper-roman">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol><p>Type lower-alpha:</p>
<ol class="lower-alpha">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol></body>
</html>

做个小网页

先上效果图：

不是很漂亮，大家可以后期自己调整

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>css-Example</title><link href="style/css.css" rel="stylesheet" type="text/css" /><link href="style/div.css" rel="stylesheet" type="text/css" />
</head>
<body><div id="box"><div id="top"><ul><li>主页</li><li>工作介绍</li><li>公司简介</li><li>论坛社区</li><li>联系方式</li></ul></div><div id="top2"><Img src="data:images/2402.jpg" /><br /><p>天空工作室是专业从事互联网相关业务开发的公司。专门提供全方位的优质服务和最专业的网站建设方案为企业打造全新电子商务平台。天空工作室成立于1999年,已经成为国内著名的网站建设提供商。八年的风雨历程已成功的为中国教育部、中国文化部、国有资监督管理委员会等部门,建设了完善的网站项目。</p></div><div id="centers"><div id="main-left"><Img src="data:images/2403.png" /><br/></div><div id="main-main"><Img src="data:images/2404.png" /></br></div><div id="main-right"><Img src="data:images/2405.png" /></br></div></div><div id="bottom"><br />点点互动<span>|</span>版权所有<span>|</span>网站建设<span>|</span>网站制作<span>|</span>网站设计<span>|</span>网页设计<span>|</span>网站推广<br/>业务专用邮箱:sky@china-ncw.com 联系电话:010-898888 010-000000<br  />Copyright @ 2009 sky-ncw.com.All Right Reserved V2.0 </div></div>
</body>
</html>

css.css

*{margin:0px;border:0px;padding:0px;
}body{font-family:"宋体";font-size:12px;color:#969696;
}

div.css

#box {width:100%;height:900px;background-image:url(../images/2401.jpg);background-repeat:repeat-x;
}#top {padding-top:10px;margin-left:283px;width:550px;height:20px;font-size:16px;font-family:"微软雅黑";color:#FFF;
}#top li{width:110px;text-align:center;float:left;list-style-type:none;
}#top2{width:640px;height:360px;margin:20px 0px 0px 285px;font-size:15px;font-family:"宋体";color:#379b99;line-height:22px;}#main-left{width:234px;height:320px;margin-top:35px;margin-left:40px;float:left;line-height:20px;
}#main-main{width:234px;height:320px;margin-top:35px;margin-left:40px;float:left;line-height:20px;
}#main-right{width:234px;height:320px;margin-top:35px;margin-left:40px;float:left;line-height:20px;
}#centers{position:absolute;left:170px;
}#bottom{width:100%;height:100px;background-image:url(../images/2406.png);background-repeat:repeat-x;color:#000;text-align:center;line-height:20px;position:fixed;bottom:0;
}