CSS盒子模型PPT课件.ppt

《CSS盒子模型PPT课件.ppt》由会员分享，可在线阅读，更多相关《CSS盒子模型PPT课件.ppt（69页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、第 4 章 CSS盒子模型1.“盒子”与“模型”的概念探究2.边框3.设置内边距4.设置外边距5.盒子之间的关系6.盒子在标准流中的定位原则1第 4 章 CSS盒子模型 盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容大。换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置和大小。2第 4 章 CSS盒子模型 一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两方面来理解。一是理

2、解一个孤立的盒子的内部结构；二是理解多个盒子之间的相互关系。34.1 “盒子”与“模型”的概念探究图4.1 画框示意图4 图4.2 盒子模型54.2 边 框4.2.1 边框的三个属性 border-width:border-color:border-style:4.2.2 属性值的简写形式 CSS中可以用简单的方式确定边框的属性值。61在一行中同时设置边框的宽度、颜色和样式 要把border-width、border-color和border-style这3个属性合在一起，还可以用border属性来简写。border:2px green dashed 这行样式表示将4条边框都设置为2像素的绿色

3、虚线，这样就比分为3条样式来写更方便。73对一条边框设置与其他边框不同的属性 在CSS中，可以单独对某一条边框在一条CSS规则中设置属性，例如：border:2px green dashed;border-left:1px red solid94同时制定一条边框的一种属性 有时，还需要对某一条边框的某一个属性进行设置，例如仅希望设置左边框的颜色为红色，可以写作：border-left-color:red105实例 4-02.html#outerBoxwidth:200px;height:100px;border:2px black solid;border-left:4px green das

4、hed;border-color:red gray orange blue;/*上 右 下 左*/border-right-color:purple;114.3 设置内边距 和边框类似，padding属性可以设置1、2、3或4个属性值，分别如下:1个属性值，表示上下左右4个padding均为该值。2个属性值，前者为上下的值，后者为左右的值。3个属性值，第1个为上的值，第2个为左右的值，第3个为下的值。4个属性值，按照顺时针方向，依次为上、右、下、左padding的值。124.3 设置内边距 如果需要专门设置某一个方向的padding，可以使用padding-left、padding-right

5、、padding-top或者padding-bottom来设置。例:4-04.html134.4 设置外边距 外边距（margin）指的是盒子与盒子之间的距离。144.5 盒子之间的关系图4.14 打开新窗口 教务处 学生处 理学院 文学院 4.5.1 HTML与DOM树15DOM树与页面布局的对应关系 图4.15 DOM树与页面布局的对应关系164.5.2 标准文档流 “标准文档流”（Normal Document Stream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。171块级元素（block level）li占据着一个矩形的区域，并且和相

6、邻的li依次竖直排列，不会排在同一行中。ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。因此，这类元素称为“块级元素”（block level），即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。182行内元素（inline）对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”（inline）。比如标记，就是一个典型的行内元素，这个标记本身不占有独立的区域，仅仅是在其他元素的基础上指出了一定的范围。再比如，最常用的标记，也是一个行内元素。194.5.3 标记与标记 1、是一个区块容器标

7、记，即与之间相当于一个容器，可以容纳段落、标题、表格、图片等各种HTML元素。可以把与中的内容视为一个独立的对象，用于CSS的控制。声明时只需要对进行相应的控制，其中的各标记元素都会因此而改变。204.5.3 标记与标记 2、标记与标记一样，作为容器标记而被广泛应用在HTML语言中。在与中间同样可以容纳各种HTML元素，从而形成独立的对象。可以说与这两个标记起到的作用都是独立出各个区块，在这个意义上二者没有太多的不同。214.5.3 标记与标记3、与的区别 是一个块级元素，它包围的元素会自动换行，而仅仅是一个行内元素，在它的前后不会换行。没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适

8、时，就可以使用元素。224.5.3 标记与标记实例文件为“4-06.html”div 标记范例divfont-size:18px;font-weight:bold;font-family:Arial;color:#FFFF00;background-color:#0000FF;text-align:center;width:300px;height:100px;这是一个div标记 23 4.5.3 标记与标记实例文件为“13-07.html”div与span的区别 div标记不同行：span标记同一行：24 4.5.3 标记与标记图4.17 与标记的区别254.6 盒子在标准流中的定位原则4.

9、6.1 行内元素之间的水平margin图4.18 行内元素之间的margin264.6.2 块级元素之间的竖直margin 竖直排列的块级元素，margin的取值情况就会有所不同。两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者。274.6.2 块级元素之间的竖直margin 这个现象称为margin的“塌陷”（或称为“合并”）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。284.6.3 嵌套盒子之间的margin 当一个块包含在另一个块中时，便形成了典型的父子关系。其中子块的margin将以父块的内容为参考。294.

10、7.4 margin属性可以设置为负值 当margin设为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。30第5章 盒子的浮动与定位盒子的浮动盒子的定位盒子的display属性31第5章 盒子的浮动与定位 上一章介绍了独立的盒子模型，以及在标准流情况下的盒子的相互关系。如果仅仅按照标准流的方式进行排版，就只能按照仅有的几种可能性进行排版，限制太大。CSS的制定者又给出了若干不同的手段以实现各种排版需要，从而可以灵活地实现各种形式的排版要求。本章介绍CSS中float和position这两个重要属性的应用。325.1 盒子的浮动 在标准流中，一个块级元素在水平方向会自动伸展，

11、直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。使用“浮动”方式后，块级元素的表现就会有所不同。33 5.1 盒子的浮动 CSS中有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的宽度来确定。342023/2/15351、实验的基础页面float属性bodymargin:15px;font-family:Arial;font-size:12px;.fatherbackground-color:#ffff99;bo

12、rder:1px solid#111111;padding:5px;.father divpadding:10px;margin:15px;border:1px dashed#111111;background-color:#90baff;.father pborder:1px dashed#111111;background-color:#ff90ba;361、实验的基础页面.son1/*这里设置son1的浮动方式*/.son2/*这里设置son1的浮动方式*/.son3/*这里设置son1的浮动方式*/Box-1Box-2Box-3这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动

13、框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.372、第1个div向左浮动.son1float:left;383、第2个div也向左浮动.son2float:left;394、第3个div也向左浮动.son3float:left;405、改变浮动方向第3个向右浮动.son3float:right;41 图：div被挤到下一行时的效果 浏览器变窄后426、再次改变浮动的方向2右3左图：交换div位置时的效果.son1，.son3float:left;.son2float:right43

14、 图：div被挤到下一行的效果浏览器变窄后447、全部向左浮动 图：设置3个div浮动时的效果 45 图：div挤倒下一行被卡住时的效果浏览器变窄后468、使用clear属性清除浮动的影响 图：设置浮动后文字环绕的效果 47清除浮动对左侧影响.father pborder:1px dashed#111111;background-color:#ff90ba;clear:left;48清除浮动对右侧影响.father pborder:1px dashed#111111;background-color:#ff90ba;clear:right;495.2 盒子的定位（position属性）posi

15、tion属性可以设置为以下4个属性值之一。（1）static：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。50 （2）relative：称为相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。51 （3）absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。包含框：已定位的祖先框。（4）fixed：称为固定定位，它和绝对定位类似，只

16、是以浏览器窗口为基准进行定位。521、静态定位图：没有设置position属性时的状态532、相对定位1、一个子块的情况#block1background-color:#fff0ac;border:1px dashed#000000;padding:10px;position:relative;/*relative相对定位*/left:30px;top:30px;Box-154 图：一个div设置为相对定定位后的效果 55 图：以右侧和下侧为基准设置相对定定位 position:relative;bottom:30px;right:30px;562两个子块的情况 图5.19 设置为相对定位前的

17、效果 57 图5.20 两个兄弟div的情况下，其中一个设置为相对定位后的效果583结论 得出下面两条关于“相对定位”的定位原则。（1）使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置。（2）使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。59 图:两个兄弟div都设置为相对定位后的效果 60 图:在浮动方式下，使用相对定位 613、绝对定位 介绍了相对定位以后，下面介绍绝对定位（absolute）。通过上述讲解，可以了解到各种position属性都需要通过配合偏移一定的距离来实现定位，而其中核心的问题就是以什么作为偏移的基准。62实验的基础页面ab

18、solute属性bodymargin:20px;font-family:Arial;font-size:12px;#fatherbackground-color:#a0c8ff;border:1px dashed#000000;padding:15px;#father divbackground-color:#fff0ac;border:1px dashed#000000;padding:10px;#block2 Box-1 Box-2 Box-3 63 图：设置绝对定位前的效果 64将中间的div设置为绝对定位图：将中间的div设置为绝对定位后的效果#block2position:absol

19、ute;top:0px;right:0px;65将父块设置为“包含块”图：将父块设置为“包含块”后的效果#fatherbackground-color:#a0c8ff;border:1px dashed#000000;padding:15px;position:relative;#block2position:absolute;top:0px;right:0px;665.3盒子的display属性 display属性 Box-1 Box-2 Box-3 Box-4 Box-5 Box-6 Box-7 Box-8 675.3盒子的display属性 display属性 Box-1Box-2Box-3Box-4Box-5Box-6Box-7Box-8682023/2/1569