彻底弄懂CSS盒子模式

日期：2013-12-16 来源：攀枝花惠康网络公司

理解CSS盒子模子

这些属性我们可以把它转移到我们日常糊口中的盒子（箱子）上来理解，日常糊口中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的工具；而填充就是怕盒子里装的工具（珍贵的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子自己了；至于鸿故ё衮声名盒子摆放的时辰的不能全数堆在一路，要留必然空位连结通风，同时也为了便利掏出嘛。在网页设计上，内容常指文字、图片等元素，可是也可所以小盒子（DIV嵌套），与现实糊口中盒子分歧的是，现实糊口中的工具一般不能年夜于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，琅缦沔的工具年夜过盒子自己最多把它撑年夜，但它不会损坏的。填充只有宽度属性，可以理解为糊口中盒子里的抗震辅料厚度，而边框有巨细和颜色之分，我们又可以理解为糊口中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，鸿沟就是该盒子与其它工具要保留多年夜距离。在现实糊口中，假设我们在一个广场上，把分歧巨细和颜色的盒子，以必然的间隙和挨次摆放好，最后年夜广场上空往下看，看到的图形和结构就近似我们要做的网页版面设计了，如下图。

}

此刻对CSS盒子模式理解若干好多了，如不美观还不够透辟，继续往下看，我会在后面举例，并延用盒子的概念来诠释它。

height: 50px;

改变我们的思绪

传统的前台网页设计是这样进行的：按照要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件自由的画出来，最后再切成小图，再不自由的经由过程设计HTML生成页面，改用CSS排版后，我们要改蹦这个思惟，此时我们首要考虑的是页面内容的语义和结构，因为一个强CSS节制的网页，等做好网页后，你还可以轻松的调你想要的网页气概，况且CSS排版的此吐矣闽目的是让代码易读，区块分明，强化代码重用，所以结构很主要。如不美观你想说我的网页设计的很复杂，到后来能不能实现那样的效不美观？我要告诉你的是，如不美观用CSS实现不了的效不美观，一般用表格也是很难实现的，因为CSS的节制能力其实是太强年夜了，顺便说一点的是用CSS排版有一个很适用的益处是，如不美观你是接单做网站的，如不美观你用了CSS排版网页，做到后来客户有什么过错劲，出格是色调的话，那么改起来就相当轻易，甚至你还可以定制几种气概的CSS文件供客户选择，又或者写一个轨范实现动态挪用，让网站具有动态改变气概的功能。

margin: 0px auto;

在真正起头结构实践之前，再来熟悉一件事――结构和默示相分手，这也用CSS结构的特色地址，结构与默示分手后，代码才精练，更新才便利，这不恰是我们进修CSS的目的地址吗？举个例来说P是结构化标签，有P标签的处所暗示这是一个段落区块，margin是默示属性，我要让一个段落右缩进2字高，有些人会想到加空格，然后不竭地加空格，但此刻可以给P标签指定一个CSS样式：P {text-indent: 2em;}，这样结不美观body内容部门就如下，这没有外加任何默示节制的标签：

<p>加进海角社区有一段时刻了，但一向没有时刻写点工具，今天写了一篇有关CSS结构的文章，并力争经由过程一种通俗的说话来声名常识点，还配以实例和图片，相信对初学CSS结构的人会带来必然的辅佐。</p>

#content p {

如不美观还要对这个段落加上字体、字号、布景、行距等润色，直接把对应的CSS加进P样式里就行了，不用像这样来写了：

再直接列一段代码加深理解结构和默示相分手：

用CSS排版

用CSS排版减小网页文件体积

像膳缦沔我做的阿谁版面，一共分为四个区块，每个区块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次挪用了(用class挪用，而不是ID)，只要改变其中的文字内容就可以生成气概统一的众多板块了，它的样式和结构代码是（请不要直接复制生成网页，把下面代码分袂粘贴到网页中它们应在的位置）：

第一种体例是结构默示相分手，内容部门代码简单吧，如不美观还有更多的图片列表的话，那么第一种CSS结构体例就更有优势，我打个例如你好理解：我在BODY向你介绍一小我，我只对你说他是一小我，至于他是一个什么样的人，有多高，是男是女，你去CSS那儿那里查下就知道。这样我在BODY的工作酒撇

文章来源：攀枝花惠康网络公司

惠康网络，是一家专业从事攀枝花网站建设，攀枝花网站制作，攀枝花网站设计公司，提供网站建设一条龙服务（网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广），惠康网络立足攀枝花，辐射全中国，攀枝花惠康网络的客户已经遍布国内各地大中小城市，我们高效优质的网站建设服务深受用户好评。