div+css的ppt下载

这是div+css的ppt，包括了Div+css的概述，DIV+CSS布局，SPAN和DIV的区别，CSS概述，用CSS定义样式，盒子模型，普通流定位机制等内容，欢迎点击下载。

div+css的ppt是由红软PPT免费下载网推荐的一款课件PPT类型的PowerPoint.

DIV+CSS Div+css的概述 业界对DIV+CSS的标准化设计关注 DIV+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准 传统的网页布局是使用网格 DIV+CSS布局 DIV+CSS布局这个布局中，div承载的是内容，而css承载的是样式。内容和样式的分离对于所见即所得的传统TABLE编辑方式确实是一个很大的冲击，尤其是设计人员很难接受设计一个他们不能立即看到的样式。不过随着学习，会发现div+css的好处实在是太明显了 DIV的概念 　1. DIV 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。 2. 如果单独使用 DIV 而不加任何 CSS，那么它在网页中的效果和使用 是一样的。 3. DIV本身就是容器性质的，你不但可以内嵌table还可以内嵌文本和其它的HTML代码 4. 注意： 标签可以用来组合其它的HTML元素，但不能嵌套在段落元素中，例如， aa bb cc 的结果是不确定的。 SPAN 和 DIV 的区别 SPAN 和 DIV 的区别在于: DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。 是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容 另外，由于SPAN 是行级元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。 CSS概述 为网页添加CSS 用CSS定义样式 用CSS定义样式 用CSS定义样式 用CSS定义样式 用CSS定义样式 盒子模型 每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。 盒子模型 盒子模型 布局中的主要样式 font line-height color margin padding border text-align background width: height float: clear display CSS定位与显示 CSS的定位与显示属性可以把一个HTML元素定位在网页中的任何位置 定位与布局密切相关 CSS中有三种基本的定位机制 普通流：显示的位置由元素在HTML文件中的位置决定 浮动：可以左右移动，直到碰到包含框或其它浮动框 绝对定位：可以直接将元素定位在页面上的任何位置 层叠顺序 进行CSS定位时，有可能发生多个元素的重叠 需要设置元素在Z轴上的层叠顺序 与定位相关的属性主要有14个 普通流定位机制 按照元素的类型和在HTML源文件中的出现顺序进行定位（ 从左到右从上到下 ） 就是block元素（如p、h、div）（块级框）从上到下一个接一个的排列 行级元素（如span、strong元素）在行中水平布置 除非特殊的指定，否则所有的框都在普通流中定位 相对定位 相对于元素在普通文本流中的初始位置 如果一个元素进行相对定位，它将以它所在的位置(即它在普通流中的位置)为初始点，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动 绝对定位 可以把某个元素精确的定位在某个地方 绝对定位使元素的位置与文档流无关，因此不占据普通流中的空间，普通文档流中其他元素的布局就像绝对定位的元素不存在时一样 绝对定位的元素的位置是相对于最近的父元素而言的 固定定位 是绝对定位的一个特殊情况 与绝对定位相似，唯一不同的是绝对定位是相对于父元素的某一个位置，而固定定位则是固定在浏览器的视框位置 这样当窗口滚动时，固定定位的元素不会随之滚动，总是出现在屏幕的固定位置 浮动（float） 浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘 当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，产生文字环绕的效果 浮动（float） 假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。 div的顺序是HTML代码中div的顺序决定的。 靠近页面边缘的一端是前，远离页面边缘的一端是后。 Clear属性 元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列 如果要为浮动元素留出空间，使其它的元素不在其两侧显示，可以对其周围的元素使用清理属性 clear : none | left |right | both 添加了clear属性的元素，通过自动增加空白边，达到留出空间的效果 清除浮动可以理解为打破横向排列。 Clear属性 假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下： Clear属性 其实这种理解是不正确的，这样做没有任何效果 对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。 要想让div2下移，就必须在div2的CSS样式中使用浮动，而不能在div1元素的CSS样式中使用清除浮动，本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行 Z-index属性 Z-index－设置层叠顺序 当定位多个元素并将它们相互重叠时，可以使用该属性设置元素在Z轴的层叠顺序 z-index : number 属性值越大表示在越上层epI红软基地