第11章 网页样式(2)课件

1、第10章 网页样式（2）理论部分理论部分盒子模型 盒子模型u网页布局的基础u与生活中的盒子相似纸盒纸盒填充部分填充部分盒内物品盒内物品纸盒外围间隙纸盒外围间隙盒子模型 盒子模型属性边框边框(border)内边距内边距(padding)元素内容元素内容外边距外边距(margin)盒子模型 盒子模型平面结构图u盒子模型属性的共同点n顺时针分为：上右下左4个方向n3个属性都可以分别设置各个方向属性值n3个属性都可以同时设置4个方向属性值n3个属性都占据空间盒子模型 盒子模型三维立体结构图第一层第一层第二层第二层第三层第三层第四层第四层第五层第五层盒子模型属性 边框属性有几个分量属性？它们的作用分别是

2、什么？ 设置盒子模型内边距使用（ ）属性，外边距使用（ ）属性。border-color 设置边框颜色border-width 设置边框粗细border-style 设置边框样式盒子模型属性 margin属性除了可以设置盒子与盒子之间的间距外，还能用于什么？实现网页自动居中布局实现网页自动居中布局body margin:0;#content width:760px;margin:0 auto;u实现关键点ndiv宽度固定nmargin属性的左右外边距值为auto将默认内边距初始化为将默认内边距初始化为0固定宽度固定宽度div自动居中自动居中盒子模型尺寸 盒子模型尺寸如何计算？盒子模型尺寸盒子模

3、型尺寸=border-width + padding + margin + 内容尺寸内容尺寸（宽度/高度）内容的宽度或高度内容的宽度或高度该盒子模型中，该盒子模型中，border宽度为宽度为0列表属性 在CSS中，可以用于设置列表样式的属性有哪些？它们的作用分别是什么？ 使用list-style-image属性设置列表项图标，会产生浏览器兼容性问题，解决方法如下：u将list-style-type属性的值设为noneu使用background属性为标签设置背景图像list-style 简写属性，设置所有分量样式list-style-type 设置列表项标志的类型list-style-image

4、 将图像设置为列表项标志list-style-position 设置列表中列表项标志的位置float属性定位网页元素定位网页元素定位定位更多活动更多活动创建横向多列布局创建横向多列布局横向三列布局横向三列布局横向两列布局横向两列布局 为什么需要float属性？浮动属性 float属性u定义元素的浮动方向u属性值：关键字left 浮动至容器的最左侧 直到接触容器为止right 浮动至容器的最右侧 直到接触容器为止none 不浮动float:属性值属性值;语法语法浮动属性 浮动的特点u左浮动时，与之相邻的元素，会紧挨着其右侧排列u右浮动时，与之相邻的元素，会紧挨着其左侧排列盒子盒子-1左浮动左浮动

5、盒子盒子-2紧贴其右显示紧贴其右显示盒子盒子-1右浮动右浮动盒子盒子-2紧贴其左显示紧贴其左显示浮动属性 浮动的特点u同时有左浮动和右浮动的元素时，与之相邻的元素，会填满两者之间的间隙浮动属性 浮动特性u使元素紧挨着容器左侧或右侧，相邻元素紧挨其显示u未设置尺寸的块级元素，设置了浮动之后，其尺寸会根据其内部元素大小自适应u同时有左浮动和右浮动元素时，与其相邻的元素会填满两者之间的间隙浮动属性 浮动法布局u运用float属性创建横向多列布局的特性uwidth属性结合overflow属性清除浮动u增加子层内容，结构不受影响关键代码关键代码#container width:760px; overfl

6、ow:hidden; #left float:left; #right float:left; margin-left:20px; 清除浮动清除浮动设置两个盒子之间的间距设置两个盒子之间的间距使垂直排列的块级元素横向排列使垂直排列的块级元素横向排列浮动属性 如何实现左右两侧的列交换位置？clear属性 在CSS中，clear属性的作用是什么？ 清除浮动盒子对周围文字的影响时，应将clear:both设置在文字相关的样式中清除浮动影响，扩展盒子高度清除浮动影响，扩展盒子高度属性值属性值说明说明visible默认值。内容不会被修剪，会呈现在盒子之外hidden内容会被修剪，并且其余内容是不可见的s

7、croll内容会被修剪，但是浏览器会显示滚动条以便查看其余内容auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容overflow属性 overflow属性u用于处理盒子中的内容溢出u属性值：关键字overflow:属性值属性值;语法语法讲解：overflow属性overflow属性的妙用结合width属性清除浮动影响扩展盒子高度关键代码关键代码overflow:hidden; width:100%;演示示例：演示示例：overflowoverflow属性属性第19页/共69页display属性我最喜欢的城市我最喜欢的城市 西双版纳西双版纳 西安西安 苏州苏州关于喜欢的理由，其实，很

8、简单。西双版纳是关于喜欢的理由，其实，很简单。西双版纳是生我养我的故乡，那里有我至亲至爱的人，是我生我养我的故乡，那里有我至亲至爱的人，是我无论浪迹何方，都会记得归去的乐土无论浪迹何方，都会记得归去的乐土.按标签顺序排版按标签顺序排版标准文档流标准文档流标准文档流包括块级元素标准文档流包括块级元素(block)和行内元素和行内元素(inline)display属性的作用属性的作用:指定指定HTML标签的显示方式标签的显示方式 为什么需要displaydisplay属性 display属性u用于指定HTML标签的显示方式u属性值：关键字display:属性值属性值;语法语法属性值属性值说明说明b

9、lock将元素显示为块级元素，该元素前后会带有换行符inline默认。元素会被显示为行内元素，该元素前后没有换行符none该元素不会被显示display属性 display属性应用u块级元素与行内元素的互相转换u解决IE6、IE7中浮动导致的双倍边距u在同时设置了float属性和margin属性（仅左右边距）的元素中，设置display:inline;示例示例spandisplay:block;divdisplay:inline;使使span标签块状显示标签块状显示使使div标签行内显示标签行内显示position属性进行复杂的元素定位进行复杂的元素定位浮于页面之上的提示框浮于页面之上的提示框

10、浮动广告浮动广告消息提示框消息提示框第23页/共69页 为什么需要position属性position属性 relative(相对定位)偏移参照基准偏移参照基准 设置1个或多个子块 根据指定偏移量进行偏移 仍旧处于标准文档流中 对父块及兄弟块无影响自身原位置设置方式设置方式相对原位置，水平右相对原位置，水平右移移30px相对原位置，垂直下相对原位置，垂直下移移30px演示示例：相对定位演示示例：相对定位position属性 absolute(绝对定位)偏移参照基准偏移参照基准 仅设置1个子块 根据指定偏移量进行偏移 脱离了标准文档流 不会对相邻块造成影响浏览器窗口设置方式设置方式 父块相对定位

11、，子块绝对定位 根据指定偏移量进行偏移 脱离了标准文档流 不会对相邻块造成影响距离绝对定位较近的，已经定位的祖先元素演示示例：绝对定位演示示例：绝对定位 仅子块绝对定位，设一个偏移量 设置偏移量方向，按指定偏移量偏移 脱离了标准文档流 不会对相邻块造成影响1.未设置偏移量方向：保持在原位2.设置偏移量方向：浏览器窗口z-index属性 在CSS中，z-index属性的作用是什么？ Z-index属性控制元素堆叠时，有什么特点。用于调整定位时重叠块的上、下位置用于调整定位时重叠块的上、下位置位于位于x-y轴的页面，轴的页面，相当于相当于z-index:0当当z-index:-1时，图时，图片位于片位于x-y轴的页轴的页面之下面之下在在z轴上叠加的层，轴上叠加的层，相当于相当于z-index:1在在z轴上叠加的层，轴上叠加的层，相当于相当于z-index:2网站制作流程网站制作流程 网站制作流程1 美工或网页设计师美工或网页设计师 设计界面2 前端工程