DIV教程之CSS网页结构的中心内容:CSS盒模子

只看该作者 · 发表于 2015-1-16 00:03:17

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
网页制造WEB文章简介：本节的内容十分主要，由于盒模子是CSS定位结构的中心内容。夙昔面章节中，读者进修了结构网页基础办法，只需使用p元素和列表元素，便可完成页面年夜部分的结构事情。可是后面进修的常识更注意理论操纵，读者其实不了解结构的道理，经常在结构页面的过程当中碰到没法了解的成绩
CSS盒模子
本节的内容十分主要，由于盒模子是CSS定位结构的中心内容。夙昔面章节中，读者进修了结构网页基础办法，只需使用p元素和列表元素，便可完成页面年夜部分的结构事情。可是后面进修的常识更注意理论操纵，读者其实不了解结构的道理，经常在结构页面的过程当中碰到没法了解的成绩，必要一步步反复地“试错”才干完美结构代码的编写。进修本章的盒模子的常识今后，读者将具有较完美的结构不雅，基础可做到在代码编写前就“成竹在胸”。
11.3.1甚么是CSS盒模子
XHTML中年夜部分的元素（出格是块状元素）都能够看作一个盒子，而网页的元素的定位实践就是这些年夜巨细小的盒子在页面中的定位。这些盒子在页面中是“活动”的，当某个块状元素被CSS设置了浮动属性，这个盒子就会“流”到上一行。网页结构即存眷这些盒子在页面中怎样摆放、怎样嵌套的成绩，而这么多盒子摆在一同，最必要存眷的是盒子尺寸盘算、是不是活动等要素。
为何要把XHTML元素作为盒模子来研讨呢？由于XHTML元素的特征和一个盒子十分类似，如1.18所示。

登录/注册后可看大图

1.18盒模子表示图
年夜多半XHTML元素的布局都相似于1.18所示，除包括的内容（文本或图片）外，另有内边距、边框和外边距一层层的包裹。读者在结构网页和定位XHTML元素时要充实地思索到这些要素，才能够更自若地玩弄这些盒子。
外边距属性即CSS的margin属性，CSS中可拆分为margin-top（顶部外边距）、margin-bottom（底部外边距）、margin-left（右边外边距）和margin-right（右侧外边距）。CSS的边框属性（border）和内边距属性（padding）一样可拆分为4边。在Web尺度中，CSS的width属性即为盒子所包括内容的宽度，而全部盒子的实践宽度即为：
盒子宽度=padding-left+border-left+margin-left+width+padding-right+border-right+margin-right
响应地，CSS的height属性即为盒子所包括内容的高度，而全部盒子的实践高度即为：
盒子高度=margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom
11.3.2外边距的把持
在CSS中，margin属性能够一致设置，也能够高低摆布分隔设置。在D:web目次下创立网页文件（XHTML1.0），定名为box_margin.htm，编写box_margin.htm文件代码如代码11.17所示。
代码11.17外边距设置：box_margin.htm
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>外边距设置</title>
<styletype="text/css">
*{margin:0px;}
#all{width:400px;
height:300px;
margin:0pxauto;
background-color:#ccc;}
#a,#b,#c,#d,#e{width:150px;
height:50px;
text-align:center;
line-height:50px;
background-color:#fff;}
#a{margin-left:5px;
margin-bottom:20px;}
#b{margin-left:5px;
margin-right:5px;
margin-top:6px;
float:left;}
#c{margin-bottom:5px;}
#e{margin-left:5px;
margin-top:15px;}
</style>
</head>
<body>
<pid="all">
<pid="a">a盒子
<pid="b">b盒子
<pid="c">c盒子
<pid="d">d盒子
<pid="e">e盒子

</body>
</html>
为了更便利看到p的体现，笔者给内部p设置了浅灰色背景致，并给外部p设置了红色背景致。在扫瞄器地点栏输出http://localhost/box_margin.htm，扫瞄效果如1.19所示。这个示例十分典范，出格是b盒子、c盒子和d盒子之间的干系，笔者作干系图如1.20所示。

登录/注册后可看大图

1.19外边距设置1.20外边距干系图
因为b盒子设置了向左浮动，以是紧随厥后的c盒子天然“流”下去，和b盒子并列统一行，如1.20所示，b盒子的高度为：
height+margin-top=56（像素）
而c盒子的高度为：
height+margin-bottom=55（像素）
可见，在这一行中c盒子上面留有1像素的清闲，恰是d盒子使用这1像素的空间“流”下去，以是b盒子、c盒子和d盒子存在于统一行。
—申明：读者能够实验把b盒子的顶部边距设置为5像素，这时候b盒子和c盒子高度分歧。d盒子没法“流”下去，d盒子将主动换行，位于b盒子上面。
11.3.3边框的款式设置
边框（border）作为盒模子的构成部分之一，其款式十分受器重。边框的CSS款式设置不仅影响到盒子的尺寸，还影响到盒子的表面。边框（border）属性的值有3种，边框尺寸（像素）、边框范例和边框色彩（十六进制）。在D:web目次下创立网页文件（XHTML1.0），定名为box_border.htm，编写box_border.htm文件代码如代码11.18所示。
代码11.18边框款式设置：box_border.htm
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>边框款式设置</title>
<styletype="text/css">
*{margin:0px;}
#all{width:400px;
height:270px;
margin:0pxauto;
background-color:#ccc;}
#a,#b,#c,#d,#e,#f,#g{width:160px;
height:50px;
text-align:center;
line-height:50px;
background-color:#eee;}
#a{width:380px;
margin:5px;
border:1pxsolid#333;}
#b{border:20pxsolid#333;
float:left;}
#c{margin-left:5px;
border:20pxgroove#f00;}
#d{margin-left:5px;
border:2pxdashed#000;
float:left;}
#e{margin-left:5px;
border:2pxdotted#000;
float:left;}
#f{margin:5px;
border-left:2pxsolid#fff;
border-top:2pxsolid#fff;
border-right:2pxsolid#333;
border-bottom:2pxsolid#333;
float:left;}
#g{margin-top:5px;
border-top:2pxgroove#333;}
</style>
</head>
<body>
<pid="all">
<pid="a">a盒子
<pid="b">b盒子（solid范例）
<pid="c">c盒子（groove范例）
<pid="d">d盒子（dashed范例）
<pid="e">e盒子（dotted范例）
<pid="f">f盒子
<pid="g">g盒子

</body>
</html>
为了更便利看到p的体现，笔者给内部p设置了#ccc背景致，并给外部p设置了#eee背景致。在扫瞄器地点栏输出http://localhost/box_border.htm，扫瞄效果如1.21所示。

登录/注册后可看大图

1.21边框款式设置
这个例子使XHTML工具看起来更像个盒子了，只是边框只是盒子包装中的一层，最外层的包装是不成见的外边距。边框的宽度盘算十分主要，假如读者定位元素要充实思索边框宽度，如1.21所示，边框的经常使用设置办法为：
border:宽度范例色彩;
这是4条边框一致的设置办法，假如要分隔设置4条边框，将border改成border-top（顶部边框）、border-bottom（底部边框）、border-left（右边框）和border-right（右侧框）。而修正“范例”能够修正成分歧模样的边框线条，经常使用的为solid（实线）、dashed（虚线）、dotted（点状线）、groove（平面线）、double（双线）、outset（浮雕线）等，读者能够逐一实验。
11.3.4内边距的设置
内边距（padding）相似于HTML中表格单位格的添补属性，即盒子边框和内容之间的间隔。内边距（padding）和外边距（margin）很类似，都是不成见的盒子构成部分，只不外内边距（padding）和外边距（margin）之间夹着边框。在D:web目次下创立网页文件（XHTML1.0），定名为box_padding.htm，编写box_padding.htm文件代码如代码11.19所示。
代码11.19内边距的设置：box_padding.htm
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>内边距的设置</title>
<styletype="text/css">
*{margin:0px;}
#all{width:360px;
height:300px;
margin:0pxauto;
padding:25px;
background-color:#ccc;}
#a,#b,#c,#d,#e,#f,#g{width:160px;
height:50px;
border:1pxsolid#000;
background-color:#eee;}
p{width:80px;
height:30px;
padding-top:15px;
background-color:#cc9;}
#a{padding-left:50px;}
#b{padding-top:50px;}
#c{padding-right:50px;}
#d{padding-bottom:50px;}
</style>
</head>
<body>
<pid="all">
<pid="a">
a盒子

<pid="b">
b盒子

<pid="c">
c盒子

<pid="d">
d盒子


</body>
</html>
为了更便利看到p的体现，笔者给内部p设置了#ccc背景致，并给外部p设置了#eee背景致，而p元素设置了#cc9背景致。在扫瞄器地点栏输出http://localhost/box_padding.htm，扫瞄效果如1.22所示。

登录/注册后可看大图

1.22内边距的设置
11.3.5盒模子兼容成绩
微软的IE6.0今后的版本在扫瞄器内嵌了两种体现形式：尺度形式和兼容形式。在尺度形式中，扫瞄器依据W3C所定的标准来显现页面；而在兼容形式中，页面将以IE5.0，乃至IE4.0的显现页面的体例来体现，使之前的网页也能一般显现。这两种形式最年夜的成绩就是盒形式的兼容成绩，可是，IE在兼容形式下运转的盒形式仍然在最新版本的IE7.0保存着，一旦页面利用兼容形式扫瞄，IE7.0将酿成跟IE5.0一样不兼容Web尺度。
不但IE扫瞄器，其他扫瞄器都有相似的多种剖析形式，如Opera扫瞄器、FireFox扫瞄器等。利用扫瞄器分歧的形式经由过程分歧的DTD（文档范例声明）来完成，在初期的HTML页面制造中，html声明部分间接利用的：
<html></html>
如许的页面在扫瞄器中扫瞄时会利用兼容形式，假如HTML页面利用以下DTD声明。
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
或：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
前者代表HTML4.0的严厉范例的文档范例声明，后者代表XHTML的文档范例声明，这2种DTD将使扫瞄器利用尺度形式。
—申明：固然IE6.0和IE7.0扫瞄器对Web尺度没有完成完整兼容，但相对之前的版本，IE尺度化水平进步了良多。以是读者制造尺度页面，应利用XHTML的DTD。

表现和结构分离，在团队开发中更容易分工合作而减少相互关联性

只看该作者 · 发表于 2015-1-17 23:52:56

AdobeDreamweaverCS5软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的AdobeCSLive在线服务AdobeBrowserLab集成。

只看该作者 · 发表于 2015-1-26 13:39:30

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

只看该作者 · 发表于 2015-2-4 20:31:08

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

只看该作者 · 发表于 2015-2-10 07:41:42

学Dreamweaver技术的过程其实是一个增加信心的过程。

只看该作者 · 发表于 2015-3-1 05:44:18

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

只看该作者 · 发表于 2015-3-10 13:02:12

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-3-17 08:08:25

可以使用 CSS 检查工具进行设计。

只看该作者 · 发表于 2015-3-24 04:16:30

滚动条)层属性--溢出(visible/hidden/scroll/auto)

		自动登录	找回密码
密码			立即注册

[DIV+CSS] DIV教程之CSS网页结构的中心内容:CSS盒模子

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子