实验css盒形分析盒型

1、 第六讲 DIV+CSS盒型分析内 容HTML and DOM and CSS盒子模型 理解”树”的概念HTML与DOMHTML与DOMDOM树 DOM树与页面布局的对应关系HTML与DOM标准文档流 “标准文档流”（Normal Document Stream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。HTML与DOM块级元素（block level） ul、li、P等元素占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。这类元素称为“块级元素”（block level），即它们总是以一个块的形式表现出来，并且跟同级的兄弟块

2、依次竖直排列，左右撑满。HTML与DOM行内元素（inline）对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”（inline）例如、标记，就是一个典型的行内元素，这个标记本身不占有独立的区域，仅仅是在其他元素的基础上指出了一定的范围 HTML与DOM and div标记是用来为XHTML文档内大块（Block-Level）的内容提供结构和背景的标签内容，不同的块在逻辑上把文档分割为独立的、不同的部分。用作严格的组织工具，并且不使用任何格式与其关联，通过CSS设置相应格式 and div标记是一个区块容器标记，即与之间相当于一个容器，可以容纳段落、标

3、题、表格、图片，章节、摘要和备注等各种HTML元素标记可代替等标记页面中的各元素由标识出来，由CSS来完成样式的控制。 and div标记内容内容id在当前页面引用一次， class可以反复使用 and span标记也是行级容器标记，是行级元素，几个元素可共一行。在与中间的各种HTML元素，也是独立的对象。可用标记代替等标记例如 代替标记 and and 的区别是块级标记，独占一行，是行级标记，可多个共用一行。通常情况下，对于页面中大的区块使用div标记，而span标记仅仅用于需要单独设置样式风格的小元素，例如一个单词、一副图片和一个超链接。Div和span标记的简单区别CSS盒子模型盒子模型

4、是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。 CSS盒子模型 1）理解一个独立盒子是矩形的，有内容、填充、边框、边距四部分组成2）理解多个盒子之间的相互关系。3）网页就是由多个盒子堆叠嵌套而成盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边界(magin),如图所示默认情况下盒子的边框是无，背景色是透明，所以我们在默认情

5、况下看不到盒子CSS盒子模型CSS盒子模型contentpadding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottomwidthheightCSS盒子模型元素宽度的计算： 左边界+左边框+左补白+宽度+右补白+右边框+右边界元素高度的计算： 上边界+上边框+上补白+高度+下补白+下边框+下边界CSS盒子模型CSS盒子模型IE quirk模式下盒子的宽度当将文档声明DOCTYP

6、E删除后，IE 对网页的解释会进入quirk（怪异）模式，此时盒子的宽度等于左边界宽度右边界因此当使用了盒子属性后切忌删除DOCTYPE没有设定doctype的盒子模型显示.htmlCSS盒子模型fireFox浏览效果IE显示效果CSS行内元素的盒子模型特点设置的width和height值不起效果四个边框都可以设置Margin和padding属性在水平方向上起效果，在垂直方向上不起效果CSS行内元素的盒子模型CSS盒子模型元素内容content的大小 1）宽度属性width有三种属性值：auto、长度值、百分比width：auto | length | percent; 2）高度属性heigh

7、t有三种属性值：auto、长度值、百分比height：auto | length | percent; CSS盒子模型属性值的简写形式在设置margin、padding、border这几个属性时，由于它们有四个方向如果给出1个属性值，表示四边一样如果给出2个属性值，前者-上下，后者-左右；如果给出3个属性值，前-上边框，中-左右，后-下边框；如果给出4个属性值，表示上、右、下、左边框的属性，即顺时针排序。元素的补白（内边距padding） 含义属性取值上补白padding-toplength | percent | auto;右补白padding-right同上下补白padding-botto

8、m同上左补白padding-left同上综合padding：padding-top padding-right padding-bottom padding-left; 例如：padding: 10px 20px 30px 40px CSS盒子模型元素的边框（border）边框样式（border-style） ，有四个方向边框颜色（border-color），有四个方向边框宽度（border-width），有四个方向边框综合（border），有以上三个项目，表示四边一样CSS盒子模型borderborder-colorborder-widthborder-styleborder-top-col

9、orborder-right-colorborder-bottom-colorborder-left-colorborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-top-styleborder-right-styleborder-bottom-styleborder-left-style边框样式border-styleborder-style取值含义none没有边框hidden隐藏边框dotted点线边框dashed虚线边框solid实线边框double双线边框groove3d凹槽边框rid

10、ge菱形边框inset3d凹边outset3d凸边综合含义属性取值上边框border-top: width style color右边框border-top: width style color下边框border-top: width style color左边框border-top: width style colorborderborder : width style color元素的边框（border）CSS盒子模型属性值的简写形式用综合描述某一属性的上、右、下、左要按照顺时针排序用边框综合Border来描述，表示四边一样，对宽度，类型，颜色是没有顺序要求。如：border：2px so

11、lid #666表示所有边框都是2像素粗实线灰色线条 另外值得注意的是，在特定情况下给元素设置background-color背景色时，IE作用的区域为content+padding，firefox则是content+padding+border。这点在border为粗虚线时特别明显。CSS盒子模型元素的外边距 margin是指元素与元素之间的距离对于块级元素，两个块存在着竖直margin对于行内元素，则两个行内快存在着水平marginCSS盒子模型示例1-块级元素之间的竖直margin若是产生换行效果的块级元素，两个块级元素之间的距离不再是margin-bottom与margin-top的和

12、，而是两者中的较大者。CSS盒子模型这个现象称为margin的“塌陷”（或称为“合并”）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。示例1-块级元素之间的竖直marginCSS盒子模型示例2-行内元素之间的水平margin当两个行内元素紧邻时，它们之间的距离为第一个元素的margin-right与第二个元素的margin-left之和。CSS盒子模型示例3-嵌套盒子之间的margin当一个块包含在另一个块中时，便形成了父子关系。如果父块的高度没有设定，其高度将自然形成，以能容纳子div的最小高度来显示。CSS盒子模型示例3-嵌套盒子之间的margin 父元素的高度=子

13、元素的高度+子元素边框厚度+子元素的margin+父元素的padding 子div边框与父div边框之间的距离 = 子div的margin+父div的paddingCSS盒子模型示例4-margin设置为负数当将margin设为负数时，会使得被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。CSS盒子模型示例5- margin设置为负数当块之间是父子关系时，通过设置子块的margin参数为负数，可以使得子块从父块中“分离”出来。margin-left：0px；margin-left：-60px；父div子div父div子divCSS盒子模型示例6-嵌套盒子之间的margin当设定了父元素的

14、高度height时，如果此时子元素的高度超过了该height值，IE和firefox显示结果完全不同。CSS盒子模型示例6-父容器高度低于子容器高度 父容器的大小设置为200px,高度为200px 我是儿子容器div,我的宽度为250px,高度为250px,请在不同浏览器中观察父容器高度小于子容器高度时的处理方式 CSS盒子模型#father width:200px; height:200px; border:2px solid blue; background:yellow;#son width:250px; height:250px; background:gray;示例6-父容器高度低于

15、子容器高度CSS盒子模型IE6.0显示效果，父容器自动扩大IE7.0及以上和火狐显示效果，父容器不会自动扩大CSS盒子模型IE6.0显示效果，父容器自动扩大IE7.0及以上和火狐显示效果，父容器不会自动扩大#father width:200px; height:200px; border:2px solid blue; background:yellow;#son margin:40px;width:250px; height:250px; background:gray;子元素容器设置了一个margin值，效果显示如上图显示示例6-总结IE6.0会自动扩大父元素，保持子元素的空间以及父元素的

16、paddingIE7.0及以上和火狐等标准浏览器则是保证父元素的高度，子元素超出父元素的范围CSS盒子模型子元素的高度+子元素边框厚度+子元素的margin+父元素的padding父元素的高度#father width:200px; height:200px; border:2px solid blue; background:yellow; overflow:visible#son margin:40px;width:250px; height:250px; background:gray;IE6.0显示效果，父容器自动扩大IE7.0及以上和火狐显示效果，父容器不会自动扩大示例6overfl

17、ow为CSS中设置当对象的内容超过其指定高度及宽度时如何管理内容的属性示例6 在父容器中设置overflow属性，可以对超出其容器的子元素容器设置不同效果overflow:hiddenoverflow:scroll示例6-总结CSS盒子模型值描述visible默认值，内容不会被修剪，会呈现在元素框之外hidden内容会被修剪，并且其余内容是不可见的scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。CSS几何题练习CSS几何题ul background:#ddd; m