第4章：CSS的盒子模型、浮动和定位分析课件.ppt

1、第四章第四章 CSS盒子模型、盒子模型、浮动和定位浮动和定位本章内容本章内容l块元素和行内元素块元素和行内元素 lCSS的盒子模型的盒子模型概念概念主要属性主要属性lCSS的浮动的浮动左浮动左浮动右浮动右浮动lCSS的定位的定位绝对定位绝对定位相对定位相对定位l应用应用CSS相关知识做极目商城首页面相关知识做极目商城首页面行内元素和块元素行内元素和块元素l行内元素（行内元素（inline element）特点是只占内容的宽度，默认不会换行，行内元素一般放文本或特点是只占内容的宽度，默认不会换行，行内元素一般放文本或者其它的行内元素。常见内联元素者其它的行内元素。常见内联元素l块元素块元素(bl

2、ock element)特点不管内容有多少，它要换行，同时沾满整行，块元素可以放特点不管内容有多少，它要换行，同时沾满整行，块元素可以放文本，行内元素，块元素。常见块元素：文本，行内元素，块元素。常见块元素：，。 span1 hello,world div1行内元素和块元素区别行内元素和块元素区别l行内元素只占内容的宽度，块元素内容不管内容多少要行内元素只占内容的宽度，块元素内容不管内容多少要占全行。占全行。 l行内元素只能容纳文本和其它行内元素，块元素可以容行内元素只能容纳文本和其它行内元素，块元素可以容纳文本，行内元素和块元素。（与浏览器类版本和类型纳文本，行内元素和块元素。（与浏览器类版

3、本和类型有关）有关） l一些一些CSS属性对行内元素不生效，比如属性对行内元素不生效，比如margin, left, right, width, height。建议尽可能使用块元素定位。（。建议尽可能使用块元素定位。（与浏览器版本和类型有关）与浏览器版本和类型有关） 行内元素和块元素转换行内元素和块元素转换l行内元素和块元素转换行内元素和块元素转换如果我们希望一个元素按照块元素方式显示如果我们希望一个元素按照块元素方式显示则：则： display：block； 如果我们希望一个元素按照行内元素方式显示如果我们希望一个元素按照行内元素方式显示则：则： display：inline； 盒子模型盒子

4、模型l盒子模型盒子模型所有的页面中的元素都可以看成是一个盒子，占据着一定的页面所有的页面中的元素都可以看成是一个盒子，占据着一定的页面空间。空间。盒子模型的主要属性盒子模型的主要属性l在网页设计中常用的属性名：内容（在网页设计中常用的属性名：内容（content）、填充（）、填充（padding）、边框（）、边框（border）、边界（）、边界（margin）盒子模型几个属性值解释：盒子模型几个属性值解释：l几个属性值解释：几个属性值解释：border: 1px solid red;这里我们给这里我们给body指定了指定了border的宽度，样式，颜色（顺序可以的宽度，样式，颜色（顺序可以随意

5、）随意）margin: 0 auto;0表示上下，表示上下，auto表示左右居中表示左右居中CSS的浮动的浮动l左浮动左浮动是指让该元素，尽量向左边移动，让出自己右边空间，给下一个是指让该元素，尽量向左边移动，让出自己右边空间，给下一个元素显示。元素显示。 l右浮动右浮动是指让该元素，尽量向右移动，直到碰到他的父元素的右边界。是指让该元素，尽量向右移动，直到碰到他的父元素的右边界。（特别强调：浮动对块元素和行内元素都生效！）（特别强调：浮动对块元素和行内元素都生效！） CSS浮动注意事项浮动注意事项l如果我们的如果我们的div框很多，外面的框无法容纳水平排列的浮框很多，外面的框无法容纳水平排列

6、的浮动动div元素，那么其它浮动块向下移动，直到有足够的空元素，那么其它浮动块向下移动，直到有足够的空间。间。 l 如果浮动元素的高度不同，那么当它们向下移动时可如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素能被其它浮动元素“卡住卡住”，如下图：，如下图： CSS的定位的定位lCSS定位（定位（positioning）属性允许你对元素进行定位。）属性允许你对元素进行定位。Position属性值：属性值： static(默认值默认值)：元素框正常生成。块级元素生成一个矩形框，：元素框正常生成。块级元素生成一个矩形框，作为文档流作为文档流/标准流的一部分，行内元素则会创建一个或者多

7、个标准流的一部分，行内元素则会创建一个或者多个行框，置于其父元素中。（对定位行框，置于其父元素中。（对定位left，right不生效。）不生效。） relative：元素框偏移某个距离。元素仍保持其未定位前的形状：元素框偏移某个距离。元素仍保持其未定位前的形状，他原来所占的空间仍保留，从这一角度看，好像改元素仍然在，他原来所占的空间仍保留，从这一角度看，好像改元素仍然在文档流文档流/标准流中一样。标准流中一样。 absolute：元素框从文档流完全删除，并相对于其包含块定位：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原。包含块可能是文档中

8、的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。何种类型的框。 fixed：元素框的表现类似于将：元素框的表现类似于将position设置为设置为absolute，不过，不过其包含块是视窗本身。（以其包含块是视窗本身。（以body本身来定位）本身来定位） CSS的相对定位的相对定位l相对定位（相对定位（relative） Relative.html源代码：源代码： div

9、1 div2 div3 div4 lRelative.css源代码源代码.s1width:100px; height: 60px; background-color: yellow; margin-left: 10px; float: left;#specialposition: relative;/*这里我们使用了相对定位这里我们使用了相对定位*/ left:40px;/*在原来的位置，向右移动大小（如果向左移动，则值在原来的位置，向右移动大小（如果向左移动，则值是负数）是负数）*/ top:70px;/*在原来的位置，向下移动大小（如果向上移动，则值是负在原来的位置，向下移动大小（如果向上

10、移动，则值是负数）数）*/ l把上例中把上例中relative换成换成absolute即为绝对定位即为绝对定位 l特别说明特别说明relative的参照点是它原来的位置的参照点是它原来的位置.进行一定排列进行一定排列absolute定位是对离自己最近的那个非标准流盒子而言的定位是对离自己最近的那个非标准流盒子而言的CSS的绝对定位的绝对定位流流:网页设计中就是指元素(标签)的排列方式。标准流标准流:元素在网页中就像流水,排在前面的元素(标签)内容前面出 现,排在后面的元素(标签)内容后面出现。非标准流非标准流:当某个元素(标签)脱离了标准流(比如因为相对定位)排列,我们统称为非标准排列。极目商

11、城首页布局实现极目商城首页布局实现l第一步：根据商城首页规划网站第一步：根据商城首页规划网站极目商城首页布局实现极目商城首页布局实现l完成后基本布局如下图，我们将其分为六个部分完成后基本布局如下图，我们将其分为六个部分1. Header 网站头部网站头部 width: 760px height: 50px 2.search 搜索全站的功能，包含网站的搜索全站的功能，包含网站的logo3. Main Navigation 导航条，具有按钮特效。导航条，具有按钮特效。4.左侧分类左侧分类 height: 根据类型变化根据类型变化 5.幻灯片放映效果的广告（暂以静态图片代替）幻灯片放映效果的广告（暂

12、以静态图片代替）6.广告广告极目商城首页布局实现极目商城首页布局实现l第二步：创建第二步：创建html模板及文件目录等模板及文件目录等1、创建、创建html模板，将其保存为模板，将其保存为index.html,并创建文件夹并创建文件夹css，images2、创建网站的大框：建立一个宽、创建网站的大框：建立一个宽100%的盒子，它将包含网站的的盒子，它将包含网站的所有元素。在所有元素。在html文件的文件的和和之间写入之间写入 Hello world.在在css中设置中设置background-color: yellow;width: 100%;margin: 0 auto;现在你可以看到盒子和

13、浏览器的顶端有现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙，就需要在器的默认的填充和边界造成的。消除这个空隙，就需要在css文文件中写入：件中写入：body margin: 0;padding: 0;极目商城首页布局实现极目商城首页布局实现l第三步：将网站分为六个第三步：将网站分为六个div，网页基本布局的基础：，网页基本布局的基础：1.将将“第一步第一步”提到的六个部分都放入盒子中，在提到的六个部分都放入盒子中，在html文件中写入文件中写入极目商城首页布局实现极目商城首页布局实现2.为了将六个部分区分开来，我们

14、将这六个部分用不同的背景颜为了将六个部分区分开来，我们将这六个部分用不同的背景颜色标示出来，在色标示出来，在css文件写入：文件写入：#page_containerwidth: 100%;margin: 0 auto;#headerheight: 30px;background-color: aqua;#searcherheight: 88px;background-color: black;#naviheight:40px; background-color:fuchsia;#left_menubackground-color:lime;#advbackground-color: maroo

15、n;#right_viewbackground-color: navy;#left_menu,#adv,#right_viewheight: 280px;极目商城首页布局实现极目商城首页布局实现3、效果如图（省略了、效果如图（省略了adv，right的截图）的截图）极目商城首页布局实现极目商城首页布局实现l第四步：设置第四步：设置left、adv、right的宽度，及浮动方式为的宽度，及浮动方式为#left_menubackground-color:lime;width: 25%;float: left;#advbackground-color: maroon; width:50%;float

16、: left;#right_viewbackground-color: navy;width: 25%;float: left;效果如图：效果如图：极目商城首页布局实现极目商城首页布局实现l第五步：创建一个存放内容的第五步：创建一个存放内容的div，用来存放除，用来存放除header以以外的部分，用来控制页面边距外的部分，用来控制页面边距1、页面代码如下：、页面代码如下： Header Searcher Navi Left Menu AdviceRight View 极目商城首页布局实现极目商城首页布局实现2、CSS代码如下：代码如下：#div_contentmargin-top:10px;margin-left:40px;margin-right:40px; 极目商城首页布局实现极目商城首页布局实现l3、最终效果如图、最终效果如图本章总结本章总结l块元素和行内元素块元素和行内元素 lCSS的盒子模型的盒子模型概念概念主要属性主要属性lCSS的浮动的浮动左浮动左浮动右浮动右浮动lCSS的定位的定位绝对定位绝对定位相对定位相对定位