CSS布局教程

    清楚了CSS盒模型的基本概念、盒模型类型，以及包含块后，我们就可以深入探讨页布局的，模型了。布局模型与盒模型一样都是CSS最基、最核心的概念。但布局模型是建立在盒模型基础之上，又不同于我们常说的CSS布局样式或C布局模板。如果说布局模型是本，那么CSS模板就是末了，是外在的表现形式。CSS包含3种基本的布局模型，用英文概括为：Flow、Layer和Float。
1．Flow Model（流动模型）动模型是HTML默认布局模型，有人用normal表示，这种说法是可以理解的。实际上默认态下的HTML网页元素都是根据流动模型来分布网页内容的。所谓流动，顾名思义就如同流水一样，元素本身是被动的，它随着文档流自上而下按顺序动态布。流动布局只能根据元素排列的先后顺序来决定分布位置，要改变某个元素的位置，只能通过改变它在HTML文档流中的分布位置，所以说这是一种被动的布局模式。同时这种布局模式又是活动的，也就是说它的位置会随时发生改变，如果我们在元素前面增加另外一个元素，则它的位置会被向后推移。所有网页元素都以这种布局模型作为默认显示类型。流动布局模型的优势在于元素之间在错位、覆盖等问题，布局简单，符合人的浏览习惯。当然这种布局模型的弱点也是显而易见的，计师不能用单纯的流动布局模型设计出更艺术化的网页页面效果。
...

    上一节开头曾提到国内网页设计普遍存在的一个缺陷，即把12px作为网页默认字体大小来设置。px像素作为单位虽然比较精确，但它也限制了CSS设计网页的灵活性，使网页可性变得更加呆板。
    前96%以上的国内网民使用IE浏览器（或内核）。意味着中国大部分网站的字体大小是可以在IE浏览器上进进行调整的，而国外所有的主流网站都使用em作为字体单位，是可以调整瞧的。虽然px比em更加容易使用，但它会使网页失去灵活性。
...

    国内网页设计师一般喜欢使用12px定义网站默认字大小。lOpx太小，眼睛很易疲劳，14px虽然看得清楚，但很容易破坏布局，使页面失去美感。唯独12px在审美和视力方面都能恰到好以也难怪现在很多国内大型网站都把12px作为网页显示的标准字体大小。
    实际上，这种做法是不科学的，分析原因延因为他们没有考虑到特殊人群的阅读需要，对于弱浏览者来说，12px几乎等于lOpx的字体大小效果。浏览者可以补救的措施只能是借助浏览提供的视图功能来能来调节字体大小。例如:在Firefox浏览器中按Ctrl++组合键放大页面，按Ctrl+ -组合键缩小页面，或选择菜单命令可以轻易调整网页体大小。但对于Windows系统下的IE浏览器就会出现问题，对于定义为12px大小的字体，用户法通过[查看】1[字体大小】子菜单来调整网页字体大小。如果有兴趣的话，你试着打开国内三门户网站——新浪、网易、搜狐，都会存在无法用IE浏览器调整字体大小的缺陷，而国外的MSN、Google、华盛顿邮报等在IE浏览器里却是可调的。
...

    在网页设计中，最重要的莫过于网页的视觉效果。文字是网页的主体，设计师经常会花费大量精力用于调整字体、字体大小、颜色和样式。利用CSS强大功能和灵活性可以随意对子怀属性进设置和调整，但也需要读者有较高的经验积累。
    一般计算机中都安装有多种字体，浏览器会使用默认的字体浏览网页，如Windows中文版操作统默认字体是宋体或新宋体，；英文默认字体是Arial。在微软最新推出的Vista系统中，默认字体为微软雅黑。微软雅黑是微软公司为其新一代操作系统Vista开发的中文字体，它是迄今为止个人电脑上可以显示得最清晰的中文字体。该字体将作为默认字体取代目前XP系统下默认的中文宋体，以支持高清显示的ClearType功能。
...

    很多从事网页设计的计算机专业人员，对于网页制作技术都能够驾轻就熟，但对于网页富有艺术性和个性的设计却感到力不从心。特别是没有经过艺术设计专业训练的网页制作者，在初步掌握了网页制作技术的情况下，都渴望将自己的网页设计得更具创意和美感。
    目前，关于网页制作的讨论和介绍，多以技术性操作为主，而对于技术与艺术如何融合方面探索得就非常少了。本章将详细介绍网页排版中主要格式化要素，并演练用CSS控制版式的各种方法，帮助读者把CSS技术与网页编排紧密结合在一起，实现网页实用性与欣赏性相得益彰的设计效果。
...

    margin可以使用任何长度单位，像素、磅、英寸、厘米、em、百分比等。margin属性默认值为0，如果没有定义margin的值，则意味着元素没有边界。但在实际应用中，各种浏览器都会为一些元素预定义边界样式，如p，hl-h6、ul等。这样即使设计师不定义它们的margin值，但在显示时浏览器也会自动显示一定的边界。因此，一些元素虽然没有定义margin，但并不意味它们没有边界。
     aotu是一个自动计算的值，这个值一一般为0，也可以为其他值，这主要由具体浏览器来确定。auto还有一个重要作用就是用来实现元素居中显示，如果想用这种方法使整个页面居中，建议不要把所有的模块都套在一个div元素里。读者可以根据上沘面示例的CSS布局代码定义，然后为每个模块的包含框元素div定义margin-right:auto;margin-left:auto,就可以实现该元素居中显示。医用灭菌袋 灭菌袋封口机  硅橡胶印模材  齿科针
...

    这是一个比较有意思的话题，因为我们前面列举的代码都是基于块状元素进行说明的。能不能为段落中的几个文字添加边框呢？当然可以，根据盒模型基本规则，任何元素都可以定义自己的边框。但内联元素的边框显示效果有点特殊。联元素都是随行就市，因此它的上下边框高度不会影响行高，而且不受段落和行高的约束。下面，看一一个示例，请先输入下面的CSS布局代码。联元素总是随波逐流，因此它的左右边框宽度会挤占左右相邻文本的位置，而不是压住左两侧文本。左右边框会跟随文本流自由移动，移动时会紧跟内联元素前后，且不会出现断现象，也就是说单个边框不会被分开显示在2行内。
...

   边框是网页布局中一个最活跃的分子，网页中很多修饰性线条都是由边框来实现的。元素的边框具有下面四个特征：
    ·每个元素都包含4个方向上的边框，如border-top（顶边）、border-right（右边）、border-bottom（底边）和border-let~（左边）。你可以单独定义它们的属性，单独定义时需要选用上面4个属性。也可以使用border属性统一定义边框显示效果。
    ·可独立定义边框的宽度，如border-width、border-top-width、border-fight-width、border-bottom-id伍和border-left-widt。也可以使用border-width属性统一定义边框的宽度。
...

    另外，当两多个元素并列分布时，设置它们之间的间距也是—个较复杂的问题，它需要由两个对象的多个参数共同控制。
如左图所示左右两个元素之间的实际间距应为：左边元素的右补白、右边界与右边元素的左补白、左边界的总和。如果左在右两边元素定义了边框宽度，即border-width属性，则两个元素的间距也会随之发生变化，此时就需要把两个边框宽度也加进去。上图的CSS布局代码如下：
    根据规则,上图左右元素内容之间的实际间距就等于120px。如果我们要调整元素之间的间距，可以调整左右两侧元素相邻的4个属性中任意一个属性值，或者同时调整多个属性值。
...

    初次接触CSS时，往往会认为width属性表示整个元素的宽度，height属性表示整个元素的高度，包括IE 5.x及以下版本的浏览器都这样认为。实际上，网页设计师也常这样惯性思考问题，这种误解源于我们对事物的一般认识，而且比较根深蒂固。这自然也给网页布局带来麻烦，特别是当网页结构复杂，页面发生错位时，设计师往往会无从查起，不知如何纠错，因为潜意识中认为这种设置是正确的。例如，如果我们定义两个并列显示的div元素，设置每个div的width为50%。例请输入下面的CSS布局代码:
...