第12章-CSS-3-0盒模型和界面设计.ppt

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,*,12.1,传统CSS盒模型,盒模型是使用,Div+CSS,对网页元素进行控制时一个非常重要的概念，只有很好的理解和掌握了盒模型以及其中每个元素的用法，才能真正地控制页面中各元素的位置。,什么是,CSS,盒,模型,盒模型是由,margin,（边界）、,border,（边框）、,padding,（填充）和,content,（内容）几个部分组成的，此外，在盒模型中，还具备高度和宽度两个辅助属性,。,CSS,盒模型的要点,关于,CSS,盒模型，有以下几个要点是在使用过程中需要注意的。,1,边框默认的,样式（,border-style,）可,设置为不,显示（,none,）。,2,填充,值（,padding,）不可,为负。,3,边界,值（,margin,）可以,为负，其显示效果在各浏览器中可能不同。,4,内联元素，例如,，定义上下边界不会影响到行高。,5,对于块级元素，未浮动的垂直相邻元素的上边界和下边界会被压缩,。例如有上下两个元素，上面元素的下边界为,10px,，下面元素的上边界为,5px,，则实际两个元素的间距为,10px,（两个边界值中较大的值。,margin,-,left,border,-,left,padding,-,left,margin-top,border-top,padding-top,padding,-,bottom,border,-,bottom,margin-bottom,margin,-,right,border,-,right,padding,-,right,content,6,浮动元素（无论是左还是右浮动）边界不压缩。并且如果浮动元素不声明宽度，则其宽度趋向于,0,，即压缩到其内容能承受的最小宽度。,7,如果盒中没有内容，则即使定义了宽度和高度都为,100%,，实际上只占,0%,，因此不会被显示，此处在使用,Div+CSS,布局的时候需要特别注意。,margin,属性,边,距,margin,属性用于设置页面中元素和元素之间的距离，即定义元素周围的空间范围，是页面排版中一个比较重要的概念,。,margin:auto|length,;,border,属性,边框,在,网页设计中，如果计算元素的宽和高，则需要把,border,属性值计算在内,。,border:border-style|border-color|border-width,;,padding,属性,填充,在,CSS,中，可以通过设置,padding,属性定义内容与边框之间的距离，即内边距,。,padding:length,;,实战练习,设置网页元素盒模型,最终文件：光盘,最终文件,第,12,章,12-1-5.html,视频：光盘,视频,第,12,章,12-1-5.swf,12.2,CSS 3.0弹性盒模型,弹性盒子模型是,CSS 3.0,最新引进的盒子模型处理机制，使用弹性盒模型，可以实现盒元素内部的多种布局，包括排列方向、排列顺序、空间分配和对齐方式等，大大增强了布局的灵活性，可以轻松地设计出自适应浏览器窗口的流动布局或者自适应大小的弹性布局。,开启弹性盒模型,开启弹性盒模型的方法，就是把,display,属性值设置为,box,或,inline-box,。目前还没有浏览器支持,box,属性值，为了能兼容,webkit,内核和,gecko,内核的浏览器，可以分别使用,-webkit-box,和,-moz-box,属性。开启弹性盒模型后，文档就会按照弹性盒模型默认的方式来布局子元素,。,box-orient,属性,元素布局方向,元素布局方向是指弹性盒模型内部的元素流动布局方向，包括横排和竖排两种。在,CSS,中，元素布局方向可以通过,CSS 3.0,新增的,box-orient,属性进行控制。基于,webkit,内核的替代私有属性是,-webkit-box-orient,，基于,gecko,内核的替代私有属性是,-moz-box-orient,。,box-orient,属性的语法格式如下。,box-orient:horizontal|vertical|inline-axis|block-axis|inherit;,box-direction,属性,元素布局顺序,元素布局顺序是用来控制弹性盒模型中子元素的排列顺序，也可以说是控制弹性盒模型内部元素的流动顺序。在,CSS,样式中，元素布局顺序可以通过,CSS 3.0,新增的,box-direction,属性进行设置。基于,webkit,内核的替代私有属性是,-webkit-box-direction,，基于,gecko,内核的替代私有属性是,-moz-box-direction,。,box-direction,:normal|reverse|inherit;,box-ordinal-group,属性,元素位置,元素位置指的是元素在弹性盒模型中的具体位置。在,CSS,样式中，元素位置可以通过,CSS 3.0,新增的,box-ordinal-group,属性进行设置。基于,webkit,内核的替代私有属性是,-webkit-box-ordinal-group,，基于,gecko,内核的替代私有属性是,-moz-box-ordinal-group,。,box-ordinal-group,:;,box-flex,属性,元素空间分配,CSS 3.0,中新增的,box-flex,属性，用于定义弹性盒模型内部子元素是否具有空间弹性。当盒元素的尺寸缩小（或扩大）时，被定义为有空间弹性的子元素的尺寸也会缩小（或扩大）。每当盒元素有额外的空间时，具有空间弹性的子元素，会扩大自身大小来填补这一空间。基于,webkit,内核的替代私有属性是,-webkit-box-flex,，基于,gecko,内核的替代私有属性是,-moz-box-flex,。,box-flex,:;,box-pack,和,box-align,属性,元素对齐,方式,CSS 3.0,中新增的,box-pack,和,box-align,属性，分别用于设置弹性盒模型内部元素的水平对齐方式和垂直对齐方式。这种对齐方式，对盒元素内部的文字、图像及子元素都是有效的。基于,webkit,内核的替代私有属性是,-webkit-box-pack,和,-webkit-box-align,，基于,gecko,内核的替代私有属性是,-moz-box-pack,和,-moz-box-align,。,box-pack,属性可能设置子元素在水平方向上的对齐方式，,box-pack,属性的语法格式如下。,box-pack:start|end|center|justify;,box-align,属性可以设置子元素在垂直方向上的对齐方向，,box-align,属性的语法格式如下。,box-alignstart|end|center|baseline|stretch,;,实现元素水平和垂直居中,显示,在,CSS 3.0,中，通过新增的,box-pack,属性和,box-align,属性，可以轻松的将元素放置在页面中水平居中和垂直居中的位置,。,实战练习,实现元素水平垂直居中显示,最终文件：光盘,最终文件,第,12,章,12-2-7.html,视频：光盘,视频,第,12,章,12-2-7.swf,实现元素底部对齐,在,CSS 3.0,出现之前，很难实现将元素与页面的底部对齐，而通过,CSS 3.0,中新增的,box-pack,属性和,box-align,属性，能够轻松的实现元素底部对齐效果实战练习,实现元素底部,对齐,最终文件：光盘,最终文件,第,12,章,12-2-8.html,视频：光盘,视频,第,12,章,12-2-8.swf,盒模型是网页设计中最基本、最重要的模型。,CSS3.0,新增的与盒模型有关的属性如盒子阴影、盒子尺寸和溢出处理等。,12.3,增强的,CSS3.0,盒模型,box-shadow,属性,元素阴影,在,CSS 3.0,中新增了为元素添加阴影的新属性,box-shadow,，通过该属性可以轻松的实现网页中元素的阴影效果。,box-shadow,:none|inset?2,4?;,实战练习,为网页元素添加阴影效果,最终文件：光盘,最终文件,第,12,章12-3-1.html,视频：光盘,视频,第,12,章,12-3-1.swf,box-sizing,属性,元素尺寸,大小,CSS 3.0,对盒模型进行了改善，新增的,box-sizing,属性可用于定义,width,和,height,的计算方法，可自由定义是否包含,border,和,padding,。,box-sizing,属性的语法格式如下。,box-sizing:content-box|padding-box|border-box|inherit;,实战练习,设置网页元素尺寸,大小,overflow-x,和,overflow-y,属性,元素溢出内容处理,在,CSS 2.0,规范中，就已经有处理溢出的,overflow,属性，该属性定义当盒子的内容超出盒子边界时的处理方法。,CSS 3.0,新增的,overflow-x,和,overflow-y,属性，是对,overflow,属性的补充，分别表示水平方向上额溢出处理和垂直方向上的溢出处理。,overflow-x,和,overflow-y,属性的语法格式如下。,overflow-x:visible|auto|hidden|scroll|no-display|no-content;,overflow-y:visible|auto|hidden|scroll|no-display|no-content;,最终文件：光盘,最终文件,第,12,章,12-3-2.html,视频：光盘,视频,第,12,章,12-3-2.swf,12.4,定位网页元素,CSS,的排版是一种比较新的排版理念，完全有别于传统的排版方式。它将页面首先在整体上进行,标签的分块，然后对各个块进行,CSS,定位，最后再在各个块中添加相应的内容。通过,CSS,排版的页面，更新十分容易，甚至是页面的拓扑结构，都可以通过修改,CSS,属性来重新定位。,position,属性,元素定位,position,属性是最主要的定位属性，,position,属性既可以定义元素的绝对位置，又可以定义元素的相对位置。,position:static|absolute|fixed|relative,;,relative,相对定位,设置,position,属性为,relative,，即可将元素的定位方式设置为相对定位。对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素相对于它的原始起点进行移动。另外，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他元素,。,实战练习,实现网页元素的叠加显示,最终文件：光盘,最终文件,第,12,章,12-4-2.html,视频：光盘,视频,第,12,章,12-4-2.swf,absolute,绝对定位,设置,position,属性为,absolute,，即可将元素的定位方式设置为绝对定位。绝对定位是参照浏览器的左上角，配合,top,、,right,、,bottom,和,left,进行定位的，如果没有设置上述的,4,个值，则默认的依据父级元素的坐标原点为原始点。,在父级元素的,position,属性为默认值时，,top,、,right,、,bottom,和,left,的坐标原点以,body,的坐标原点为起始位置。,实战练习,网页元素固定在右侧显示,fixed,固定定位,设置,position,属性为,fixed,，即可将元素的定位方式设置为固定定位。固定定位和绝对定位比较相似，它是绝对定位的一种特殊形式，固定定位的容器不会随着滚动条的拖动而变化位置。在视线中，固定定位的容器位置是不会改变的。固定定位可以把一些特殊效果固定在浏览器的视线位置,。,实战练习,实现固定位置的导航菜单,最终文件：光盘,最终文件,第,12,章,12-4-3.html,视频：光盘,视频,第,12,章,12-4-3.swf,最终文件：光盘,最终文件,第,12,章,12-4-4.html,视频：光盘,视频,第,12,章,12-4-4.swf,float,属性,浮动,定位,除了使用,position,属性进行定位外，还可以使用,float,属性定位。,float,定位只能在水平方向上定位，而不能在垂直方向上定位。,浮动定位是,CSS,排版中非常重要的手段。浮动的框可以左右移动，直到它外边缘碰到包含框或另一个浮动框的边缘。,float:none|left|right;,实战,练习,制作顺序排列的图像列表,最终文件：光盘,最终文件,第,12,章,12-4-5.html,视频：光盘,视频,第,12,章,12-4-5.swf,12.5,CSS3.0,新增用户界面设计属性,在界面设计方面，为了增强用户体验，设计师会想尽办法来实现理想的页面效果，也因此增加了许多工作量。,CSS 3.0,在用户界面设计方面有很大的改进，可以允许改变元素尺寸、设置元素外轮廓线、改变焦点导航顺序、让元素变身，以及给元素添加内容等。,resize,属性,改变元素尺寸,在,CSS 3.0,中新增了区域缩放调节的功能设置，通过新增的,resize,属性，就可以实现页面中元素的区域缩放操作，调节元素的尺寸大小。,resize,:none|both|horizontal|vertical|inherit;,实战练习,实现网页元素尺寸任意缩放,outline,属性,轮廓外边框,CSS 3.0,中新增的,outline,属性可以为元素添加外轮廓线，以突出显示元素。外轮廓线看起来很像元素边框，而且语法也与边框非常类似，但是外轮廓线不点用元素的尺寸。,outline,:outline-color|outline-style|outline-width|inherit;,实战练习,为网页元素添加轮廓外边框,最终文件：光盘,最终文件,第,12,章,12-5-1.html,视频：光盘,视频,第,12,章,12-5-1.swf,最终文件：光盘,最终文件,第,12,章,12-5-2.html,视频：光盘,视频,第,12,章,12-5-2.swf,appearance,属性,伪装的元素,CSS 3.0,中新增,appearance,属性，通过该属性可以方便地把元素伪装成其他类型的元素，给网页界面设计带来极大的灵活性。基于,webkit,内核的替代私有属性是,-webkit-appearance,，基于,gecko,内核的替代私有属性是,-moz-appearance,。,appearance:normal|icon|window|button|menu|field;,实战练习,将超链接文字伪装成按钮,content,属性,为元素添加内容,content,属性与,:before,及,:after,伪元素配合使用，可以将生成的内容放在一个元素内容的前面或后面。,content:none|normal|counter()|attr()|url()|inherit;,实战练习,为网页元素赋予内容,最终文件：光盘,最终文件,第,12,章,12-5-3.html,视频：光盘,视频,第,12,章,12-5-3.swf,最终文件：光盘,最终文件,第,12,章,12-5-4.html,视频：光盘,视频,第,12,章,12-5-4.swf,12.6,CSS3.0,新增多列布局属性,网页设计者如果要设计多列布局，有两种方法，一种是浮动布局，另一种是定位布局。浮动布局比较灵活，但容易发生错位，需要添加大量的附加代码或无用的换行符，增加了不必要的工作量。定位布局可以精确地确定位置，不会发生错位，但是无法满足模块的适应能力。在,CSS 3.0,中新增了多列布局相关属性，可以从多个方面去设置：多列的列数、每列的宽度、列与列之间的距离、列与列之间的分隔线、跨多列设置等，本节将详细进行介绍。,columns,属性,多列,布局,CSS 3.0,新增了,columns,属性，该属性用于快速定义多列布局的列数目和每列的宽度基于,webkit,内核的替代私有属性是,-webkit-columns,，,gecko,内核的浏览器暂不支持。,columns:|;,实战练习,快速将网页内容分为多列,最终文件：光盘,最终文件,第,12,章,12-6-1.html,视频：光盘,视频,第,12,章,12-6-1.swf,column-width,属性,列,宽度,CSS 3.0,新增,column-width,属性，该属性可以定义多列布局中每列的宽度，可以单独使用，也可以和其他多列布局属性组合使用。基于,webkit,内核的替代私有属性是,-webkit-column-width,，基于,gecko,内核的替代私有属性是,-moz-column-width,。,column-width:auto|;,column-count,属性,列数,CSS 3.0,新增,column-count,属性，该属性可以设置多列布局的列数，而不需要通过列宽度自动调整列数。基于,webkit,内核的替代私有属性是,-webkit-column-count,，基于,gecko,内核的替代私有属性是,-moz-column-count,。,column-count:auto|;,column-gap,属性,列间距,CSS 3.0,新增,column-gap,属性，通过该属性可以设置列与列之间的间距，从而可以更好的控制多列布局中的内容和版式。基于,webkit,内核的替代私有属性是,-webkit-column-gap,，基于,gecko,内核的替代私有属性是,-moz-column-gap,。,column-gap:normal|;,column-rule,属性,列分隔线,边框是非常重要的,CSS,属性之一，通过边框可以划分不同的区域。,CSS 3.0,新增,column-rule,属性，在多列布局中，通过该属性设置多列布局的边框，用于区分不同的列。基于,webkit,内核的替代私有属性是,-webkit-column-rule,，基于,gecko,内核的替代私有属性是,-moz-column-rule,。,column-rule:column-rule-width|column-rule-style|column-rule-color;,column-span,属性,横跨所有列,CSS 3.0,新增,column-span,属性，在多列布局中，该属性用于定义元素跨列显示。基于,webkit,内核的替代私有属性是,-webkit-column-span,，,gecko,内核的浏览器暂不支持该属性。,column-span:1|all;,实战练习,实现网页内容的分栏显示效果,最终文件：光盘,最终文件,第,12,章,12-6-6.html,视频：光盘,视频,第,12,章,12-6-6.swf,12.7,本章小结,本章主要介绍了,CSS,盒模型和界面设计内容的相关知识，通过本章的学习能够使读者了解,CSS,盒模型和新增的,CSS3.0,功能属性，不可否认这些功能的确强大，一个网页布局的好坏，直接影响到网页加载的速度。完成本章内容的学习，希望读者能够掌握这些相关知识，并对网页有进一步的认识和了解。,