CSS盒子模型

第4章CSS盒子模型1.“盒子”与“模型”的概念探究2.边框3.设置内边距4.设置外边距5.盒子之间的关系6.盒子在标准流中的定位原则第4章CSS盒子模型盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容大。换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置和大小。第4章CSS盒子模型一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两方面来理解。一是理解一个孤立的盒子的内部结构；二是理解多个盒子之间的相互关系。4.1“盒子”与“模型”的概念探究图4.1画框示意图图4.2盒子模型4.2边框4.2.1边框的三个属性border-width:border-color:border-style:4.2.2属性值的简写形式CSS中可以用简单的方式确定边框的属性值。1．在一行中同时设置边框的宽度、颜色和样式要把border-width、border-color和border-style这3个属性合在一起，还可以用border属性来简写。border:2pxgreendashed这行样式表示将4条边框都设置为2像素的绿色虚线，这样就比分为3条样式来写更方便。3．对一条边框设置与其他边框不同的属性在CSS中，可以单独对某一条边框在一条CSS规则中设置属性，例如：border:2pxgreendashed;border-left:1pxredsolid4．同时制定一条边框的一种属性有时，还需要对某一条边框的某一个属性进行设置，例如仅希望设置左边框的颜色为红色，可以写作：border-left-color:red5．实例4-02.htmlhtmlheadstyletype=text/css#outerBox{width:200px;height:100px;border:2pxblacksolid;border-left:4pxgreendashed;border-color:redgrayorangeblue;/*上右下左*/border-right-color:purple;}/style/headbodydivid=outerBox/div/body/html4.3设置内边距和边框类似，padding属性可以设置1、2、3或4个属性值，分别如下:1个属性值，表示上下左右4个padding均为该值。2个属性值，前者为上下的值，后者为左右的值。3个属性值，第1个为上的值，第2个为左右的值，第3个为下的值。4个属性值，按照顺时针方向，依次为上、右、下、左padding的值。4.3设置内边距如果需要专门设置某一个方向的padding，可以使用padding-left、padding-right、padding-top或者padding-bottom来设置。例:4-04.html4.4设置外边距外边距（margin）指的是盒子与盒子之间的距离。4.5盒子之间的关系图4.14打开新窗口bodyulullilililibodyulli教务处/lili学生处/li/ululli理学院/lili文学院/li/ul/body4.5.1HTML与DOM树DOM树与页面布局的对应关系bodyulullilililibodyulliliullili图4.15DOM树与页面布局的对应关系4.5.2标准文档流“标准文档流”（NormalDocumentStream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。1．块级元素（blocklevel）li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。因此，这类元素称为“块级元素”（blocklevel），即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。2．行内元素（inline）对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”（inline）。比如b/b标记，就是一个典型的行内元素，这个标记本身不占有独立的区域，仅仅是在其他元素的基础上指出了一定的范围。再比如，最常用的a标记，也是一个行内元素。4.5.3div标记与span标记1、divdiv是一个区块容器标记，即div与/div之间相当于一个容器，可以容纳段落、标题、表格、图片等各种HTML元素。可以把div与/div中的内容视为一个独立的对象，用于CSS的控制。声明时只需要对div进行相应的控制，其中的各标记元素都会因此而改变。4.5.3div标记与span标记2、spanspan标记与div标记一样，作为容器标记而被广泛应用在HTML语言中。在span与/span中间同样可以容纳各种HTML元素，从而形成独立的对象。可以说div与span这两个标记起到的作用都是独立出各个区块，在这个意义上二者没有太多的不同。4.5.3div标记与span标记3、div与span的区别div是一个块级元素，它包围的元素会自动换行，而span仅仅是一个行内元素，在它的前后不会换行。span没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适时，就可以使用span元素。4.5.3div标记与span标记实例文件为“4-06.html”htmlheadtitlediv标记范例/titlestyletype=text/cssdiv{font-size:18px;font-weight:bold;font-family:Arial;color:#FFFF00;background-color:#0000FF;text-align:center;width:300px;height:100px;}/style/headbodydiv这是一个div标记/div/body/html4.5.3div标记与span标记实例文件为“13-07.html”htmlheadtitlediv与span的区别/title/headbodypdiv标记不同行：/pdivimgsrc=cup.gifborder=0/divdivimgsrc=cup.gifborder=0/divdivimgsrc=cup.gifborder=0/divpspan标记同一行：/pspanimgsrc=cup.gifborder=0/spanspanimgsrc=cup.gifborder=0/spanspanimgsrc=cup.gifborder=0/span/body/html4.5.3div标记与span标记图4.17div与span标记的区别4.6盒子在标准流中的定位原则4.6.1行内元素之间的水平marginspan1Margin-rightMargin-leftspan2图4.18行内元素之间的margin4.6.2块级元素之间的竖直margin竖直排列的块级元素，margin的取值情况就会有所不同。两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者。4.6.2块级元素之间的竖直margin这个现象称为margin的“塌陷”（或称为“合并”）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。4.6.3嵌套盒子之间的margin当一个div块包含在另一个div块中时，便形成了典型的父子关系。其中子块的margin将以父块的内容为参考。4.7.4margin属性可以设置为负值当margin设为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。第5章盒子的浮动与定位•盒子的浮动•盒子的定位•盒子的display属性第5章盒子的浮动与定位上一章介绍了独立的盒子模型，以及在标准流情况下的盒子的相互关系。如果仅仅按照标准流的方式进行排版，就只能按照仅有的几种可能性进行排版，限制太大。CSS的制定者又给出了若干不同的手段以实现各种排版需要，从而可以灵活地实现各种形式的排版要求。本章介绍CSS中float和position这两个重要属性的应用。5.1盒子的浮动在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。使用“浮动”方式后，块级元素的表现就会有所不同。5.1盒子的浮动CSS中有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的宽度来确定。1、实验的基础页面htmlheadtitlefloat属性/titlestyletype=text/cssbody{margin:15px;font-family:Arial;font-size:12px;}.father{background-color:#ffff99;border:1pxsolid#111111;padding:5px;}.fatherdiv{padding:10px;margin:15px;border:1pxdashed#111111;background-color:#90baff;}.fatherp{border:1pxdashed#111111;background-color:#ff90ba;}1、实验的基础页面.son1{/*这里设置son1的浮动方式*/}.son2{/*这里设置son1的浮动方式*/}.son3{/*这里设置son1的浮动方式*/}/style/headbodydivclass=fatherdivclass=son1Box-1/divdivclass=son2Box-2/divdivclass=son3Box-3/divp这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字./p/div/body/html2、第1个div向左浮动.son1{float:left;}3、第2个div也向左浮动.son2{float:left;}4、第3个div也向左浮动.son3{float:left;}5、改变浮动方向—第3个向右浮动.son3{float:right;}图：div被挤到下一行时的效果浏览器变窄后6、再次改变浮动的方向—2右3左图：交换div位置时的效果.son1，.son3{float:left;}.son2{float:right}图：div被挤到下一行的效果浏览器变窄后7、全部向左浮动图：设置3个div浮动时的效果图：div挤倒下一行被卡住时的效果浏览器变窄后8、使用clear属性清除浮动的影响图：设置浮动后文字环绕的效果清除浮动对左侧影响.fatherp{border:1pxdashed#111111;background-color:#ff90ba;clear:left;}清除浮动对右侧影响.fatherp{border:1pxdashed#111111;background-col