Web前端开发技术与实践 第12章布局 阮晓龙 13938213680/rxl@hactcmeducn http://web.51xueweb.cn 河南中医学院管理信息工程学科 河南中医学院网络信息中心 015.9
Web前端开发技术与实践 第12章 布局 阮晓龙 13938213680 / rxl@hactcm.edu.cn http://web.51xueweb.cn 河南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9 1
2 本章主要内容 口定位与布局的基本属性 口多列布局 口盒布局 口案例:网页布局 米 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 本章主要内容 定位与布局的基本属性 多列布局 盒布局 案例：网页布局 2
3 1定位与布局的基本属性 1.1基本属性 口布局是指对网页中各个构成要素的合理编排,是呈现页面内容 的基础。合理的布局将有效的提高页面的可读性,提升用户体 验 口通过定位与布局的基本属性,可以确定元素的位置,并实现页 面多种多样的布局。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.定位与布局的基本属性 布局是指对网页中各个构成要素的合理编排，是呈现页面内容 的基础。合理的布局将有效的提高页面的可读性，提升用户体 验。 通过定位与布局的基本属性，可以确定元素的位置，并实现页 面多种多样的布局。 3 1.1基本属性
4 1定位与布局的基本属性 1.1基本属性 表1201定位与布同的本属性 margin 在一个声明中设置所有的外边距属性 margin-bottom设置元素的下外边距 margin-left 设置元素的左外边距 margin-night 设置元素的右外边距 margin-top 设置元素的上外边距 padding 在一个声明中设置所有内边距属性 padding-bottom设置元素的下内边距 padding-left 设置元素的左内边距 padding-right设置元素的右内边距 bottom 设置定位元素下外边距边界与其包含块下边畀之间的偏移 c规定元素的翔一侧不允许其他劫元素 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.定位与布局的基本属性 4 1.1基本属性
1定位与布局的基本属性 1.1基本属性 表1201定位与布同的本蛋性 述 clip 剪裁绝对定位元素 cursor 规定要显示的光标的类型(形状) display 规定元素应该生成的框的类型 规定框是否应该浮动 设置定位元素左外边距边界与其包含块左边界之间的偏移 overflow 规定当内容溢出元素框时发生的事情 position 规定元素的定位类型 设置定位元素右外边距边界与其包含块右边界之间的偏移 设罟定位元素的上外边距边界与其包含块上边界之闻的偏移 vertical-align设置元素的垂直对方式 visibilit 规定元素是否可见 zmax设置元素的堆吾顺序 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.定位与布局的基本属性 5 1.1基本属性