第7章CSS布局.ppt

1、第7章 CSS布局,了解DIV的概念 掌握DIV的布局 CSS盒模型 CSS元素的定位,本章主要内容：,网页设计制作基础与上机指导HTML+CSS+JavaScript 清华大学出版社,7.1 什么是DIV+CSS,DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格定位方式，真正地达到了内容与表现相分离。HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可

2、以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。,7.1.1 初识DIV,div标签是双标签，即以的形式存在，中间可以放置任何内容，包括其他的div标签。也就是说，div标签是一个没有任何特性的容器而已。 【例7-1】初识DIV标签 无标题文档 第1个div标签中的内容 第2个div标签中的内容 第3个div标签中的内容 ,该代码的浏览效果如图所示，从浏览效果中可以看出，在没有CSS的帮助下，div标签没有任何特别之处，无论怎么调整浏览器窗口，每个div标签占据一行。即默

3、认情况下，一行只能容纳一个div标签。,7.1.1 初识DIV,7.1.2 DIV元素的样式设置,1块状元素 块状元素是其他元素的容器，一般是矩形的，可容纳内联元素和其他块状元素，它有自己的高度和宽度。默认情况下，在父容器中占据一行，同一行无法容纳其他元素及文本。其他的元素将显示在其下一行，这可以看做被块级元素“挤”下去的。块状元素就是一个矩形容器，在CSS设置了高度和宽度后，形状无法被改变。,7.1.2 DIV元素的样式设置,2内联元素 和块级元素相反，内联元素没有固定形状，也无法设置宽度和高度。内联元素形状由其内含的内容决定，所以在宽度足够的情况下，一行能容纳多个内联元素。如果说相对于块状

4、元素是一个硬盒子，内联元素就是一个软软的布袋子（形状由内容决定）。 块状元素和内联元素的基本差异是块状元素一般都从新行开始，而当加入了CSS控制以后，块状元素和内联元素的这种属性差异就不成为差异了，完全可以把内联元素加上display:block这样的属性，让它也有每次都从新行开始的属性。相对来说，块状元素适合于大块的区域排版，所以常用来布局页面。而内联元素适合于局部元素的样式设置，所以常用于局部的文字样式设置。,7.1.3 DIV的页面布局,1布局页面的宽度 在布局页面宽度时一般要考虑最小显示分辨率的浏览用户，过去浏览用户的显示分辨率最小为800600（15寸CRT显示器），其最小宽度为80

5、0像素。浏览器的边框及滚动条部分约占24像素左右，故布局宽度为分辨率的水平像素应减去24像素，即过去网页布局宽度一般为778像素，再宽就会使页面产生水平滚动条。 由于计算机设备的飞速发展，现在使用800600显示分辨率的用户很少了，现在页面布局宽度最大不超过10021003像素（考虑到最小宽度1024像素，即1024768显示分辨率）。,7.1.3 DIV的页面布局,2布局页面水平居中 为了适应不同浏览用户的分辨率，网页设计师要始终保证页面整体内容在页面居中。在使用HTML表格布局页面时，只需要设置布局表格的align属性为center即可，而div居中没有属性可以设置，只能通过CSS控制其位

6、置。 在布局页面前，网页制作者一定要把页面的默认边距清除。为了方便操作，常用的方法是使用通配选择符“*”，将所有对象的边距清除，即margin属性和padding属性。margin属性代表对象的外边距（上、下、左、右），padding属性代表对象的内边距，也叫填充（上、下、左、右）。,7.1.4DIV元素的布局技巧,从技术角度来说，XHTML在控制样式时也不需要过多的嵌套。DIV+CSS起到的作用是将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。 1DIV元素的嵌套 类似于表格布局页面，为了实现复杂的布局结构，div元素也需要互相嵌套。但在布局页面时尽量少嵌套，因为XH

7、TML元素多重嵌套将影响浏览器对代码的解析速度。,7.1.4DIV元素的布局技巧,2DIV元素的浮动 作为块状元素，通过div布局网页，再用CSS设置其属性，完全符合内容与表现分离。由于一个div标签只占据一行，要实现布局中并列的2块区域，在块状元素有一个很重要的“float”属性，可以使多个块状元素并列于一行。 3右边div元素宽度自适应 所谓自适应宽度，是指2个并排的div，其中左边的div为固定宽度，右边div则根据浏览器的宽度自动调整，这种用法常用于文章列表和文章内容的页面布局。 4div内容居中 div内容居中即保持div包含内容的水平和垂直居中，这是很多网站需要用到的。,7.2 C

8、SS盒模型,盒模型是CSS定位布局的核心内容。在上一节中读者学习了布局网页基本方法，利用div元素可完成页面大部分的布局工作。而了解盒模型的知识以后，读者将拥有较完善的布局观，基本可做到在代码编写前就“胸有成竹”。,7.2.1 什么是CSS盒模型,盒模型示意图,7.2.2边距的控制,1外边距的控制 外边距属性即CSS的margin属性，CSS中可拆分为margin-top（顶部外边距）、margin-bottom（底部外边距）、margin-left（左外边距）和margin-right（右外边距），而margin则是一个复合的外边距属性，在CSS中，外边距属性margin可以统一设置，也可以

9、上下左右分开设置，其语法格式如下： margin-top:长度|百分比|auto margin-bottom: 长度|百分比|auto margin-left: 长度|百分比|auto margin-left: 长度|百分比|auto margin: 长度|百分比|auto,7.2.2边距的控制,2边框样式设置 元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。在 HTML中是用表格来创建文本周围的边框，而通过使用 CSS 边框属性，则可以创建出效果更佳出色的边框，并且可以应用于任何元素。作为盒模型的组成部分之一，边框的CSS样式设置不但影响到盒

10、子的尺寸，还影响到盒子的外观。边框的属性有 3种：宽度（border-width）、样式（border-style）以及颜色（border-color）。,7.2.2边距的控制,3内边距的设置 元素的内边距用来控制边框和内容区之间的空白距离，控制该区域最简单的属性是 padding 属性，类似于HTML中表格单元格的填充属性。内边距（padding）和外边距（margin）很相似，都是不可见的盒子组成部分，只是内边距（padding）和外边距（margin）之间夹着边框。从语法和用法上来说，内边距的属性与外边距的属性也是类似的，即可以使用复合属性，也可以使用单边属性，padding 属性接受长

11、度值或百分比值，但不允许使用负值。百分比值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。,7.3 CSS元素的定位,由于盒模型的限制，导致元素无法在页面中随心所欲摆放。但是网页内容需要一些能随意摆放的元素，为此，CSS提供了绝对定位模式和相对定位模式来解决，这2种定位模式需要设置CSS的position属性。 在CSS布局中，position属性非常重要，很多特殊容器，的定位必须用position来完成。position属性有4个值，分别是static、absolute、fixed和relative，其中static是默认值，代

12、表无定位（一般用于取消特殊定位的继承，恢复默认）。,7.3.1 CSS绝对定位,绝对定位在几种定位方法中使用最广泛，这种方法能够很精确地将元素移动到想要的位置。当容器的position属性值为absolute时，说明这个容器即被绝对定位了，此时该容器前面或后面的容器都会认为该容器不存在，即这个容器浮于其他容器上，它是独立出来的，类似于Photoshop软件中的图层。 如果容器设置了绝对定位，默认情况下，容器将紧挨着其父容器对象的左边和顶边，即父容器对象左上角。定位的方法为在CSS中设置容器的top（顶部）、bottom（底部）、left（左边）和right（右边）的值，这4个值的参照对象是浏览器的4条边。,7.3.2 CSS固定定位,固定定位和绝对定位非常类似，但被定位的容器不会随着滚动条的拖动而变化位置