第05章css3布局定位技术模板.pptx

第05章：CSS3布局定位技术本章内容：第1节：css的布局定位属性第2节：CSS实现布局定位附录：编程规范本章目标了解css的编写规范。熟练掌握基于浮动和定位的页面布局方法。能够熟练、精确的根据原型图制作HTML页面等。第1节【 css定位布局标准属性】知识点1：尺寸属性知识点2：布局属性知识点3：定位属性知识点4：内外边距属性知识点5：背景属性知识点6：边框属性知识点7：文本属性知识点8：字体属性知识点9：列表属性知识点10：用户界面属性知识点11：书写模式知识点1【尺寸属性】-1尺寸属性：用来控制元素大小的属性，单位为长度单位。 属性描述取值width检索或设置对象的宽度长度单位min-width设置或检索对象的最小宽度长度单位max-width设置或检索对象的最大宽度长度单位height检索或设置对象的高度长度单位min-height设置或检索对象的最小高度长度单位max-height设置或检索对象的最大高度长度单位知识点1【尺寸属性】-2尺寸属性的使用场景当使用相对长度单位定义尺寸时，元素的大小跟随窗口大小变化。为保证元素的正常显示，需要设定元素的最大、最小长度。手机端开发时需要声明元素的最大或最小长度，pc端通常使用像素。最大或最小长度应使用像素单位。 知识点2【布局属性】-1文档流类型：文档中的元素在排列显示的显示规则，html中提供了3中文档流类型控制元素的布局方式。普通流浮动流。定位 知识点2【布局属性】-2普通流：文档中的元素默认显示显示规则。从上到下，从左到右块级元素独占一行元素不能重叠（无法交汇）。 默认文档流divpdiv知识点2【布局属性】-3浮动流：设定元素向某一个方向倾斜浮动的方式排列元素。从上到下，按照指定方向见缝插针。元素不能重叠（无法交汇）。 向左移动pdivdiv知识点2【布局属性】-4定位：直接定位元素在文档或在父元素中的位置，表现为漂浮在指定元素上方。脱离文档流。元素可以重叠在一块区域内,按照显示的有限级别以覆盖的方式显示。 divdiv知识点2【布局属性】-5布局属性：用来控制元素显示位置文档布局方式的属性，按照功能可以分为如下三类。控制显示类属性控制浮动类属性控制溢出类属性 知识点2【布局属性】-6控制显示类属性display：设定元素的显示类型，常用取值如下。none： 隐藏对象，不占据空间。inline： 指定对象为内联元素。 block： 指定对象为块元素。inline-block： 指定对象为内联块元素。visibility ：设定是否显示元素，常用取值如下visible： 设置对象可视，但占据空间hidden： 设置对象隐藏 .display { display: block;}.visibility { visibility:hidden;}知识点2【布局属性】-7控制浮动类属性float ：设定元素以浮动流方式显示。none： 设置对象不浮动 left： 设置对象浮动方向向左right：设置对象浮动方向右clear：清除浮动。none： 不清除浮动。both： 清除两侧浮动。left： 清楚左侧浮动。right： 清除右侧浮动。 .float { float: left;}.clear { clear: both;}知识点2【布局属性】-7控制溢出类属性overflow(-x)(-y)：设定当内容溢出（横向\纵向）父容器时的显示方式。visible： 对溢出内容不做处理，内容可能会超出容器。 hidden： 隐藏溢出容器的内容且不出现滚动条。 scroll： 隐藏溢出容器的内容，溢出的内容将以滚动条的方式呈现。 auto： 当内容溢出容器时出现滚动条，按需出现滚动条。 知识点3【定位属性】-1定位属性：使元素脱离正常的文档流，“漂浮”在指定的位置上的css属性。 属性描述取值position检索对象的定位方式relative | absolute | fixed | staticz-index检索对象的定位方式auto | integer:用整数来定义堆叠级别，可以为负数top检索或设置对象参照相对物顶边界向下偏移位置。长度单位bottom检索或设置对象参照相对物底边界向上偏移位置。长度单位left检索或设置对象参照相对物底边界向右偏移位置。长度单位right长度单位长度单位知识点3【定位属性】-2控制定位类属性: 使某个元素脱离文档流，“漂浮”在指定位置上。 position：设置定位属性的方式。relative: 相对定位，对象遵循普通流，当前元素参照父元素的左上角进行位置偏移。 absolute:绝对定位，对象脱离普通流，当前元素偏移属性参照的是离自身最近的相对定位元素，如果没有相对定位的元素，则一直追溯到文档。fixed:与absol