1、第第6 6章章 CSSCSS样式高级应用样式高级应用本章目标本章目标u熟悉熟悉页面布局概念页面布局概念u掌握掌握盒子模型和盒子的浮动与定位盒子模型和盒子的浮动与定位u掌握掌握使用使用CSS+DIVCSS+DIV布局布局2CSSCSS盒子盒子模型模型uCSSCSS盒子模型盒子模型概述概述l盒模型，又称框模型(Box Model)。顾名思义，就是一个盒子。在盒子模型中，页面中所有的HTML元素都被看作成一个个盒子。l元素的外边距（margin）、边框（border）、内边距（padding）、内容（content）就构成了CSS盒模型。3盒子模型属性盒子模型属性uborderborder边框属性：
2、设置边框的颜色（边框属性：设置边框的颜色（border-colorborder-color）、）、宽度（宽度（border-widthborder-width）以及样式（）以及样式（border-styleborder-style）。）。4属性描述border-color规定边框的颜色border-width规定边框的宽度border-style规定边框的样式盒子模型属性盒子模型属性uborder-colorborder-color：边框：边框颜色颜色。u语法：语法：u边框边框也可以设置单边颜色，也可以设置单边颜色，CSSCSS提供了提供了4 4个单边边框颜色个单边边框颜色属性，分别属性，分别
3、用来设置上、右、下、左边框的颜色：用来设置上、右、下、左边框的颜色：lborder-top-color:颜色值lborder-right-color:颜色值lborder-bottom-color:颜色值lborder-left-color:颜色值5border-color：color盒子模型属性盒子模型属性uborder-widthborder-width：边框：边框宽度宽度。u语法：语法：u与与border-colorborder-color相似，同样相似，同样提供了提供了4 4个单边边框宽度属个单边边框宽度属性：性：lborder-top-width:宽度值lborder-right-w
4、idth:宽度值lborder-bottom-width:宽度值lborder-left-width:宽度值6border-width：medium|thin|thick|length盒子模型属性盒子模型属性uborder-styleborder-style：边框：边框样式样式。u语法：语法：u与与border-colorborder-color相似，同样相似，同样提供了提供了4 4个单边边框宽度属个单边边框宽度属性：性：lborder-top-style：样式值;lborder-bottom-style：样式值;lborder-left-style：样式值;lborder-right-sty
5、le:样式值;7border-style：none|hidden|dotted|dashed|solid|double;盒子模型属性盒子模型属性uborder-styleborder-style属性属性取值取值8取值含义none默认值，无边框hidden与“none”相同。应用于表时例外，用于解决边框冲突dotted点线边框dashed虚线边框solid实线边框double双实线边框groove边框具有立体感的沟槽ridge边框成脊形Inset使整个边框凹陷，即在边框内嵌入一个立体边框。效果显示取决于border-color的值outset使整个边框凸起，即在边框内嵌入一个立体边框。效果显示取
6、决于border-color的值盒子模型属性盒子模型属性uborderborder边框边框属性示例属性示例9 h4 text-align:center;background:#CFF;#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;设置边框 人生若只如初见，何事秋风悲画扇。等闲变却故人心，
7、却道故人心易变。骊山语罢清宵半，泪雨霖铃终不怨。何如薄幸锦衣郎，比翼连枝当日愿。盒子模型属性盒子模型属性upaddingpadding属性：是盒子属性：是盒子的内边距，也称为内边界，表示的内边距，也称为内边界，表示边框和内容之间的距离。边框和内容之间的距离。u语法：语法：u说明说明l与属性border类似padding，也可以设置1、2、3、4个属性值。l如果需要单独设置某一个方向的内边距，使用padding-top、padding-right、padding-bottom、padding-left来设置。10padding：长度|百分比padding-top:10px;/*设置上内边界*/p
8、adding-right:1em;/*设置右内边界*/padding-bottom:50px;/*设置下内边界*/padding-left:20%;/*设置左内边界*/padding:10px 20px 30px 40px;/*设置上下左右内边界*/盒子模型属性盒子模型属性umarginmargin属性属性：盒子：盒子的外边距的外边距。外边。外边距的属性有五种，即距的属性有五种，即margin-topmargin-top、margin-rightmargin-right、margin-bottommargin-bottom、margin-margin-leftleft以及综合了以上四种方法的快
9、捷外边距属性以及综合了以上四种方法的快捷外边距属性marginmargin。u语法：语法：11margin-（top|right|bottom|left:长度单位|百分比单位|automargin：5px 10px 15px 20px;/*分别设置上下左右四个边界为5、10、15、20px*/margin：5px;/*四个边界均设置为5px*/margin：5px 10px；/*上下边界设置为5px,左右边界设置为10px*/margin：5px 10px 15px /*上边界设置为5px,左右边界设置为10px,下边界设置为15px*/盒子之间的关系盒子之间的关系u标准文档标准文档流流l“标
10、准文档流”（Normal Document Stream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素默认的排列规则。lHTML元素基本分为两类：p块级元素（block level）：每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。p行内元素（inline）：行内元素可以和其他元素处于一行，不用必须另起一行。12盒子之间的关系盒子之间的关系u定位定位lCSS 提供了三种基本的定位机制：p标准文档流（标准流）p浮动定位p绝对定位l除非专门指定，否则所有框都在普通流中定位。l标准流中的元素的位置由元素在(X)HTML 中的位置决定。1
11、3盒子之间的关系盒子之间的关系u定位定位lposition 属性：定位的方式l基本语法l属性值14position：static|absolute|fixed|relative取值 说明 参照物static 静态定位默认值。元素出现在正常的流中（忽略 top,bottom,left,right 或者 z-index 声明）。relative 相对定位 自己原来的位置absolute 绝对定位 已定位的祖先元素/浏览器视口fixed 固定定位 浏览器视口（并不是所有的浏览器都支持）盒子之间的关系盒子之间的关系u定位定位lstatic：静态定位，默认值，没有定位。l语法：l元素的位置由元素在(X)
12、HTML 中的位置决定。l元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。15position:static;盒子之间的关系盒子之间的关系u定位定位lrelative：相对定位，是指相对于它原来的位置进行定位。l语法：l相对定位的元素没有脱离文档流，只是按照 left、right、top、bottom 值进行了位置的偏移。l元素相对定位后，仍然在文档流中占据原来的空间。16position:relative;盒子之间的关系盒子之间的关系u定位定位labsolute：绝对定位。相对于最近的已定位的祖先元素进行定位。l语法：l如果不存在已
13、定位的祖先元素，则相对于浏览器窗口进行定位。l元素绝对定位后，将脱离文档流，不再占据原来的空间。17position:absolute;盒子之间的关系盒子之间的关系u定位定位lfixed：固定定位。l语法：l类似于absolute（绝对定位），不同的是其定位相对于视窗。18position:fixed;p.oneposition:fixed;left:5px;top:5px;p.twoposition:fixed;top:30px;right:5px;一些文本。更多的文本。盒子之间的关系盒子之间的关系u浮动浮动l把一个网页元素移动到网页（或者其他包含块）的一边，脱离常规文档流而表现为向右或向左
14、浮动。l在 CSS 中，任何元素都可以浮动。l浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄。l另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。19盒子之间的关系盒子之间的关系u浮动浮动lfloat语法：l说明：p浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。p由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。20float:right|left|none盒子之间的关系盒子之间的关系u浮动浮动l右浮动示例：21盒子之间的关系盒子之间的关系u浮动浮动l左浮动示例：
15、22盒子之间的关系盒子之间的关系u浮动浮动l多个框左浮动示例：23盒子之间的关系盒子之间的关系u浮动浮动l多个框左浮动示例（容纳不下框3）：24盒子之间的关系盒子之间的关系u浮动浮动l多个框左浮动示例（高度不一，卡住框3）：25盒子之间的关系盒子之间的关系u浮动浮动l清除浮动：使用clear属性可以让元素边上不出现其它浮动元素。l语法：l属性值：pleft 不允许元素左边有浮动的元素pright 不允许元素的右边有浮动的元素pboth 元素的两边都不允许有浮动的元素pnone 允许元素两边都有浮动的元素26clear:right|left|both|none盒子之间的关系盒子之间的关系u浮动示
16、例浮动示例27清理浮动案例#fruit float:left;#coat float:right;这是一个例子 一个服装图片 一个水果图片 这是一个例子 一个服装图片 一个水果图片 DIV+CSSDIV+CSS布局布局uDIV+CSSDIV+CSS布局的步骤大致布局的步骤大致4 4步：步：l第一步：在整体上对页面进行分块。l第二步：使用标记进行分块设计，清理标记的嵌套以及层叠关系。l第三步：对标记进行CSS定位。l第四步：在各个块中填充相应的内容。28DIV+CSSDIV+CSS布局布局u常用的布局效果：常用的布局效果：29DIV+CSSDIV+CSS布局布局u常用页面布局常用页面布局l三行（
17、列）模式：是把整个页面水平（垂直）分成三个区域，三行模式包含页面头部、主题、页脚三部分，三列模式包含左、中、右三部分。30三行模式#header,#footer height:100px;background:#9FF;#content height:200px;background:#FCF;页面头部 主体 页脚DIV+CSSDIV+CSS布局布局u常用页面布局常用页面布局l三行二列、三行三列模式：将整个页面水平分成三个区域即将页面分成三行，然后将中间区域分成两列或三列。31三行两列模式#header,#footer height:50px;width:100%;background:#FC
18、F;#content height:100px;width:100%;#left height:99px;width:30%;float:left;background:#CCC;#main height:99px;width:70%;float:left;background:#9CF;页面头部 左侧菜单栏 右侧main主体内容 页脚本本章章总结总结u盒子盒子模型（模型（Box ModelBox Model）是）是CSSCSS控制页面时一个很重要的控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素用法，才能真正地控制好页面中的各个元素。u掌握掌握单个的盒子的相关属性（边界（单个的盒子的相关属性（边界（marginmargin）、边框）、边框（borderborder）、填充（）、填充（paddingpadding）等）等）。）。u理解理解多个盒子之间的相互关系以及盒子的排列关系多个盒子之间的相互关系以及盒子的排列关系。u定位定位的基本概念，定位的方式包括静态定位，相对定位，的基本概念，定位的方式包括静态定位，相对定位，绝对定位及固定定位，浮动取消浮动绝对定位及固定定位，浮动取消浮动等。等。32谢谢谢谢!33
