BTC-CS-HTML-01-第6章-CSS样式高级应用课件

1、第6章 CSS样式高级应用本章目标熟悉页面布局概念掌握盒子模型和盒子的浮动与定位掌握使用CSS+DIV布局2CSS盒子模型CSS盒子模型概述盒模型，又称框模型(Box Model)。顾名思义，就是一个盒子。在盒子模型中，页面中所有的HTML元素都被看作成一个个盒子。元素的外边距（margin）、边框（border）、内边距（padding）、内容（content）就构成了CSS盒模型。3盒子模型属性border边框属性：设置边框的颜色（border-color）、宽度（border-width）以及样式（border-style）。4属性描述border-color规定边框的颜色border-

2、width规定边框的宽度border-style规定边框的样式盒子模型属性border-color：边框颜色。语法：边框也可以设置单边颜色，CSS提供了4个单边边框颜色属性，分别用来设置上、右、下、左边框的颜色：border-top-color:颜色值border-right-color:颜色值border-bottom-color:颜色值border-left-color:颜色值5border-color：color盒子模型属性border-width：边框宽度。语法：与border-color相似，同样提供了4个单边边框宽度属性：border-top-width:宽度值border-rig

3、ht-width:宽度值border-bottom-width:宽度值border-left-width:宽度值6border-width：medium | thin| thick | length盒子模型属性border-style：边框样式。语法：与border-color相似，同样提供了4个单边边框宽度属性：border-top-style：样式值;border-bottom-style：样式值;border-left-style：样式值;border-right-style: 样式值;7border-style：none | hidden | dotted | dashed | sol

4、id |double;盒子模型属性border-style属性取值8取值含义none默认值，无边框hidden与“none”相同。应用于表时例外，用于解决边框冲突dotted点线边框dashed虚线边框solid实线边框double双实线边框groove边框具有立体感的沟槽ridge边框成脊形Inset使整个边框凹陷，即在边框内嵌入一个立体边框。效果显示取决于border-color的值outset使整个边框凸起，即在边框内嵌入一个立体边框。效果显示取决于border-color的值盒子模型属性border边框属性示例9 h4 text-align:center; background:#CF

5、F; #p1 background:#9CF; border:5px double #333; #p2 border-style:dashed solid; #p3 border-style:dotted; border-width:10px 15px; #p4 border-width:20px; border-style:groove; border-color:#0F0; 设置边框 人生若只如初见，何事秋风悲画扇。 等闲变却故人心，却道故人心易变。 骊山语罢清宵半，泪雨霖铃终不怨。 何如薄幸锦衣郎，比翼连枝当日愿。盒子模型属性padding属性：是盒子的内边距，也称为内边界，表示边框和内

6、容之间的距离。语法：说明与属性border类似padding，也可以设置1、2、3、4个属性值。 如果需要单独设置某一个方向的内边距，使用padding-top、padding-right、padding-bottom、padding-left来设置。10padding ：长度| 百分比padding-top: 10px; /*设置上内边界*/padding-right: 1em; /*设置右内边界*/padding-bottom:50px; /*设置下内边界*/padding-left: 20%; /*设置左内边界*/padding:10px 20px 30px 40px; /*设置上下左右

7、内边界*/盒子模型属性margin属性：盒子的外边距。外边距的属性有五种，即margin-top、margin-right、margin-bottom、margin-left以及综合了以上四种方法的快捷外边距属性margin。语法：11margin-（top|right| bottom | left:长度单位|百分比单位|automargin：5px 10px 15px 20px;/*分别设置上下左右四个边界为5、10、15、20px */margin：5px; /*四个边界均设置为5px*/margin：5px 10px；/*上下边界设置为5px,左右边界设置为10px*/margin：5p

8、x 10px 15px /*上边界设置为5px,左右边界设置为10px, 下边界设置为15px*/盒子之间的关系标准文档流“标准文档流”（Normal Document Stream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素默认的排列规则。HTML元素基本分为两类：块级元素（block level）：每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。行内元素（inline）：行内元素可以和其他元素处于一行，不用必须另起一行。12盒子之间的关系定位CSS 提供了三种基本的定位机制：标准文档流（标准流）浮动定位绝对定位除非专门指定，

9、否则所有框都在普通流中定位。标准流中的元素的位置由元素在 (X)HTML 中的位置决定。13盒子之间的关系定位position 属性：定位的方式基本语法属性值14position：static | absolute | fixed | relative取值 说明 参照物static 静态定位默认值。元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。relative 相对定位 自己原来的位置absolute 绝对定位 已定位的祖先元素 / 浏览器视口fixed 固定定位 浏览器视口（并不是所有的浏览器都支持）盒子之间的关系定位static

10、：静态定位，默认值，没有定位。语法：元素的位置由元素在 (X)HTML 中的位置决定。元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。15position:static;盒子之间的关系定位relative：相对定位，是指相对于它原来的位置进行定位。语法：相对定位的元素没有脱离文档流，只是按照 left、right、top、bottom 值进行了位置的偏移。 元素相对定位后，仍然在文档流中占据原来的空间。16position:relative;盒子之间的关系定位absolute：绝对定位。相对于最近的已定位的祖先元素进行定位。语法：如果

11、不存在已定位的祖先元素，则相对于浏览器窗口进行定位。元素绝对定位后，将脱离文档流，不再占据原来的空间。17position:absolute;盒子之间的关系定位fixed：固定定位。语法：类似于absolute（绝对定位），不同的是其定位相对于视窗。18position:fixed;p.oneposition:fixed;left:5px;top:5px;p.twoposition:fixed;top:30px;right:5px;一些文本。更多的文本。盒子之间的关系浮动把一个网页元素移动到网页（或者其他包含块）的一边，脱离常规文档流而表现为向右或向左浮动。在 CSS 中，任何元素都可以浮动。

12、浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄。另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。19盒子之间的关系浮动float语法：说明：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。20float:right | left | none盒子之间的关系浮动右浮动示例：21盒子之间的关系浮动左浮动示例：22盒子之间的关系浮动多个框左浮动示例：23盒子之间的关系浮动多个框左浮动示例（容纳不下框3）：24盒子之间的关

13、系浮动多个框左浮动示例（高度不一，卡住框3）：25盒子之间的关系浮动清除浮动：使用clear属性可以让元素边上不出现其它浮动元素。语法：属性值：left 不允许元素左边有浮动的元素right 不允许元素的右边有浮动的元素both 元素的两边都不允许有浮动的元素none 允许元素两边都有浮动的元素26clear:right | left |both| none盒子之间的关系浮动示例27清理浮动案例#fruit float: left;#coat float: right; 这是一个例子 一个服装图片 一个水果图片 这是一个例子 一个服装图片 一个水果图片 DIV+CSS布局DIV+CSS布局的步

14、骤大致4步：第一步：在整体上对页面进行分块。第二步：使用标记进行分块设计，清理标记的嵌套以及层叠关系。第三步：对标记进行CSS定位。第四步：在各个块中填充相应的内容。28DIV+CSS布局常用的布局效果：29DIV+CSS布局常用页面布局三行（列）模式：是把整个页面水平（垂直）分成三个区域，三行模式包含页面头部、主题、页脚三部分，三列模式包含左、中、右三部分。30三行模式 #header, #footer height: 100px; background:#9FF; #content height: 200px; background:#FCF; 页面头部 主体 页脚DIV+CSS布局常用页面布局三行二列、三行三列模式：将整个页面水平分成三个区域即将页面分成三行，然后将中间区域分成两列或三列。31三行两列模式 #header, #footer height: 50px; width:100%; background:#FCF; #content height: 100px; width:100%; #left height: 99px; width:30%; float:left; background:#CCC; #main height: 99px; width:70%; float:left; backgr