《css与div介绍》ppt课件

1、CSSCSS与与DIVDIV查阅可以查阅css的详细规格阐明一、标志与标志1、概述 10-1.html对于单块来说和没有什么区别，标志是专门针对款式表设计的标志division是一个区块容器标志也是一个容器标志都是独立出各自的区块2、与的区别 10-2.html是一个块级元素block-level，他包围的元素会自动换行是一个行内元素line elements，在他的后面不会换行，没有构造上的意义，纯粹是运用款式，当其他行内元素都不适宜的时候就可以运用span元素可以包含于标志中，成为他的子元素，而反过来那么不成立，即标志不能包含标志3、阅历：在页面中大的区块运用div标志，spa

2、n标志适用于需求独立设置风格的小元素，比如一个单词，一副图片和一个超链接等。块级元素block-level，块状标签div标签ol、ul、li标签dl、dt、dd标签p标签table、tr、th、td标签h1、h2、h3、h4、h5、h6标签行内元素line elements，内联标签a标签br标签img标签span标签二、盒子模型 1、盒子模型的概念 是DIV排版的中心所在，传统的表格排版是经过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是经过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。 一个盒模型由内容(content)、填充(padding)、边框(border

3、)、边境(margin)，这四部分组成整个盒模型在页面中所占的宽度是由左边境+左边框+左填充+内容+右填充+右边框+右边境组成，而css款式中width和height所定义的宽度和高度仅仅是内容部分的宽度和高度，这是容易搞混的地方2、border 10-3.html border的外围为元素的最外围，的外围为元素的最外围，border的粗细会占据空间，因的粗细会占据空间，因此计算元素的实践高和宽的时候要将此计算元素的实践高和宽的时候要将border纳入。纳入。3、padding 10-6.html4、margin 10-8.html二、盒子模型 1、float定位 10-14.html 定义了

4、float属性后，div的宽度自动为包含内容的值，否那么那么默以为整行 2、position定位 10-20.html 3、z-index空间位置 默许值是后出现的元素覆盖先出现的 4、实例：给图片签名运用css绝对定位，比ps的益处是可以轻松修正签名三、元素的定位四、CSS+DIV规划排版的观念 1、将页面用div分块 11-1.html在设计网页时，首先应该先明确整个页面的组成，并且在HTML中搭建好框架，然后才是排版，以及各个细节。 2、设计各块的位置 当页面的内容曾经确定后，那么需求根据内容本身思索整体的页面排版，例如单栏、双栏或左中右等。如以下图常见的双栏方式。 3、用css定位 11-1.html五、css+div版式1、一列规划一列固定宽度 一列固定宽度居中 一列自顺应宽度 一列自顺应宽度居中 一列二至多块规划 2、两列规划二列自顺应宽度 二列固定宽度 二列固定宽度居中 3、三列规划 三列自顺应宽度 三列固