CSS布局教程

    国内网页设计师一般喜欢使用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布局代码:
...

    一希堕神话中有一个Pandora'sBox潘多拉的盒子的传说，说是多拉从天上来到人间，同时也带来了一个盒子，，出于好奇她打开盒子想看个究竟，结果饥荒疾病、、贪婪、嫉妒、悲惨等邪恶一齐从盒子里跑了出来，从此也就开始了人类的灾难。
    1996年，W3C推出了CSS，同时也带来了一个盒子，盒子的名字叫BBox Model（中文译为盒模型），根据这个盒模型规则，网页中所有元素对象都被放在一个盒子里，设计师可以通过CSS来控制这个盒子的显示属性，这就是经典的CSS盒模型。盒模型给网页设计带来了创意和激情，但如潘多拉的盒子一样，也让初学者和不少网页设计师为之愁眉和烦恼。
...

在早期的网页设计中，人们习惯于用html标签控制页面的框架和显示样式，那时候对于class还是比较陌生的，偶尔也使用它来定义标签的样式，如网页字体属性，超链接样式等，习惯于标签加属性的设计方式，对于这个class属性设计师开始持排斥态度，慢慢的设计师发现了它的优点，例如，如果事先定义了一个样式之后，可以利用class属性在不同标签内引用，免除了在不同标签内反复定义同一个样式的烦恼，于是class与网页样式就紧密的联系在一起，那时候的样式还仅仅是一种公共属性的代名词，犹如具有某种样式的网页模版，实际上，关于class最早引人重视得益于编程中类的方法应用，在编程语言中，类是一种抽象而艰深的概念，它表示一种原型。
...